{{ define "title" }}dodo: create account{{ end }}
{{ define "main" }}
<div class="terminal">
	<div class="logo" aria-hidden="true">
		<span>do</span><span>do:</span>
	</div>
	<h1>Create account</h1>
	<form id="register-form" action="{{ .FormAction }}" method="POST">
		{{ if or .GeneralError .UsernameErrors .PasswordErrors }}
		<div role="alert">
			{{ if .GeneralError }}<p>{{ .GeneralError }}</p>{{ end }}
			{{ if or .UsernameErrors .PasswordErrors }}
			<p>Please correct the following errors:</p>
			<ul>
				{{ range .UsernameErrors }}<li>{{ .Message }}</li>{{ end }}
				{{ range .PasswordErrors }}<li>{{ .Message }}</li>{{ end }}
			</ul>
			{{ end }}
		</div>
		{{ end }}

		<label for="register-username">Username</label>
		<input id="register-username" type="text" name="username" value="{{ .Username }}" autocomplete="username" autocapitalize="none" spellcheck="false" required{{ if .UsernameErrors }} aria-invalid="true" aria-describedby="{{ range $index, $_ := .UsernameErrors }}{{ if $index }} {{ end }}register-username-error-{{ $index }}{{ end }}"{{ end }} />
		{{ range $index, $error := .UsernameErrors }}
		<p id="register-username-error-{{ $index }}" class="error-message">{{ $error.Message }}</p>
		{{ end }}

		<label for="register-password">Password</label>
		<input id="register-password" type="password" name="password" autocomplete="new-password" required aria-describedby="register-password-policy register-password-symbols{{ range $index, $_ := .PasswordErrors }} register-password-error-{{ $index }}{{ end }}"{{ if .PasswordErrors }} aria-invalid="true"{{ end }} />
		<p id="register-password-policy">Use at least 20 bytes, including an uppercase letter, lowercase letter, number, and an ASCII symbol or space.</p>
		<p id="register-password-symbols">Accepted ASCII symbols: <code>!&quot;#$%&amp;&#39;()*+,-./:;&lt;=&gt;?@[\]^_{|}~</code>. ASCII space is also accepted.</p>
		{{ range $index, $error := .PasswordErrors }}
		<p id="register-password-error-{{ $index }}" class="error-message">{{ $error.Message }}</p>
		{{ end }}

		<input id="register-csrf-token" type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
		<button id="register-submit" type="submit">Create account</button>
	</form>
	<nav aria-label="Sign in">
		<a href="/login">Sign in</a>
	</nav>
</div>
{{ end }}