{{ define "login" }}
{{ template "head" "Log in" }}
<main class="min-h-screen flex items-center justify-center px-6 py-12">
  <div class="w-full max-w-sm">
    <div class="flex flex-col items-center text-center mb-8">
      <img src="/static/logo.png" alt=""
           class="w-20 h-20 rounded-full ring-1 ring-slate-700 mb-4 shadow-lg shadow-black/40">
      <h1 class="text-3xl font-semibold tracking-tight">Artifacto</h1>
      <p class="text-sm text-slate-400 mt-1">self-hosted HTML artifact publisher</p>
    </div>

    {{ if .Error }}
      <div class="border-l-2 border-slate-100 bg-slate-900 text-slate-100 px-3 py-2 mb-3 text-sm">
        <span class="uppercase tracking-wider text-xs font-bold text-slate-300 mr-2">Error</span>{{ .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 px-3 py-2 focus:outline-none focus:border-slate-400">
      </label>
      <button class="w-full bg-slate-100 hover:bg-white text-slate-950 px-3 py-2 font-medium">Log in</button>
    </form>
  </div>
</main>
</body>
</html>
{{ end }}