<!--<label class="custom_checkbox" data-bind="css: {'checked': checkAll, 'incomplete': checkAllIncomplite}">
	<span class="icon"></span>
	<input type="checkbox" data-bind="checked: checkAll" />
</label>-->
<!--<span class="search_block">
	<span class="input" data-bind="css: {'focus': isSearchFocused}">
		<span class="icon search" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SEARCH'}, click: searchSubmitCommand"></span>
		<input class="field" type="text" data-bind="valueUpdate: 'afterkeydown', value: searchInput, onEnter: searchSubmitCommand, hasfocus: isSearchFocused" />
	</span>
</span>-->

<div class="searchbar searchbar-active" data-bind="css: {'searchbar-active': isSearchFocused}">
	<div class="searchbar-input">
		<input type="search" spellcheck="false" placeholder="Search" data-bind="value: searchInput, valueUpdate: 'afterkeydown', onEnter: searchSubmitCommand, hasfocus: isSearchFocused, i18n: {'key': 'COREWEBCLIENT/ACTION_SEARCH'}">
		<!--<a href="#" class="searchbar-clear"></a>-->
	</div>
	<a href="#" class="searchbar-cancel aurora-icons close" data-bind="css: {'show': !preLoadingList() && isSearch()} , click: onClearSearchClick"><span class="icon"></span></a>
	<!--i18n: {'key': 'COREWEBCLIENT/ACTION_CLEAR_SEARCH'},--> 
</div>

<div class="page-content">
	<div data-bind="visible: isEmptyList() && !preLoadingList()">
		<span class="list_notification" data-bind="visible: !isSearch()">
			<span class="description" data-bind="i18n: {'key': '%MODULENAME%/INFO_NO_CONTACTS'}"></span>
			<span class="description" data-bind="text: infoCreateOrImport, visible: visibleCreateOrImportText"></span>
			<span class="description" data-bind="i18n: {'key': '%MODULENAME%/INFO_DRAGNDROP_TO_GROUP'}, visible: visibleDragNDropToGroupText"></span>
		</span>
		<span class="list_notification" data-bind="visible: isSearch()">
			<!--<span class="link" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_CLEAR_SEARCH'}, click: onClearSearchClick"></span>-->
			<span class="description" data-bind="i18n: {'key': '%MODULENAME%/INFO_NO_CONTACTS_FOUND'}"></span>
		</span>
	</div>

	<span class="list_notification" data-bind="visible: isEmptyList() && preLoadingList()" id="selenium_contacts_loading_info">
		<span class="description" data-bind="i18n: {'key': '%MODULENAME%/INFO_LOADING_CONTACT_LIST'}"></span>
	</span>

	<span class="list_notification" data-bind="visible: isSearch() && !isEmptyList()">
		<!--<span class="link" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_CLEAR_SEARCH'}, click: onClearSearchClick"></span>-->
		<span class="description" data-bind="text: searchText"></span>
	</span>
	
	<div class="list-block media-list contact_list">
		<ul class="items_sub_list contact_sub_list" data-bind="foreach: collection">
			<li class="item" data-bind="css: {
					'checked': checked,
					'selected': selected,
					'deleted': deleted,
					'noname': !Name(),
					'noemail': !Email()}">
				
				<div class="item-content">
					<label class="label-checkbox custom_checkbox">
						<input type="checkbox" data-bind="checked: checked, event: { change: function (item, event) {item.checked(!!event.target.checked); } }">
						<div class="item-media"><i class="icon icon-form-checkbox"></i></div>
					</label>
					
					<div class="item-inner">
						<div class="item-title-row">
							<div class="item-title">
								<span class="group" data-bind="visible: $parent.selectedStorage() === 'all' || $parent.selectedStorage() === 'group', css: sStorage"></span>
								<span class="me" data-bind="visible: ItsMe(), i18n: {'key': '%MODULENAME%/LABEL_ITS_ME'}"></span>

								<span class="name" data-bind="text: Name(), visible: !!Name()"></span>
								<span class="name" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NO_NAME'}, visible: Name() === ''"></span>
							</div>
						</div>
						
						<div class="item-subtitle">
							<span data-bind="text: Email(), visible: !!Email()"></span>
							<span data-bind="i18n: {'key': '%MODULENAME%/LABEL_NO_EMAIL'}, visible: Email() === ''"></span>
						</div>
					</div>
				</div>
			</li>
		</ul>
	</div>
</div>
	
	
<div class="contact_list_scroll scroll-inner">
	<div class="items_list contact_list">
		

		<div class="items_sub_list contact_sub_list" data-bind="foreach: collection, draggablePlace: dragAndDropHelper">
			<div class="item dragHandle nosubject" data-bind="css: {'checked': checked, 'selected': selected, 'deleted': deleted, 'noname': !Name(), 'noemail': !Email()}">
				<div class="item_content">
					<span class="controls">
						<span class="custom_checkbox" data-bind="click: function () { checked(!checked()); }, css: {'checked': checked()}">
							<span class="icon"></span>
						</span>
					</span>
					<span class="data fadeout">
						<span class="group" data-bind="visible: $parent.selectedStorage() === 'all' || $parent.selectedStorage() === 'group', css: sStorage"></span>
						<span class="me" data-bind="visible: ItsMe(), i18n: {'key': '%MODULENAME%/LABEL_ITS_ME'}"></span>
						<span class="name" data-bind="text: Name(), visible: !!Name()"></span>
						<span class="name" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NO_NAME'}, visible: Name() === ''"></span>
						<span class="email" data-bind="text: Email(), visible: !!Email()"></span>
						<span class="email" data-bind="i18n: {'key': '%MODULENAME%/LABEL_NO_EMAIL'}, visible: Email() === ''"></span>
					</span>
					<div class="separator"></div>
				</div>
			</div>
		</div>
		<div class="uploader_mask" data-bind="initDom: uploaderArea, css: {'active': dragActive}, visible: isImportAllowed">
			<div class="inner"></div>
		</div>
	</div>
</div>
