{{ define "title" }}dodo: change password{{ end }}
{{ define "main" }}
<div class="terminal">
	<div class="logo" aria-hidden="true">
		<span>do</span><span>do:</span>
	</div>
	<h1>Change password</h1>
	<p>Signed in as <strong>{{ .Username }}</strong>.</p>
	<form id="change-password-form" action="{{ .FormAction }}" method="POST">
		{{ if or .GeneralError .PasswordErrors }}
		<div role="alert">
			{{ if .GeneralError }}<p>{{ .GeneralError }}</p>{{ end }}
			{{ if .PasswordErrors }}
			<p>Please correct the following errors:</p>
			<ul>
				{{ range .PasswordErrors }}<li>{{ .Message }}</li>{{ end }}
			</ul>
			{{ end }}
		</div>
		{{ end }}

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

		<input id="change-password-csrf-token" type="hidden" name="csrf_token" value="{{ .CSRFToken }}" />
		<button id="change-password-submit" type="submit">Change password</button>
	</form>
	<nav aria-label="Account">
		<a href="/">Back to account</a>
	</nav>
</div>
{{ end }}