<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>{{.Strings.Signup.title}}</title>
		<link rel="stylesheet" href="/static/style/style.css" />
		<link rel="icon" type="image/svg+xml" href="/static/img/logo.svg">
		<link rel="apple-touch-icon" type="image/svg+xml" href="/static/img/logo.svg">
	</head>
	<body class="flex flex-column height-all">
		<header class="w12 padding-bottom-_25 flex flex-row flex-justify-space flex-align-centre flex-content">
			<a href="/" class="decoration-none">
				<h1 class="inline valign-mid text sans margin-lr-1">a·muse</h1>
			</a>
		</header>
		<main class="margin-lr-1 flex-fill">
			<div class="flex flex-column height-fill flex-centre">
				<div class="w12 flex flex-centre border-box left">
					<div>
						<div class="sans italic centre">{{.Strings.Signup.swear}}</div>
						<hr/>
						{{if .State.Error}}
						<div class="sans bg-error centre bold margin-tb-1 padding-tb-1">Error: {{index .Strings.Signup .State.Error.Err.Error}}</div>
						{{ end }}
						<form action="/signup" method="POST" class="clear-float">
							<label for="username" class="sans block font-1 margin-top-1">{{.Strings.Signup.username}}</label>
							<input autofocus type="text" required id="username" name="username" value="{{.Data.Username}}" class="block bg-none border-none border-bottom text font-1_5" />
							<label for="password" class="sans block font-1 margin-top-1">{{.Strings.Signup.password}}</label>
							<input type="password" required id="password" name="password" class="block bg-none border-none border-bottom text font-1_5" />
							<label for="password2" class="sans block font-1 margin-top-1">{{.Strings.Signup.confirm_pass}}</label>
							<input type="password" required id="password2" name="password2" class="block bg-none border-none border-bottom text font-1_5" />
							<div class="margin-tb-2 border-_5 border-grey padding-tb-_5 padding-lr-_25 border-solid">
								<label for="sfa-enabled" class="sans font-1 margin-top-1">{{.Strings.Signup.enable_sfa}} <span title="{{.Strings.Signup.use_totp_app}}" class="material-icon">&#xe887</span></label>
								<input type="checkbox" id="sfa-enabled" class="" name="sfaEnabled" value="true" {{if .Data.SfaEnabled}}checked{{end}}/>
								<div class="" id="sfa-box">
									<input type="hidden" name="sfaSecret" class="margin-lr-_5 margin-tb-_5 text bg-none border-none" value="{{.Data.Secret}}" />
									<div class="margin-tb-_5">
										<img src="{{.Data.Qr}}" class="block margin-auto"/>
									</div>
									<span class="sans text-unimportant">{{.Data.Secret}}</span>
									<label for="sfa" class="sans block font-1 margin-top-1">{{.Strings.Signup.confirm_sfa}}</label>
									<input type="text" pattern="[0-9 ]*" inputmode="numeric" autocomplete="off" id="sfa" name="sfa" class="block bg-none border-none border-bottom text font-1_5" />
								</div>
							</div>
							<input type="submit" class="margin-tb-1 right-float bg-accent border-text padding-lr-_5 padding-tb-_25 cursor-hand no-outline" value="{{.Strings.Signup.sign_up}}"/>
						</form>
						<p class="sans font-_875">{{.Strings.Signup.already_have_account}} <a href="/login">{{.Strings.Signup.log_in}}</a></p>
					</div>
				</div>
			</div>
		</main>
	</body>
</html>
