{{define "title"}}{{.Channel.Title}} — {{.SiteTitle}}{{end}}

{{define "main"}}
<section class="mt-2 mb-8">
  <div class="rounded-3xl bg-theme-{{.Channel.Theme}} text-white 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">{{.Channel.Emoji}}</div>
    <div class="relative">
      <p class="text-sm uppercase tracking-[0.2em] opacity-80">section</p>
      <h1 class="font-display text-4xl sm:text-5xl font-bold mt-1">{{.Channel.Title}}</h1>
      <p class="mt-2 max-w-xl text-white/85">{{.Channel.Blurb}}</p>
      <p class="mt-4 text-xs uppercase tracking-wider opacity-75">{{.Total}} stories archived</p>
    </div>
  </div>
</section>

{{if .ShowRoster}}
<section class="mb-10" id="roster" data-stale="{{.RosterStale}}">
  <div class="flex items-baseline justify-between mb-3">
    <h2 class="font-display text-2xl font-bold">Out there right now</h2>
    <p class="text-xs uppercase tracking-wider text-[color:var(--ink)]/50" id="roster-status">
      {{if .RosterStale}}last known — the wire's gone quiet{{else}}live{{end}}
    </p>
  </div>

  <div class="rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 shadow-pete overflow-hidden {{if .RosterStale}}opacity-60{{end}}" id="roster-card">
    <ul class="divide-y divide-[color:var(--ink)]/10" id="roster-list">
      {{range .Roster}}
      <li class="flex items-center gap-4 px-5 py-3">
        <span class="text-lg" aria-hidden="true">{{if .OnRun}}⚔{{else}}🏠{{end}}</span>
        <span class="font-semibold">{{.Name}}</span>
        <span class="text-sm text-[color:var(--ink)]/60">lv {{.Level}} {{.ClassRace}}</span>
        <span class="ml-auto text-sm {{if .OnRun}}font-semibold{{else}}text-[color:var(--ink)]/60{{end}}">
          {{.Where}}{{if .Idle}} <span class="text-[color:var(--ink)]/45">· {{.Idle}}</span>{{end}}
        </span>
      </li>
      {{else}}
      <li class="px-5 py-8 text-center text-[color:var(--ink)]/60">Nobody's out at the moment. Quiet week in the realm.</li>
      {{end}}
    </ul>
  </div>
</section>

<script>
// The board is state, not a story: an open tab should keep telling the truth
// without a reload. Cheap poll — a handful of rows, no auth, no cache.
(function () {
  var list = document.getElementById('roster-list');
  var status = document.getElementById('roster-status');
  var card = document.getElementById('roster-card');
  if (!list) return;

  function esc(s) {
    var d = document.createElement('div');
    d.textContent = s == null ? '' : String(s);
    return d.innerHTML;
  }

  function row(a) {
    var idle = a.Idle ? ' <span class="text-[color:var(--ink)]/45">· ' + esc(a.Idle) + '</span>' : '';
    return '<li class="flex items-center gap-4 px-5 py-3">' +
      '<span class="text-lg" aria-hidden="true">' + (a.OnRun ? '⚔' : '🏠') + '</span>' +
      '<span class="font-semibold">' + esc(a.Name) + '</span>' +
      '<span class="text-sm text-[color:var(--ink)]/60">lv ' + esc(a.Level) + ' ' + esc(a.ClassRace) + '</span>' +
      '<span class="ml-auto text-sm ' + (a.OnRun ? 'font-semibold' : 'text-[color:var(--ink)]/60') + '">' +
      esc(a.Where) + idle + '</span></li>';
  }

  function refresh() {
    fetch('/api/roster', { headers: { 'Accept': 'application/json' } })
      .then(function (r) { return r.ok ? r.json() : null; })
      .then(function (data) {
        if (!data) return;
        var rows = data.adventurers || [];
        list.innerHTML = rows.length
          ? rows.map(row).join('')
          : '<li class="px-5 py-8 text-center text-[color:var(--ink)]/60">Nobody\'s out at the moment. Quiet week in the realm.</li>';
        status.textContent = data.stale ? "last known — the wire's gone quiet" : 'live';
        card.classList.toggle('opacity-60', !!data.stale);
      })
      .catch(function () { /* transient — the next tick will do */ });
  }

  setInterval(refresh, 60000);
  document.addEventListener('visibilitychange', function () {
    if (!document.hidden) refresh();
  });
})();
</script>
{{end}}

{{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.Theme}}
  {{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-theme-{{.Channel.Theme}} text-white 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">
  Pete hasn't catalogued anything for {{.Channel.Title}} yet.
</div>
{{end}}
{{end}}
