{{template "head" .}}
<main class="flex min-h-screen items-center justify-center bg-neutral-950 px-5 text-neutral-950">
  <form method="post" action="/admin/login" class="w-full max-w-sm bg-white p-8 shadow-2xl">
    <h1 class="mb-6 text-3xl font-semibold">Admin</h1>
    {{if .Error}}<p class="mb-4 border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-900">{{.Error}}</p>{{end}}
    <label class="mb-4 block text-sm">
      <span class="mb-2 block text-neutral-500">Username</span>
      <input name="username" required autofocus class="w-full border border-neutral-300 px-4 py-3 outline-none focus:border-neutral-950">
    </label>
    <label class="mb-6 block text-sm">
      <span class="mb-2 block text-neutral-500">Password</span>
      <input name="password" type="password" required class="w-full border border-neutral-300 px-4 py-3 outline-none focus:border-neutral-950">
    </label>
    <button class="w-full bg-neutral-950 px-5 py-3 text-sm font-medium uppercase tracking-[0.18em] text-white hover:bg-neutral-700">Log in</button>
  </form>
</main>
</body>
</html>