{{ template "base.html" . }}

{{ define "content" }}
	<div class="content-block">
		<form id="password_reset_form" method="post">
			<input type="hidden" name="token" value="{{ .Token }}" />
			{{/*NOTE: The username field isn't `type="hidden"` because this way browser will offer to save the username along with the password */}}
			<input style="position:absolute; visibility:hidden;" type="text" name="username" value="{{ .Username }}" readonly />

			<h1>Hi, {{ .Username }}!</h1>
			<p class="mb3 b">Please enter a new password</p>
			<p class="mb2">
				<label class="db b" for="password">New Password</label>
				<input class="db" type="password" name="password" minlength="8" required />
			</p>

			<p class="mb2">
				<label class="db b" for="password2">New password confirmation</label>
				<input class="db" type="password" name="password2" minlength="8" required />
				<span class="note db">Enter the same password as before, for verification.</span>
			</p>

			<input class="db mt3" type="submit" value="Reset your password" />
		</form>
	</div>
	<script>
		let form = document.querySelector("#password_reset_form")
		let password1 = form.querySelector("input[name=password]")
		let password2 = form.querySelector("input[name=password2]")
		password1.addEventListener("input", validatePasswordConfirmation);
		password2.addEventListener("input", validatePasswordConfirmation);

		function validatePasswordConfirmation(ev) {
			if (password1.value != password2.value) {
				password2.setCustomValidity("Password doesn't match");
			} else {
				password2.setCustomValidity("");
			}
		}
	</script>
{{ end }}
