<span class="search_block">
	<span class="input" data-bind="css: {'focus': isFocused, 'search_block_expand': bAdvancedSearch}">
		<span class="icon search"></span>
		<input class="field hide" spellcheck="false" type="text" data-bind="value: searchInput" />
		<div class="field" contenteditable="true" spellcheck="false" 
			 data-bind="highlighter: {valueObserver: searchInput, highlighterValueObserver: searchSpan, highlightTrigger: highlightTrigger}, 
						onEnter: onSearchClick, hasfocus: isFocused" ></div>
		<div class="fields extended">
			<span class="search_fieldset">
				<span class="section">
					<span class="row text" data-bind="css: {'focused': searchFromFocus(), 'filled': searchInputFrom().length > 0}">
						<label for="search_from" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_FROM'}"></label>
						<input id="search_from" class="value input" spellcheck="false"  type="text" 
							   data-bind="hasfocus: searchFromFocus, value: searchInputFrom, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
					</span>
					<span class="row text" data-bind="css: {'focused': searchSubjectFocus(), 'filled': searchInputSubject().length > 0}">
						<label for="search_subject" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SUBJECT'}"></label>
						<input id="search_subject" class="value input" spellcheck="false"  type="text" 
							   data-bind="hasfocus: searchSubjectFocus, value: searchInputSubject, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
					</span>
					<span class="row text">
						<span class="row date since" data-bind="css: {'focused': searchDateStartFocus(), 'filled': searchDateStart().length > 0}">
							<label for="search_date_start" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SINCE'}"></label>
							<input id="search_date_start" class="date input" spellcheck="false" type="text" 
								   data-bind="initDom: searchDateStartDom, textInput: searchDateStart, hasfocus: searchDateStartFocus, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
						</span>
					</span>
				</span>
				<span class="section">
					<span class="row text" data-bind="css: {'focused': searchToFocus(), 'filled': searchInputTo().length > 0}">
						<label for="search_to" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TO'}"></label>
						<input id="search_to" class="value input" spellcheck="false"  type="text" 
							   data-bind="hasfocus: searchToFocus, value: searchInputTo, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
					</span>
					<span class="row text" data-bind="css: {'focused': searchTextFocus(), 'filled': searchInputText().length > 0}">
						<label for="search_text" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TEXT'}"></label>
						<input id="search_text" class="value input" spellcheck="false"  type="text" 
							   data-bind="hasfocus: searchTextFocus, value: searchInputText, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
					</span>
					<span class="row text">
						<span class="row date till" data-bind="css: {'focused': searchDateEndFocus(), 'filled': searchDateEnd().length > 0}">
							<label for="search_date_end" class="label placeholder" data-bind="i18n: {'key': '%MODULENAME%/LABEL_TILL'}"></label>
							<input id="search_date_end" class="date input" spellcheck="false" type="text" 
								   data-bind="initDom: searchDateEndDom, textInput: searchDateEnd, hasfocus: searchDateEndFocus, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
						</span>
					</span>
				</span>
				<span class="section attachments">
					<span class="row attachments" data-bind="css: {'focused': searchAttachmentsFocus(), 'filled': searchAttachments().length > 0}">
						<label class="custom_checkbox" data-bind="css: {'checked': searchAttachmentsCheckbox}">
							<span class="icon"></span>
							<input id="attachments" type="checkbox" data-bind="checked: searchAttachmentsCheckbox">
						</label>
						<span class="attachment_name">
							<label for="search_attachments" style="cursor: pointer" class="label placeholder" 
								   data-bind="text: attachmentsPlaceholder, click: function() { searchAttachmentsCheckbox(!searchAttachmentsCheckbox()); }"></label>
							<input id="search_attachments" disabled class="value input" spellcheck="false" type="text" 
								   data-bind="hasfocus: searchAttachmentsFocus, value: searchAttachments, valueUpdate: 'afterkeydown', onEnter: onSearchClick" />
						</span>
					</span>
				</span>
				<div class="buttons">
					<div class="folders_search" data-bind="css: {'folders_search_expand': bAdvancedSearch}">
						<span class="folders_search_label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SEARCH_IN'}"></span>
						<span class="folders_search_select" data-bind="dropdown: {}, customTooltip: 'MAILWEBCLIENT/LABEL_SEARCH_IN'">
							<span class="link control" data-bind="text: selectedSearchFoldersModeText"></span>
							<span class="dropdown">
								<span class="dropdown_helper">
									<span class="dropdown_arrow"><span></span></span>
									<span class="dropdown_content">
										<span class="item" data-bind="
												i18n: {'key': '%MODULENAME%/LABEL_SEARCH_CURRENT_FOLDER'},
												css: {'selected': selectedSearchFoldersMode() === Enums.SearchFoldersMode.Current},
												click: function () { selectFolderSearch(Enums.SearchFoldersMode.Current); }"></span>
										<span class="item" data-bind="
												i18n: {'key': '%MODULENAME%/LABEL_SEARCH_CURRENT_FOLDER_AND_SUBFOLDERS'},
												css: {'selected': selectedSearchFoldersMode() === Enums.SearchFoldersMode.Sub},
												click: function () { selectFolderSearch(Enums.SearchFoldersMode.Sub); }"></span>
										<span class="item" data-bind="
												i18n: {'key': '%MODULENAME%/LABEL_SEARCH_ALL_FOLDERS'},
												css: {'selected': selectedSearchFoldersMode() === Enums.SearchFoldersMode.All},
												click: function () { selectFolderSearch(Enums.SearchFoldersMode.All); }"></span>
									</span>
								</span>
							</span>
						</span>
					</div>
					<div style="flex-grow: 1;"></div>
					<span class="button" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SEARCH'}, click: onSearchClick"></span>
				</div>
			</span>
		</div>
	</span>
	
	<span class="control" data-bind="visible: allowAdvancedSearch">
		<span class="icon" data-bind="click: onAdvancedSearchClick, css: {'search_block_expand': bAdvancedSearch()}, customTooltip: '%MODULENAME%/ACTION_OPEN_ADVANCED_SEARCH'"></span>
	</span>
</span>
