{{ define "unlock" }}
{{ template "head" "Protected" }}
<main class="max-w-6xl mx-auto px-6 py-8">
  <div class="max-w-sm mx-auto mt-24 text-center">
    <div class="inline-flex items-center justify-center w-12 h-12 rounded-full bg-slate-900 border border-slate-800 mb-4">
      <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 11v2m-4 4h8a2 2 0 002-2v-5a2 2 0 00-2-2H8a2 2 0 00-2 2v5a2 2 0 002 2zM10 9V7a2 2 0 114 0v2"/></svg>
    </div>
    <h1 class="text-xl font-semibold mb-2">Protected artifact</h1>
    <p class="text-sm text-slate-400 mb-6">Enter the password to view.</p>
    {{ 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="/p/{{ .Slug }}/unlock" class="space-y-3 text-left">
      <input type="password" name="password" required autofocus
             class="w-full bg-slate-900 border border-slate-800 rounded px-3 py-2 focus:outline-none focus:border-indigo-500">
      <button class="w-full bg-indigo-600 hover:bg-indigo-500 text-white rounded px-3 py-2 font-medium">Unlock</button>
    </form>
  </div>
</main>
{{ template "footer" }}
{{ end }}