{{ template "base.html" . }}

{{ define "content" }}
<div class="flex ph3 ph0-ns justify-center">
	<div class="w-100 w-auto-ns pv3">
		<h1 class="tc">Log in</h1>
		<form method="POST" class="flex flex-column">
			<input type="hidden" name="redirect" value="{{ .RedirectUrl }}" />
			
			<div>
				<label class="db b" for="username">Username</label>
				<input class="db w-100 w5-ns"
					name="username"
					type="text"
					minlength="3" maxlength="30"
					required
				/>
			</div>

			<div class="mt2">
				<div class="flex justify-between">
					<label class="db b" for="password">Password</label>
					<a href="{{ .ForgotPasswordUrl }}" tabindex="-1">Forgot your password?</a>
				</div>
				<input class="db w-100 w5-ns"
					name="password"
					type="password"
					minlength="8"
					required
				/>
			</div>
			
			<div class="mt3">
				<input class="w-100" type="submit" value="Log in" />
			</div>

			<div class="tc pa3">
				Need an account? <a href="{{ .RegisterUrl }}">Sign up.</a>
			</div>

			<div class="mt3 tc">
				<div class="b mb1">Third-party login</div>
				<div class="flex flex-column g1">
					<a href="{{ .LoginWithDiscordUrl }}" class="db br2 overflow-hidden flex" title="Log in with Discord">
						<img
							src="{{ static "discord-login.svg" }}"
							alt="Log in with Discord"
						>
					</a>
				</div>
			</div>
		</form>
	</div>
</div>
{{ end }}