<form method="post">
	<div class="hidden-visually">
		<!-- Hack for Safari and Chromium/Chrome which ignore autocomplete="off" -->
		<input type="text" id="fake_user" name="fake_user"
		       autocomplete="off" tabindex="-1">
		<input type="password" id="fake_password" name="fake_password"
		       autocomplete="off" tabindex="-1">
	</div>
	<fieldset>
		<div id="emptycontent">
			<div class="icon-mail"></div>
			<h2>{{ t 'Connect your mail account' }}</h2>
		</div>
		<p class="grouptop">
			<input type="text"
			       name="account-name"
			       placeholder="{{ t 'Name' }}"
			       value=""
			       autofocus />
		</p>
		<p class="groupmiddle">
			<input type="email"
			       name="mail-address"
			       placeholder="{{ t 'Mail Address' }}"
			       value=""
			       required />
		</p>
		<p class="groupbottom">
			<input type="password"
			       name="mail-password"
			       placeholder="{{ t 'Password' }}"
			       value=""
			       required />
		</p>

		<a class="toggle-manual-mode icon-caret-dark">{{ t 'Manual configuration' }}</a>

		<div class="manual-inputs">
			<p class="grouptop">
				<input type="text"
				       name="imap-host"
				       placeholder="{{ t 'IMAP Host' }}"
				       value="" />
			</p>
			<p class="groupmiddle" id="setup-imap-ssl">
				<select id="setup-imap-ssl-mode"
					name="imap-sslmode"
					title="{{ t 'IMAP security' }}">
					<option value="none">{{ t 'None' }}</option>
					<option value="ssl">{{ t 'SSL/TLS' }}</option>
					<option value="tls">{{ t 'STARTTLS' }}</option>
				</select>
			</p>
			<p class="groupmiddle">
				<input type="number"
				       name="imap-port"
				       placeholder="{{ t 'IMAP Port' }}"
				       value="143" />
			</p>
			<p class="groupmiddle">
				<input type="text"
				       name="imap-user"
				       placeholder="{{ t 'IMAP User' }}"
				       value="" />
			</p>
			<p class="groupbottom">
				<input type="password"
				       name="imap-password"
				       placeholder="{{ t 'IMAP Password' }}"
				       value=""
				       required />
			</p>
			<p class="grouptop">
				<input type="text"
				       name="smtp-host"
				       placeholder="{{ t 'SMTP Host' }}"
				       value="" />
			</p>
			<p class="groupmiddle" id="setup-smtp-ssl">
				<select id="setup-smtp-ssl-mode"
					name="mail-smtp-sslmode"
					title="{{ t 'SMTP security' }}">
					<option value="none">{{ t 'None' }}</option>
					<option value="ssl">{{ t 'SSL/TLS' }}</option>
					<option value="tls">{{ t 'STARTTLS' }}</option>
				</select>
			</p>
			<p class="groupmiddle">
				<input type="number"
				       name="smtp-port"
				       placeholder="{{ t 'SMTP Port' }}"
				       value="587" />
			</p>
			<p class="groupmiddle">
				<input type="text"
				       name="smtp-user"
				       placeholder="{{ t 'SMTP User' }}"
				       value="" />
			</p>
			<p class="groupbottom">
				<input type="password"
				       name="smtp-password"
				       placeholder="{{ t 'SMTP Password' }}" value=""
				       required />
			</p>
		</div>

		<div id="connect-loading" class="icon-loading"></div>
		<input type="submit"
		       class="primary"
		       value="{{ t 'Connect' }}"/>
	</fieldset>
</form>