<div class="popups">
	<div class="modal hide b-domain-content g-ui-user-select-none"
		data-bind="modal: modalVisibility, css: {'domain-edit': edit, 'domain-second-page': 'main' !== page()}">
		<div class="modal-header">
			<button type="button" class="close" data-bind="command: cancelCommand">&times;</button>
			<h3 data-bind="text: headerText"></h3>
		</div>
		<div class="modal-body">
			<form class="form-horizontal domain-form" action="#/" onsubmit="return false;">
				<div class="row" data-bind="visible: !edit()" style="margin-bottom: 20px;">
					<div class="span10">
						Name <span style="color: #aaa">(wildcard supported)</span>
						<br />
						<input type="text" class="span4" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
							data-bind="textInput: name, hasfocus: name.focused" />

						<span class="error-desc" data-bind="text: savingError"></span>
					</div>
				</div>
				<div class="row">
					<div class="span5" data-bind="css: { 'testing-done': testingDone, 'testing-error': testingImapError }">
						<div class="legend imap-header">
							<span data-placement="bottom" data-bind="tooltipForTest: testingImapErrorDesc">
								<span data-bind="text: sieveSettings() ? 'SIEVE' : 'IMAP'">IMAP</span>
							</span>
						</div>
						<div data-bind="visible: !sieveSettings()">
							<div class="row">
								<div class="span3">
									Server
									<br />
									<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="textInput: imapServer, hasfocus: imapServerFocus" />
								</div>
								<div class="span1">
									Port
									<br />
									<input type="text" class="span1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="textInput: imapPort" />
								</div>
							</div>
							<br />
							<div class="row">
								<div class="span4">
									Secure
									<br />
									<select class="span2" data-bind="value: imapSecure">
										<option value="0">None</option>
										<option value="1">SSL/TLS</option>
										<option value="2">STARTTLS</option>
									</select>
								</div>
							</div>
							<br />
							<div class="row">
								<div class="span5">
									<div data-bind="component: {
										name: 'Checkbox',
										params: {
											label: 'Use short login',
											value: imapShortLogin,
											inline: true
										}
									}"></div>
									&nbsp;&nbsp;
									<span style="color: #aaa">(user@domain.com &rarr; user)</span>
								</div>
							</div>
							<br />
							<br />
							<div class="row" data-bind="visible: allowSieve">
								<div class="span5">
									<span data-bind="command: sieveCommand">
										<i class="icon-filter"></i>
										&nbsp;
										<a href="#" class="g-ui-link">Sieve configuration</a>
									</span>
								</div>
							</div>
						</div>
						<div data-bind="visible: sieveSettings">
							<div class="row">
								<div class="span5">
									<div data-bind="component: {
										name: 'Checkbox',
										params: {
											label: 'use Sieve for this domain',
											value: useSieve
										}
									}"></div>
								</div>
							</div>
							<div data-bind="visible: useSieve">
								<br />
								<div class="row">
									<div class="span3">
										Server
										<br />
										<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
											data-bind="textInput: sieveServer, hasfocus: sieveServerFocus" />
									</div>
									<div class="span1">
										Port
										<br />
										<input type="text" class="span1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
											data-bind="textInput: sievePort" />
									</div>
								</div>
								<br />
								<div class="row">
									<div class="span4">
										Secure
										<br />
										<select class="span2" data-bind="value: sieveSecure">
											<option value="0">None</option>
											<option value="1">SSL/TLS</option>
											<option value="2">STARTTLS</option>
										</select>
									</div>
								</div>
							</div>
							<br />
							<div class="row">
								<div class="span5">
									<span data-bind="command: sieveCommand">
										<i class="icon-left"></i>
										&nbsp;
										<a href="#" class="g-ui-link">Back to IMAP settings</a>
									</span>
								</div>
							</div>
						</div>
					</div>
					<div class="span5" data-bind="css: { 'testing-done': testingDone, 'testing-error': testingSmtpError }">
						<div class="legend smtp-header">
							<span data-placement="bottom" data-bind="tooltipForTest: testingSmtpErrorDesc">
								SMTP
							</span>
						</div>
						<div data-bind="visible: !smtpPhpMail()">
							<div class="row">
								<div class="span3">
									Server
									<br />
									<input type="text" class="span3" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="textInput: smtpServer, hasfocus: smtpServerFocus" />
								</div>
								<div class="span1">
									Port
									<br />
									<input type="text" class="span1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"
										data-bind="textInput: smtpPort" />
								</div>
							</div>
							<br />
							<div class="row">
								<div class="span4">
									Secure
									<br />
									<select class="span2" data-bind="value: smtpSecure">
										<option value="0">None</option>
										<option value="1">SSL/TLS</option>
										<option value="2">STARTTLS</option>
									</select>
								</div>
							</div>
							<br />
							<div class="row">
								<div class="span5">
									<div data-bind="component: {
										name: 'Checkbox',
										params: {
											label: 'Use short login',
											value: smtpShortLogin,
											inline: true
										}
									}"></div>
									&nbsp;&nbsp;
									<span style="color: #aaa">(user@domain.com &rarr; user)</span>
									<br />
									<div data-bind="component: {
										name: 'Checkbox',
										params: {
											label: 'Use authentication',
											value: smtpAuth
										}
									}"></div>
								</div>
							</div>
							<br />
						</div>
						<div class="row">
							<div class="span5">
								<div data-bind="component: {
									name: 'Checkbox',
									params: {
										label: 'Use php mail() function',
										value: smtpPhpMail,
										inline: true
									}
								}"></div>
								&nbsp;&nbsp;
								<span style="color: red">(beta)</span>
							</div>
						</div>
					</div>
					<div class="span10" data-bind="visible: 'white-list' === page()">
						<div class="legend white-list-header">
							White List
						</div>
						<div class="alert alert-block span6 alert-null-left-margin" style="width: 562px;">
							List of domain users webmail is allowed to access.
							Use a space as delimiter.
						</div>
						<textarea class="input-xxlarge" style="width: 600px" rows="8" data-bind="value: whiteList" tabindex="-1"></textarea>
					</div>
				</div>
			</form>
		</div>
		<div class="modal-footer">
			<a class="btn button-test-connection pull-left" data-bind="visible: 'main' === page(), command: testConnectionCommand, css: {
			   'btn-success': testingDone() && !testingImapError() && !testingSmtpError(),
			   'btn-danger': testingDone() && (testingImapError() || testingSmtpError()) }">
				<i data-bind="css: {'icon-info': !testing(), 'icon-spinner animated': testing(), 'icon-white': testingDone()}"></i>
				&nbsp;&nbsp;
				Test
			</a>
			<a class="btn button-white-list pull-left" data-bind="command: whiteListCommand, visible: 'main' === page()">
				<i class="icon-users"></i>
				&nbsp;&nbsp;
				White List
			</a>
			<a class="btn button-white-list pull-left" data-bind="command: backCommand, visible: 'main' !== page()">
				<i class="icon-left"></i>
				&nbsp;&nbsp;
				Back
			</a>
			<a class="btn buttonClose" data-bind="command: cancelCommand">
				<i class="icon-remove"></i>
				&nbsp;&nbsp;
				Close
			</a>
			<a class="btn buttonClear" data-bind="command: createOrAddCommand">
				<i data-bind="css: edit() ? 'icon-ok' : 'icon-plus', visible: !saving()"></i>
				<i class="icon-spinner animated" data-bind="visible: saving"></i>
				&nbsp;&nbsp;
				<span data-bind="text: edit() ? 'Update' : 'Add'"></span>
			</a>
		</div>
	</div>
</div>