{{include "header.html"}}
{{include "nav.html"}}

{{/* 内容访问密码页：主题提供本模板即接管门禁外观；删除本文件会回落到系统内置密码页。
     可用的关键变量：.Title / .Description / .Content.Id / .Content.Img / .Uri / .ContentLocked */}}
<section class="py-12">
  {{/* ⚠️ 这里不用 .vm-container：它自带 max-width:1280px，与 Tailwind 的 max-w-3xl
        冲突时谁生效取决于运行时注入顺序，不可控。窄容器直接用工具类。 */}}
  <div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
    <div class="vm-card">
      {{if .Content}}{{if .Content.Img}}
      <img src="{{.Content.Img}}" alt="{{.Title}}" class="w-full h-56 object-cover">
      {{end}}{{end}}

      <div class="p-8">
        <h1 class="text-2xl font-bold mb-3">{{.Title}}</h1>
        {{if .Description}}<p class="text-gray-500 text-sm mb-6">{{.Description}}</p>{{end}}

        {{$unlock := index .Request.Query "unlock"}}
        {{if eq $unlock "1"}}
        <div class="mb-5 rounded-lg border border-red-200 bg-red-50 text-red-600 text-sm px-4 py-3">Wrong password, please try again.</div>
        {{else if eq $unlock "2"}}
        <div class="mb-5 rounded-lg border border-red-200 bg-red-50 text-red-600 text-sm px-4 py-3">Too many attempts — please try again later.</div>
        {{end}}

        <div class="rounded-lg bg-gray-50 border border-gray-100 text-gray-500 text-sm px-4 py-3 mb-6">
          This page is password protected. Enter the password to continue.
        </div>

        <form method="post" action="/api/public/content/unlock" class="flex flex-col sm:flex-row gap-3">
          <input type="hidden" name="id" value="{{if .Content}}{{.Content.Id}}{{end}}">
          <input type="hidden" name="redirect" value="{{.Uri}}">
          <input type="password" name="password" required autofocus autocomplete="off" placeholder="Enter password"
                 class="vm-input flex-1">
          <button type="submit"
                  class="vm-btn vm-btn-primary">View page</button>
        </form>
      </div>
    </div>
  </div>
</section>

{{include "footer.html"}}
{{include "js.html"}}