{{define "title"}}The realm — {{.SiteTitle}}{{end}}

{{/* One zone. The whole design problem of this page is in this block: a zone
     nobody has ever beaten has to LOOK different, not just say so in small
     text, because "nobody has ever done this" is the single most interesting
     fact the realm has to offer. */}}
{{define "realmzone"}}
<li class="realm-zone{{if .Unbeaten}} realm-zone-unbeaten{{end}}{{if .Busy}} realm-zone-busy{{end}}">
  <div class="flex items-baseline justify-between gap-3">
    <h3 class="font-display font-bold text-base flex-1 min-w-0 truncate">{{.Display}}</h3>
    {{if .Levels}}<span class="text-[11px] uppercase tracking-wider text-[color:var(--ink)]/40 shrink-0">{{.Levels}}</span>{{end}}
  </div>

  {{if .Atmosphere}}
  <p class="mt-1 text-xs text-[color:var(--ink)]/55 leading-relaxed">{{.Atmosphere}}</p>
  {{end}}

  <div class="mt-2.5 text-xs">
    {{if .Unbeaten}}
    <p class="realm-unbeaten-line">Nobody has ever come back out of it.</p>
    {{else}}
    <p class="text-[color:var(--ink)]/60">
      {{/* FirstClearBy empty with Clears > 0 is the anonymised case: the zone
           has been beaten, the clearer opted out. It must not read as unbeaten. */}}
      First through:
      {{if .FirstClearToken}}<a href="/adventure/who/{{.FirstClearToken}}" class="font-semibold hover:text-theme-adventure transition">{{.FirstClearBy}}</a>
      {{else if .FirstClearBy}}<span class="font-semibold">{{.FirstClearBy}}</span>
      {{else}}<span class="italic text-[color:var(--ink)]/45">somebody who'd rather not say</span>{{end}}
      {{if .FirstWhen}}<span class="text-[color:var(--ink)]/40"> · {{.FirstWhen}}</span>{{end}}
    </p>
    <p class="mt-0.5 text-[color:var(--ink)]/45 tabular-nums">
      {{.Clears}} clear{{if ne .Clears 1}}s{{end}} by {{.Clearers}} adventurer{{if ne .Clearers 1}}s{{end}}
    </p>
    {{end}}
  </div>

  {{if .Occupants}}
  <div class="mt-2.5 pt-2.5 border-t border-[color:var(--ink)]/10">
    <p class="text-[11px] uppercase tracking-wider text-theme-adventure font-semibold">In there now</p>
    <p class="mt-1 text-xs">
      {{range $i, $o := .Occupants}}{{if $i}}<span class="text-[color:var(--ink)]/30">, </span>{{end}}<!--
      -->{{if $o.Token}}<a href="/adventure/who/{{$o.Token}}" class="font-semibold hover:text-theme-adventure transition">{{$o.Name}}</a>{{else}}<span class="font-semibold">{{$o.Name}}</span>{{end}}<!--
      -->{{if $o.Day}}<span class="text-[color:var(--ink)]/40"> (day {{$o.Day}})</span>{{end}}{{end}}
    </p>
  </div>
  {{end}}
</li>
{{end}}

{{define "main"}}
<article class="mt-2 mb-10 max-w-5xl 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">🗺️ The realm</p>
      <h1 class="font-display text-3xl sm:text-4xl font-bold mt-2 leading-tight">Everywhere you can go, and what came back.</h1>
      <p class="mt-3 opacity-90 max-w-2xl">
        Every place in the world, in the order it gets harder. Some of these have been
        walked a hundred times. Some of them have never been walked at all.
      </p>

      {{if .Realm.Known}}
      <div class="mt-6 flex flex-wrap gap-x-8 gap-y-3 text-xs uppercase tracking-wider opacity-85">
        <span>Places · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Realm.ZoneCount}}</span></span>
        <span>Beaten · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Realm.ClearedZones}}</span></span>
        <span>Never beaten · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Realm.Unbeaten}}</span></span>
        <span>Out there now · <span class="font-semibold tabular-nums normal-case tracking-normal text-base">{{.Realm.OutThere}}</span></span>
      </div>
      {{end}}

      {{if and .Realm.Known .Realm.Stale}}
      <p class="mt-4 text-xs bg-black/25 rounded-xl px-3 py-2">
        The wire's been quiet — this is the realm as of {{.Realm.LastSeenAgo}}. The places
        haven't moved, but who's out in them might have.
      </p>
      {{end}}
    </div>
  </header>

  {{if not .Realm.Known}}
  <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">
      I haven't had the survey through from the field yet. When it lands, the whole
      world lives on this page.
    </p>
  </div>
  {{end}}

  {{range .Realm.Tiers}}
  <section class="mt-8{{if .Postgame}} realm-band-postgame rounded-3xl p-5 sm:p-6{{end}}">
    <div class="flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 mb-1">
      <h2 class="font-display text-xl sm:text-2xl font-bold">{{.Label}}</h2>
      <span class="text-xs text-[color:var(--ink)]/45 tabular-nums shrink-0">
        {{.Cleared}} of {{len .Zones}} beaten
      </span>
    </div>
    {{if .Blurb}}<p class="text-sm text-[color:var(--ink)]/55 mb-4 max-w-2xl">{{.Blurb}}</p>{{end}}
    <ul class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
      {{range .Zones}}{{template "realmzone" .}}{{end}}
    </ul>
  </section>
  {{end}}

  {{if .Realm.Known}}
  <p class="mt-8 text-xs text-[color:var(--ink)]/40 text-center">
    Say <code class="rounded bg-[color:var(--ink)]/8 px-1.5 py-0.5 font-mono">!expedition start</code>
    to me in Matrix to pick one and go.
  </p>
  {{end}}
</article>
{{end}}