<div class="panel_top">
	<label class="custom_checkbox" data-test-id="contacts-select-all" data-bind="css: {'checked': checkAll, 'incomplete': checkAllIncomplite}">
		<span class="icon"></span>
		<input type="checkbox" data-bind="checked: checkAll" />
	</label>
	<span class="search_block" data-test-id="contacts-search">
		<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-test-id="contacts-search-input" data-bind="valueUpdate: 'afterkeydown', value: searchInput, onEnter: searchSubmitCommand, hasfocus: isSearchFocused" />
		</span>
	</span>
</div>
<div class="panel_center unselectable" data-bind="customScrollbar: {'scrollToTopTrigger': listChanged, x: false}">
	<div class="contact_list_scroll scroll-inner">
		<div class="items_list contact_list" data-test-id="contacts-list">
			<div data-bind="visible: isEmptyList() && !preLoadingList()">
				<span class="list_notification" data-test-id="contacts-empty" 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="items_sub_list contact_sub_list" data-bind="foreach: collection, 
				 draggablePlace: dragAndDropHelper">
				<div class="item nosubject" data-test-id="contacts-item" data-bind="css: {'checked': checked, 'selected': selected, 
							'deleted': deleted, 'noname': !Name(), 'noemail': !Email(), 'dragHandle': true}">
					<div class="item_content">
						<span class="controls">
							<!--<label class="custom_checkbox" data-bind="css: {'checked': checked}">
								<span class="icon"></span>
								<input type="checkbox" data-bind="checked: checked" />
							</label>-->
							<span class="custom_checkbox" data-test-id="contacts-item-checkbox" data-bind="click: function () { checked(!checked()); }, css: {'checked': checked()}">
								<span class="icon" data-bind="attr: { 'data-initials': $parent.getInitials($data) }"></span>
							</span>
						</span>
						<span class="data fadeout">
							<span class="group" data-bind="visible: $parent.selectedStorage() === 'all' || $parent.selectedStorage() === 'group', css: {'team': bTeam, 'personal': !bTeam}"></span>
							<span class="key" data-bind="visible: isOpenPgpEnabled && HasPgpPublicKey()"></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>
</div>
<div class="panel_bottom unselectable" data-bind="visible: oPageSwitcher.pages().length > 0, template: {name: oPageSwitcher.ViewTemplate, data: oPageSwitcher}"></div>
