{{ define "login" }}
{{ template "head" "Log in" }}
{{ template "header" false }}
<main class="max-w-6xl mx-auto px-6 py-8">
  <div class="max-w-sm mx-auto mt-16">
    <h1 class="text-2xl font-semibold mb-4">Log in</h1>
    {{ if .Error }}
      <div class="rounded bg-red-900/40 border border-red-800 text-red-200 px-3 py-2 mb-3 text-sm">{{ .Error }}</div>
    {{ end }}
    <form method="post" action="/login" class="space-y-3">
      <input type="hidden" name="next" value="{{ .Next }}">
      <label class="block">
        <span class="block text-sm text-slate-400 mb-1">Password</span>
        <input type="password" name="password" required autofocus autocomplete="current-password"
               class="w-full bg-slate-900 border border-slate-800 rounded px-3 py-2 focus:outline-none focus:border-indigo-500">
      </label>
      <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white rounded px-3 py-2 font-medium">Log in</button>
    </form>
  </div>
</main>
{{ template "footer" }}
{{ end }}