<header>
	<a href="#" class="close" data-bind="click: close">×</a>
	<h3 data-i18n="SEARCH/TITLE_ADV"></h3>
</header>
<form id="advancedsearchform" class="modal-body form-horizontal" action="#/" autocomplete="off" data-bind="submit: submitForm">
	<div class="row">
		<div class="span4">
			<div class="control-group">
				<label data-i18n="GLOBAL/FROM"></label>
				<input type="text" autofocus="" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
					data-bind="value: from">
			</div>
			<div class="control-group">
				<label data-i18n="GLOBAL/TO"></label>
				<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
					data-bind="value: to">
			</div>
			<div class="control-group">
				<label data-i18n="GLOBAL/SUBJECT"></label>
				<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
					data-bind="value: subject">
			</div>
			<div class="control-group">
				<label data-i18n="SEARCH/LABEL_ADV_TEXT"></label>
				<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
					data-bind="value: text">
			</div>
		</div>
		<div class="span4">
			<div class="control-group">
				<label data-i18n="SEARCH/LABEL_ADV_DATE"></label>
				<div data-bind="component: {
					name: 'Select',
					params: {
						options: selectedDates,
						value: selectedDateValue,
						optionsText: 'name',
						optionsValue: 'id'
					}
				}"></div>
			</div>
			<!-- ko if: showMultisearch -->
			<div class="control-group">
				<label data-i18n="SEARCH/LABEL_ADV_SUBFOLDERS"></label>
				<div data-bind="component: {
					name: 'Select',
					params: {
						options: selectedTree,
						value: selectedTreeValue,
						optionsText: 'name',
						optionsValue: 'id'
					}
				}"></div>
			</div>
			<!-- /ko -->
			<div class="control-group">
				<label></label>
				<div>
					<div data-bind="component: {
						name: 'Checkbox',
						params: {
							label: 'SEARCH/LABEL_ADV_UNSEEN',
							value: unseen
						}
					}"></div>
					<div data-bind="component: {
						name: 'Checkbox',
						params: {
							label: 'SEARCH/LABEL_ADV_FLAGGED',
							value: starred
						}
					}"></div>
					<div data-bind="component: {
						name: 'Checkbox',
						params: {
							label: 'SEARCH/LABEL_ADV_HAS_ATTACHMENT',
							value: hasAttachment
						}
					}"></div>
				</div>
			</div>
		</div>
	</div>
</form>
<footer>
	<button form="advancedsearchform" class="btn buttonAdvSearch" data-icon="🔎" data-i18n="GLOBAL/SEARCH"></button>
</footer>
