<div class="panel_top">
	<h2 class="settings_heading" data-bind="i18n: {'key': '%MODULENAME%/HEADING_SETTINGS_TAB'}"></h2>
</div>
<div class="panel_center">
	<div class="fields">
		<div class="fieldset">
			<div class="row" data-bind="visible: bAllowChangeLayout">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_LAYOUT'}"></span>
				<select class="value input" data-test-id="settings-mail-layout" data-bind="options: layoutModeValues, value: layoutMode, optionsText: 'text', optionsValue: 'value'"></select>
			</div>
			<div class="row">
				<span class="label" data-bind="i18n: {'key': '%MODULENAME%/LABEL_MESSAGES_PER_PAGE'}"></span>
				<select class="value input" data-bind="options: mailsPerPageValues, value: mailsPerPage"></select>
			</div>
			<div class="row" data-bind="visible: bAllowChangeStarredMessagesSource">
				<span class="label"
					  data-bind="i18n: {'key': '%MODULENAME%/LABEL_STARRED_MESSAGES_SOURCE'}"
				></span>
				<select class="value input"
						data-bind="options: starredMessagesSourceValues,
						value: starredMessagesSource, optionsText: 'text', optionsValue: 'value'"
				></select>
			</div>
			<div class="row">
				<span class="value offset">
					<label class="custom_checkbox" data-bind="css: {'checked': allowAutosaveInDrafts}">
						<span class="icon"></span>
						<input type="checkbox" id="allowAutosaveInDrafts" data-bind="checked: allowAutosaveInDrafts" />
					</label>
					<label for="allowAutosaveInDrafts" data-bind="i18n: {'key': '%MODULENAME%/LABEL_ALLOW_AUTOSAVE'}"></label>
				</span>
			</div>
			<div class="row" data-bind="visible: bAllowShowMessagesCountInFolderList">
				<span class="value offset">
					<label class="custom_checkbox" data-bind="css: {'checked': showMessagesCountInFolderList}">
						<span class="icon"></span>
						<input type="checkbox" id="showMessagesCountInFolderList" data-bind="checked: showMessagesCountInFolderList" />
					</label>
					<label for="showMessagesCountInFolderList" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SHOW_MESSAGES_COUNT_IN_FOLDER_LIST'}"></label>
				</span>
			</div>
			<div class="row" data-bind="visible: bRtl">
				<span class="value offset">
					<label class="custom_checkbox" data-bind="css: {'checked': allowChangeInputDirection}">
						<span class="icon"></span>
						<input type="checkbox" id="allowChangeInputDirection" data-bind="checked: allowChangeInputDirection" />
					</label>
					<label for="allowChangeInputDirection" data-bind="i18n: {'key': '%MODULENAME%/LABEL_SHOW_INPUT_DIRECTION_BUTTONS'}"></label>
				</span>
			</div>
			<div class="hint row" data-bind="visible: bRtl">
				<span class="value offset" data-bind="i18n: {'key': '%MODULENAME%/INFO_SHOW_INPUT_DIRECTION_BUTTONS'}"></span>
			</div>
			
			<div class="row" data-bind="visible: bAllowMailto">
				<span class="value offset">
					<a class="link" href="javascript:void(0);" data-bind="i18n: {'key': '%MODULENAME%/ACTION_REGISTER_MAILTO'}, click: registerMailto"></a>
				</span>
			</div>
			<div class="hint row" data-bind="visible: bAllowMailto">
				<span class="value offset" data-bind="i18n: {'key': '%MODULENAME%/INFO_REGISTER_MAILTO', 'type': 'html'}"></span>
			</div>
		</div>
		<div class="buttons">
			<span class="button" data-test-id="settings-mail-save" data-bind="click: save, visible: !isSaving(), i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE'}"></span>
			<span class="button" data-bind="visible: isSaving(), i18n: {'key': 'COREWEBCLIENT/ACTION_SAVE_IN_PROGRESS'}"></span>
		</div>
	</div>
</div>
