{{define "title"}}Bookmarks — {{.SiteTitle}}{{end}}

{{define "main"}}
<section class="mt-2 mb-8">
  <div class="rounded-3xl bg-[color:var(--accent)] text-[#1c1305] p-6 sm:p-10 shadow-pete relative overflow-hidden">
    <div class="absolute -top-6 -right-6 text-[12rem] opacity-20 select-none" aria-hidden="true">🔖</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] opacity-70">saved for later</p>
      <h1 class="font-display text-4xl sm:text-5xl font-bold mt-1">Bookmarks</h1>
      <p class="mt-2 max-w-xl opacity-80">Stories you've tucked away. Tap the bookmark on any card to add or remove one.</p>
      <p class="mt-4 text-xs uppercase tracking-wider opacity-75">{{.Total}} saved</p>
    </div>
  </div>
</section>

{{if .Stories}}
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5">
  {{range .Stories}}
    {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
  {{end}}
</div>

<nav class="mt-10 flex items-center justify-between">
  {{if .HasPrev}}
    <a href="{{.PrevURL}}" class="rounded-full bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 px-5 py-2 font-semibold shadow-pete hover:-translate-y-0.5 transition">← newer</a>
  {{else}}<span></span>{{end}}
  <span class="text-sm text-[color:var(--ink)]/60">page {{.Page}}</span>
  {{if .HasNext}}
    <a href="{{.NextURL}}" class="rounded-full bg-[color:var(--accent)] text-[#1c1305] px-5 py-2 font-semibold shadow-pete hover:-translate-y-0.5 transition">older →</a>
  {{else}}<span></span>{{end}}
</nav>
{{else}}
<div class="rounded-3xl bg-[color:var(--card)] border-2 border-dashed border-[color:var(--ink)]/15 p-10 text-center text-[color:var(--ink)]/60">
  Nothing saved yet. Browse the feed and tap the 🔖 on a story to keep it here.
</div>
{{end}}
{{end}}