<div class="mask" data-bind="click: onCancelClick"></div>
<div class="popup_panel">
	<span class="close" data-bind="click: onCancelClick"></span>
	<span class="title" data-i18n="SETTINGS/ACCOUNTS_ADD_NEW_FETCHER_TITLE" data-bind="i18n: 'text'"></span>

	<div class="fields">
		<div class="fieldset">
			<div class="row incoming">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_FETCHER_POP3_SERVER" data-bind="i18n: 'text'"></span>
				<input class="value input" spellcheck="false" type="text" maxlength="65" data-bind="value: incomingMailServer, onEnter: onSaveClick, hasFocus: serverIsSelected"/>

				<span class="label required" style="width: auto; margin-left: 10px;" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_PORT" data-bind="i18n: 'text'"></span>
				<input class="value input port" spellcheck="false" type="text" maxlength="5" data-bind="value: incomingMailPort, onEnter: onSaveClick"/>
			</div>

			<div class="row login">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_FETCHER_LOGIN" data-bind="i18n: 'text'"></span>
				<input class="value input" spellcheck="false" type="text" maxlength="255" data-bind="value: incomingMailLogin, onEnter: onSaveClick, hasFocus: loginIsSelected"/>
			</div>
			<div class="row password">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_FETCHER_PASSWORD" data-bind="i18n: 'text'"></span>
				<input class="value input" spellcheck="false" type="password" maxlength="255" data-bind="value: incomingMailPassword, onEnter: onSaveClick, hasFocus: passwordIsSelected"/>
			</div>

			<div class="row hint">
				<span class="" data-i18n="SETTINGS/ACCOUNT_FETCHER_POP3_STORE_TARGET_CLARIFICATION" data-bind="i18n: 'text'"></span>
			</div>

			<div class="row folder">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_FETCHER_POP3_STORE_TARGET_FOLDER" data-bind="i18n: 'text'"></span>
				<span class="" data-i18n="SETTINGS/ACCOUNT_FETCHER_WAITING_FOLDER_LIST" data-bind="i18n: 'text', visible: options().length === 0"></span>
				<select class="value input" data-bind="visible: options().length > 1,
					value: folder, options: options, optionsText: 'translatedDisplayName', optionsValue: 'fullName', 
					optionsAfterRender: defaultOptionsAfterRender, valueUpdate: ['blur', 'afterkeydown']
				"></select>

				<span class="link" data-i18n="SETTINGS/ACCOUNT_FOLDERS_BUTTON_ADD_NEW_FOLDER" data-bind="i18n: 'text', command: addNewFolderCommand"></span>
			</div>

			<div class="row">
				<div>
					<label class="custom_checkbox" data-bind="css: {'checked': leaveMessagesOnServer}">
						<span class="icon"></span>
						<input type="checkbox" id="popup_leave_essages_on_server" data-bind="checked: leaveMessagesOnServer" />
					</label>
					<label for="popup_leave_essages_on_server" data-i18n="SETTINGS/ACCOUNT_FETCHER_POP3_LAVE_MESSAGES_ON_SERVER" data-bind="i18n: 'text'"></label>
				</div>
			</div>
			
		</div>

		<div class="buttons">
			<span class="button save" data-i18n="SETTINGS/BUTTON_SAVE" data-bind="i18n: 'text', click: onSaveClick, visible: !loading()"></span>
			<span class="button save" data-i18n="SETTINGS/BUTTON_SAVING" data-bind="i18n: 'text', visible: loading()"></span>
			<span class="button cancel secondary" data-i18n="SETTINGS/BUTTON_CANCEL" data-bind="i18n: 'text', click: onCancelClick"></span>
		</div>
	</div>
</div>
<span class="helper"></span>