<span class="search_block">
	<span class="input" data-bind="css: {'focus': isFocused, '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="section buttons">
					<span class="button" data-bind="i18n: {'key': 'COREWEBCLIENT/ACTION_SEARCH'}, click: onSearchClick"></span>
				</div>
			</span>
		</div>
	</span>
	<span class="control">
		<span class="icon" data-bind="click: onAdvancedSearchClick, css: {'expand': bAdvancedSearch()}, customTooltip: '%MODULENAME%/ACTION_OPEN_ADVANCED_SEARCH'"></span>
	</span>
</span>