{{define "title"}}Hangman · {{.Room.Name}}{{end}}

{{define "main"}}
<div class="space-y-6" data-hangman>

  <div class="flex flex-wrap items-center justify-between gap-3">
    <div class="flex items-center gap-3 min-w-0">
      <a href="/games" class="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-[color:var(--card)] shadow-pete border-2 border-[color:var(--ink)]/10 hover:bg-[color:var(--ink)]/5 transition" title="Back to the casino">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-5 w-5" aria-hidden="true">
          <path d="M19 12H5"></path><polyline points="12 19 5 12 12 5"></polyline>
        </svg>
        <span class="sr-only">Back to the casino</span>
      </a>
      <h1 class="font-display text-3xl font-bold">Hangman</h1>
    </div>
    <p class="text-sm text-[color:var(--ink)]/50">{{.MaxWrong}} lives · every wrong guess costs you a tenth of the win</p>
  </div>

  {{template "_chipbar" .}}

  <!-- The felt. The gallows is on it because the gallows is the meter: it counts
       down your lives and your winnings at the same time. -->
  <section class="pete-felt relative overflow-hidden rounded-3xl p-6 sm:p-10 shadow-pete-lg border-2 border-[color:var(--ink)]/10">

    <div class="pete-rack" data-house aria-hidden="true">
      <span data-chip="500" style="--stack: 5"></span>
      <span data-chip="100" style="--stack: 7"></span>
      <span data-chip="25"  style="--stack: 4"></span>
      <span data-chip="5"   style="--stack: 6"></span>
    </div>

    <!-- The gallows and the stake stack up on the left; the phrase and what it's
         worth take the rest. The right column keeps clear of the rack in the
         corner, which is why nothing in it is pushed to the far edge. -->
    <div class="relative grid gap-x-10 gap-y-8 lg:grid-cols-[auto,1fr] lg:items-start">

      <div class="flex flex-col items-center gap-6 lg:items-start">
        <svg data-gallows viewBox="0 0 130 150" class="pete-gallows h-48 w-auto sm:h-56" role="img"
             aria-labelledby="gallows-title">
          <title id="gallows-title">The gallows</title>
          <g class="pete-gallows-frame">
            <path d="M8 145 H72" />
            <path d="M28 145 V8" />
            <path d="M28 8 H92" />
            <path d="M92 8 V26" />
          </g>
          <g class="pete-gallows-body">
            <circle data-part="0" cx="92" cy="38" r="12" />
            <path   data-part="1" d="M92 50 V88" />
            <path   data-part="2" d="M92 58 L74 76" />
            <path   data-part="3" d="M92 58 L110 76" />
            <path   data-part="4" d="M92 88 L76 114" />
            <path   data-part="5" d="M92 88 L108 114" />
          </g>
        </svg>

        <!-- The stake sits under the gallows it's riding on, the same spot the
             blackjack table puts your bet on. -->
        <div class="flex items-center gap-4">
          <div class="pete-spot" data-spot>
            <span class="pete-spot-label">Bet</span>
            <div class="pete-stack" data-stack></div>
            <span data-spot-total class="pete-spot-total hidden"></span>
          </div>
          <p data-lives class="text-xs font-bold uppercase tracking-wider text-white/50"></p>
        </div>
      </div>

      <div class="min-w-0 space-y-6">

        <!-- What a win is worth right now. It falls as the figure fills in.
             This row is the only one level with the house rack in the corner, so
             it is the only one that has to keep clear of it — the board below
             gets the full width, and needs it. -->
        <div class="flex flex-wrap items-center gap-3 pr-24 sm:pr-28">
          <div class="pete-meter" data-meter>
            <span class="pete-meter-label">Pays</span>
            <span data-multiple class="pete-meter-value">—</span>
          </div>
          <p class="text-sm text-white/60">
            <span data-stands class="font-bold tabular-nums text-white/90">—</span>
            <span data-stands-label>if you get it</span>
          </p>
        </div>

        <!-- The phrase. -->
        <div data-board class="pete-board" aria-live="polite" aria-label="The phrase"></div>

        <!-- Letters that missed. -->
        <div class="flex min-h-[1.75rem] flex-wrap items-center gap-1.5">
          <span data-wrong-label class="hidden text-xs font-bold uppercase tracking-wider text-white/40">Missed</span>
          <div data-wrong class="flex flex-wrap gap-1.5"></div>
        </div>

        <!-- What just happened. -->
        <div class="flex min-h-[2.75rem] items-center">
          <p data-verdict class="hidden rounded-full bg-white/95 px-5 py-2 font-display text-lg font-bold text-[#2b2118] shadow-pete"></p>
        </div>

      </div>
    </div>
  </section>

  <!-- Guessing: shown while a game is live. -->
  <section data-guessing class="hidden rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
    <div data-keyboard class="pete-keys"></div>

    <div class="mt-4 flex flex-wrap items-center gap-2">
      <label for="solve" class="sr-only">Guess the whole phrase</label>
      <input id="solve" data-solve-input type="text" autocomplete="off" enterkeyhint="go"
             placeholder="Or just say what it is…"
             class="min-w-0 flex-1 rounded-full bg-[color:var(--ink)]/5 px-4 py-2.5 text-sm font-semibold
                    border-2 border-[color:var(--ink)]/10 focus:outline-none focus:border-[color:var(--accent)]">
      <button type="button" data-solve
              class="rounded-full bg-[color:var(--accent)] px-6 py-2.5 font-display font-bold text-white shadow-pete
                     hover:brightness-105 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
        Solve
      </button>
    </div>
    <p class="mt-3 text-center text-xs text-[color:var(--ink)]/40">
      Type a letter to guess it. A wrong solve costs a life, same as a wrong letter.
    </p>
    <p data-game-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
  </section>

  <!-- Betting: shown between games. -->
  <section data-betting class="rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">

    <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">How long a phrase?</div>
    <div class="mt-2 grid gap-2 sm:grid-cols-3">
      {{range .Tiers}}
      <button type="button" data-tier="{{.Slug}}"
              class="pete-tier rounded-2xl border-2 p-3 text-left transition">
        <div class="flex items-baseline justify-between gap-2">
          <span class="font-display text-lg font-bold">{{.Name}}</span>
          <span class="font-display text-lg font-bold tabular-nums text-[color:var(--accent)]">{{printf "%.1f" .Base}}×</span>
        </div>
        <p class="mt-0.5 text-xs text-[color:var(--ink)]/50">{{.Blurb}}</p>
      </button>
      {{end}}
    </div>

    <div class="mt-5 flex flex-wrap items-center gap-x-6 gap-y-4">
      <div>
        <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Your bet</div>
        <div class="font-display text-3xl font-bold tabular-nums"><span data-bet-amount>0</span></div>
      </div>

      <div class="flex flex-wrap items-center gap-2">
        {{range .Denominations}}
        <button type="button" data-chip="{{.}}" aria-label="Bet {{.}} more"
                class="pete-chip pete-disc grid h-12 w-12 place-items-center font-display text-sm font-bold text-white">
          <span>{{.}}</span>
        </button>
        {{end}}
        <button type="button" data-bet-clear
                class="rounded-full px-3 py-2 text-sm font-semibold text-[color:var(--ink)]/50 hover:text-[color:var(--ink)] transition">Clear</button>
      </div>

      <button type="button" data-start
              class="ml-auto rounded-full bg-[color:var(--accent)] px-8 py-3 font-display text-lg font-bold text-white shadow-pete
                     hover:brightness-105 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
        Play
      </button>
    </div>
    <p data-table-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
  </section>

</div>
{{end}}

{{define "scripts"}}
<script src="/static/js/casino-fx.js" defer></script>
<script src="/static/js/games.js" defer></script>
<script src="/static/js/hangman.js" defer></script>
{{end}}