{{ define "main" }}
{{- $p := .Params -}}
{{/* Display order of the two marks; flip via `order: [r, m]` in front matter so neither
    side gets the "first thing on the page" advantage for the whole poll. */}}
{{- $order := $p.order | default (slice "m" "r") -}}
{{- $s := $p.show -}}
<article class="poll" data-poll="{{ $p.poll }}" data-api="/api/poll/{{ $p.poll }}">
  <header class="page-header">
    <h1>{{ .Title }}</h1>
    {{ with $p.description }}<p class="lede">{{ . }}</p>{{ end }}
  </header>
  <div class="prose">{{ .Content }}</div>

  {{/* ── Quick vote ─────────────────────────────────────────── */}}
  <div class="poll-grid" id="vote">
    {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
    {{ $c := index $p $k }}
    <section class="poll-card" data-choice="{{ $k }}" aria-labelledby="poll-{{ $k }}-title">
      <div class="poll-art poll-art--{{ $k }}">{{ $d.display | safeHTML }}</div>
      <h2 id="poll-{{ $k }}-title">{{ $c.title }}</h2>
      <p class="poll-desc">{{ $c.text }}</p>
      <button type="button" class="poll-btn" data-vote="{{ $k }}">{{ $p.labels.vote }}</button>
      <div class="poll-bar" aria-hidden="true"><i></i></div>
      <p class="poll-count" data-count="{{ $k }}"></p>
    </section>
    {{ end }}
  </div>
  <p class="poll-status" role="status" aria-live="polite"
     data-t-voted="{{ $p.labels.voted }}"
     data-t-total="{{ $p.labels.total }}"
     data-t-error="{{ $p.labels.error }}"
     data-t-change="{{ $p.labels.change }}">{{ $p.labels.nojs }}</p>

  {{/* ── Showcase ───────────────────────────────────────────── */}}
  <div class="show">
    <p class="section-eyebrow show-intro">{{ $s.intro }}</p>

    <section class="show-row">
      <h2 class="show-h">{{ $s.sizes }}</h2>
      <p class="show-p">{{ $s.sizes_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <div class="sizes">
            <figure><span class="sz sz-96">{{ $d.flat | safeHTML }}</span><figcaption>96</figcaption></figure>
            <figure><span class="sz sz-48">{{ $d.flat | safeHTML }}</span><figcaption>48</figcaption></figure>
            <figure><span class="sz sz-32">{{ $d.min | safeHTML }}</span><figcaption>32</figcaption></figure>
            <figure><span class="sz sz-24">{{ $d.min | safeHTML }}</span><figcaption>24</figcaption></figure>
            <figure><img class="px" src="{{ $d.tab16 | safeURL }}" width="16" height="16" alt=""><figcaption>16</figcaption></figure>
          </div>
        </div>
        {{ end }}
      </div>
    </section>

    <section class="show-row">
      <h2 class="show-h">{{ $s.name }}</h2>
      <p class="show-p">{{ $s.name_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <div class="lock lock-h">{{ $d.lockup_h | safeHTML }}</div>
          <div class="lock lock-s">{{ $d.lockup_s | safeHTML }}</div>
        </div>
        {{ end }}
      </div>
    </section>

    <section class="show-row">
      <h2 class="show-h">{{ $s.browser }}</h2>
      <p class="show-p">{{ $s.browser_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <div class="mock">
            <div class="tabbar"><span class="tab"><img class="px" src="{{ $d.tab16 | safeURL }}" width="16" height="16" alt="">Furtka</span></div>
            <div class="urlbar">https://furtka.org</div>
            <div class="uihead"><span class="uihead-mark">{{ $d.flat | safeHTML }}</span><span class="uihead-name">Furtka</span><span class="uihead-nav"><span>{{ $s.nav1 }}</span><span>{{ $s.nav2 }}</span></span></div>
            <div class="uibody"><i></i><i class="s"></i></div>
          </div>
        </div>
        {{ end }}
      </div>
    </section>

    <section class="show-row">
      <h2 class="show-h">{{ $s.phone }}</h2>
      <p class="show-p">{{ $s.phone_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <div class="tiles"><img src="/img/logo/{{ $k }}/tile.png" width="96" height="96" alt=""><img src="/img/logo/{{ $k }}/tile-round.png" width="96" height="96" alt=""></div>
        </div>
        {{ end }}
      </div>
    </section>

    <section class="show-row">
      <h2 class="show-h">{{ $s.box }}</h2>
      <p class="show-p">{{ $s.box_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <pre class="term"><i>{{ $d.banner }}</i>

  <b>Furtka is ready.</b>  Open http://furtka.local</pre>
          <img class="shot" src="/img/logo/{{ $k }}/splash.png" width="960" height="540" alt="">
        </div>
        {{ end }}
      </div>
    </section>

    <section class="show-row">
      <h2 class="show-h">{{ $s.shared }}</h2>
      <p class="show-p">{{ $s.shared_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <img class="shot" src="/img/logo/{{ $k }}/social.png" width="600" height="315" alt="">
        </div>
        {{ end }}
      </div>
    </section>

    <section class="show-row">
      <h2 class="show-h">{{ $s.colour }}</h2>
      <p class="show-p">{{ $s.colour_text }}</p>
      <div class="show-pair">
        {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
        <div class="show-cell show-cell--{{ $k }}">
          <span class="show-tag">{{ index $p $k "short" }}</span>
          <div class="grounds">
            <span class="ground" style="background:#f7f6f3;color:{{ $d.color }}">{{ $d.flat | safeHTML }}</span>
            <span class="ground" style="background:{{ $d.ink }};color:{{ $d.color }}">{{ $d.flat | safeHTML }}</span>
            <span class="ground" style="background:{{ $d.color }};color:#f7f6f3">{{ $d.flat | safeHTML }}</span>
            <span class="ground ground--fg">{{ $d.flat | safeHTML }}</span>
          </div>
        </div>
        {{ end }}
      </div>
    </section>
  </div>

  {{/* ── Vote again at the end ─────────────────────────────── */}}
  <section class="poll-final">
    <h2 class="show-h">{{ $s.final }}</h2>
    <div class="poll-final-row">
      {{ range $k := $order }}{{ $d := index site.Data.logo $k }}
      <div class="poll-final-card" data-choice="{{ $k }}">
        <span class="poll-final-mark show-cell--{{ $k }}">{{ $d.flat | safeHTML }}</span>
        <button type="button" class="poll-btn" data-vote="{{ $k }}">{{ $p.labels.vote }} — {{ index $p $k "short" }}</button>
        <div class="poll-bar" aria-hidden="true"><i></i></div>
        <p class="poll-count" data-count="{{ $k }}"></p>
      </div>
      {{ end }}
    </div>
  </section>
  <p class="poll-note">{{ $p.labels.note | safeHTML }}</p>
</article>
{{ $js := resources.Get "js/poll.js" | minify | fingerprint }}
<script defer src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}"></script>
{{ end }}