<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>{{.Strings.Login.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.Login.alohomora}}</div>
						<hr/>
						{{if .State.Error}}
						<div class="sans bg-error centre bold margin-tb-1 padding-tb-1">{{.Strings.Login.error}}</div>
						{{ end }}
						<form action="/login" method="POST" class="clear-float">
							<label for="username" class="sans block font-1 margin-top-1">{{.Strings.Login.username}}</label>
							<input autofocus type="text" required id="username" name="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.Login.password}}</label>
							<input type="password" required id="password" name="password" class="block bg-none border-none border-bottom text font-1_5" />
							<label for="sfa" class="sans block font-1 margin-top-1">{{.Strings.Login.sfa}} <span title="{{.Strings.Login.sfa_description}}" class="material-icon">&#xe887</span></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" />
							<input type="hidden" value="{{.Data}}" name="target" />
							<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.Login.log_in}}"/>
						</form>
						<p class="sans font-_875">{{.Strings.Login.doesnt_have_account}} <a href="/signup">{{.Strings.Login.sign_up}}</a></p>
					</div>
				</div>
			</div>
		</main>
	</body>
</html>
