<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_ACCOUNT_TITLE" data-bind="i18n: 'text', visible: isFirstStep()"></span>
	<span class="title" data-i18n="Add New Account last step" data-bind="i18n: 'text', visible: !isFirstStep()"></span>

	<div class="fields">
		<div class="fieldset">
			<div class="row name" data-bind="visible: isFirstStep()">
				<span class="label" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_YOUR_NAME" data-bind="i18n: 'text'"></span>
				<input class="value input" type="text" maxlength="65" data-bind="value: friendlyName, hasfocus: friendlyNameFocus, valueUpdate: 'afterkeydown', onEnter: onSecondSaveClick"/>
			</div>
			<div class="row email" data-bind="visible: isFirstStep()">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_EMAIL" data-bind="i18n: 'text'"></span>
				<input class="value input" type="text" maxlength="65" data-bind="value: email, onEnter: onFirstSaveClick"/>
			</div>
			<div class="row password" data-bind="visible: isFirstStep()">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_PASSWORD" data-bind="i18n: 'text'"></span>
				<input class="value input" type="password" maxlength="255" data-bind="value: incomingMailPassword, onEnter: onFirstSaveClick"/>
			</div>

			<div class="row login" data-bind="visible: !isFirstStep()">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_LOGIN" data-bind="i18n: 'text'"></span>
				<input class="value input" type="text" maxlength="255" data-bind="value: incomingMailLogin, hasfocus: incLoginFocused, onEnter: onSecondSaveClick"/>
			</div>
			<div class="row incoming" data-bind="visible: !isFirstStep()">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_INCOMING_MAIL" data-bind="i18n: 'text'"></span>
				<input class="value input server" type="text" maxlength="255" data-bind="value: incomingMailServer, onEnter: onSecondSaveClick"/>

				<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" type="text" maxlength="5" data-bind="value: incomingMailPort, onEnter: onSecondSaveClick"/>
			</div>
			<div class="row outgoing" data-bind="visible: !isFirstStep()">
				<span class="label required" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_OUTGOING_MAIL" data-bind="i18n: 'text'"></span>
				<input class="value input server" type="text" maxlength="255"  data-bind="value: outgoingMailServer, hasfocus: outServerFocused, onEnter: onSecondSaveClick"/>

				<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" type="text" maxlength="5"  data-bind="value: outgoingMailPort, onEnter: onSecondSaveClick"/>
			</div>

			<div class="row smtp_authentication" data-bind="visible: !isFirstStep()">
				<div>
					<label class="custom_checkbox" data-bind="css: {'checked': useSmtpAuthentication}">
						<span class="icon"></span>
						<input type="checkbox" id="add_new_account_mail_out_auth" data-bind="checked: useSmtpAuthentication" />
					</label>
					<label for="add_new_account_mail_out_auth" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_USE_SMTP_AUTHENTICATION" data-bind="i18n: 'text'"></label>
				</div>	
			</div>
			<!--<div class="row" data-bind="visible: useSmtpAuthentication()">
				<span class="label" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_NEW_PASSWORD" data-bind="i18n: 'text'"></span>
				<input class="value input" type="text" maxlength="255" data-bind="value: outgoingMailLogin"/>
			</div>

			<div class="row" data-bind="visible: useSmtpAuthentication()">
				<span class="label" data-i18n="SETTINGS/ACCOUNT_PROPERTIES_PASSWORD" data-bind="i18n: 'text'"></span>
				<input class="value input" type="password" maxlength="255" />
			</div>-->
		</div>

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