{{define "title"}}Hall of firsts — {{.SiteTitle}}{{end}}

{{define "main"}}
<article class="mt-2 mb-10 max-w-3xl mx-auto">
  {{template "realmnav" .}}

  <header class="rounded-3xl bg-theme-adventure text-white p-6 sm:p-10 shadow-pete relative overflow-hidden">
    <div class="absolute -top-10 -right-6 text-[12rem] opacity-20 select-none" aria-hidden="true">📜</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] opacity-80">📜 Hall of firsts</p>
      <h1 class="font-display text-3xl sm:text-4xl font-bold mt-2 leading-tight">Everything that has only ever happened once.</h1>
      <p class="mt-3 opacity-90 max-w-2xl">
        The first time anyone walked out of a place alive. The first time a thing
        came out of the ground. Each of these happened exactly once in the history
        of the realm and can't happen again.
      </p>
      {{if .Firsts.Total}}
      <div class="mt-6 flex flex-wrap gap-x-8 gap-y-3 text-xs uppercase tracking-wider opacity-85">
        <span>Entries · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Firsts.Total}}</span></span>
        <span>Places opened · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Firsts.Zones}}</span></span>
        {{if .Firsts.Others}}<span>Things found · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Firsts.Others}}</span></span>{{end}}
      </div>
      {{end}}
      {{if and .Firsts.Known .Firsts.Stale}}
      <p class="mt-4 text-xs bg-black/25 rounded-xl px-3 py-2">
        Ledger as of {{.Firsts.LastSeenAgo}}. Nothing in a history book goes stale exactly, but a new entry might not be here yet.
      </p>
      {{end}}
    </div>
  </header>

  {{if .Firsts.Years}}
  {{range .Firsts.Years}}
  <section class="mt-8">
    <h2 class="font-display text-2xl font-bold mb-4 tabular-nums">
      {{if .Year}}{{.Year}}{{else}}Before the records{{end}}
    </h2>
    <ol class="firsts-ledger">
      {{range .Firsts}}
      <li class="firsts-entry firsts-entry-{{.Kind}}">
        <div class="flex flex-wrap items-baseline gap-x-2 gap-y-1">
          <span class="text-[11px] uppercase tracking-wider text-[color:var(--ink)]/40 font-semibold">{{.Label}}</span>
          <span class="font-display font-bold text-base">{{.Display}}</span>
          {{if .Tier}}<span class="text-[11px] text-[color:var(--ink)]/35 tabular-nums">T{{.Tier}}</span>{{end}}
        </div>
        <p class="mt-0.5 text-sm text-[color:var(--ink)]/60">
          {{if .Token}}<a href="/adventure/who/{{.Token}}" class="font-semibold text-[color:var(--ink)]/80 hover:text-theme-adventure transition">{{.Holder}}</a>
          {{else if .Holder}}<span class="font-semibold text-[color:var(--ink)]/80">{{.Holder}}</span>
          {{else}}<span class="italic text-[color:var(--ink)]/40">nobody left who'll admit to it</span>{{end}}
          {{if .When}}<span class="text-[color:var(--ink)]/35"> · {{.When}}</span>{{end}}
        </p>
      </li>
      {{end}}
    </ol>
  </section>
  {{end}}

  <p class="mt-8 text-xs text-[color:var(--ink)]/40 text-center max-w-xl mx-auto">
    An entry with no name is one where the record has outlived the record-holder —
    a thing found and long since given away, or somebody who'd rather I didn't say.
    The claim still stands.
  </p>

  {{else}}
  <div class="mt-6 rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 p-6 shadow-pete">
    <p class="text-sm text-[color:var(--ink)]/60">
      {{if .Firsts.Known}}
      Nothing's happened for the first time yet. Everything is about to be a first.
      {{else}}
      Haven't had the ledger through from the field yet.
      {{end}}
    </p>
  </div>
  {{end}}
</article>
{{end}}