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

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

  <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">UNO</h1>
    </div>
    <p class="text-sm text-[color:var(--ink)]/50">Sit down, ante up, and go out first — the pot's yours</p>
  </div>

  {{template "_chipbar" .}}

  <!-- The felt. Other seats along the top, the deck and the pile in the middle
       with the pot beside them, your hand at the bottom. Every ante on this table
       is riding in the pot until somebody goes out and takes it. -->
  <section class="pete-felt pete-uno relative overflow-hidden rounded-3xl p-4 sm:p-6 lg:p-8 shadow-pete-lg border-2 border-[color:var(--ink)]/10">
    <div class="grid gap-5 lg:grid-cols-[minmax(0,1fr),auto] lg:gap-8">

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

        <!-- The other seats. Each one is a name, a stack, a fan of backs and a
             count — all a real opponent shows you. -->
        <div data-seats class="flex flex-wrap items-start justify-center gap-3 sm:gap-5" aria-label="The other players"></div>

        <!-- The middle: what you draw from, what you play onto, and the pot. -->
        <div class="flex items-center justify-center gap-5 sm:gap-8">
          <button type="button" data-deck class="pete-uno-deck" aria-label="Draw a card">
            <span class="pete-uno-back" aria-hidden="true"></span>
            <span data-deck-count class="pete-uno-deck-count">0</span>
          </button>

          <div class="flex flex-col items-center gap-2">
            <div data-discard class="pete-uno-discard" aria-label="The card in play"></div>
            <p data-colour class="pete-uno-colour" aria-live="polite"></p>
            <p data-bill class="pete-uno-pending hidden" aria-live="assertive"></p>
          </div>

          <!-- The pot. Every seat's ante is in here until the hand is won. -->
          <div class="pete-uno-pot text-center">
            <span class="block text-xs font-bold uppercase tracking-wider text-white/50">Pot</span>
            <span data-pot class="block font-display text-2xl font-bold tabular-nums text-white">0</span>
          </div>
        </div>

        <!-- Your hand. -->
        <div class="space-y-2">
          <div class="flex items-baseline justify-between gap-2">
            <p data-turn-label class="text-xs font-bold uppercase tracking-wider text-white/50" aria-live="polite"></p>
            <p data-count-label class="text-xs font-bold uppercase tracking-wider text-white/40"></p>
          </div>
          <div data-hand class="pete-uno-hand" aria-label="Your hand"></div>
        </div>

        <div class="flex min-h-[2.75rem] items-center justify-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>

      <!-- The rail. -->
      <aside class="pete-rail">
        <div class="pete-rack" data-at="rail" 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>

        <div class="text-center">
          <div class="pete-meter" data-meter>
            <span class="pete-meter-label">In front of you</span>
            <span data-stack class="pete-meter-value">—</span>
          </div>
          <p data-table-name class="mt-1.5 text-xs font-bold uppercase tracking-wider text-white/40"></p>
        </div>
      </aside>
    </div>

    <!-- Naming a colour for a wild. -->
    <div data-wild class="pete-uno-wild hidden" role="dialog" aria-label="Pick a colour">
      <div class="pete-uno-wild-box">
        <p class="font-display text-lg font-bold text-white">Pick a colour</p>
        <div class="mt-3 grid grid-cols-2 gap-2.5">
          <button type="button" data-colour-pick="red"    class="pete-uno-swatch" data-c="red">Red</button>
          <button type="button" data-colour-pick="blue"   class="pete-uno-swatch" data-c="blue">Blue</button>
          <button type="button" data-colour-pick="yellow" class="pete-uno-swatch" data-c="yellow">Yellow</button>
          <button type="button" data-colour-pick="green"  class="pete-uno-swatch" data-c="green">Green</button>
        </div>
        <button type="button" data-colour-cancel class="mt-3 text-xs font-semibold text-white/50 hover:text-white/80 transition">Play something else</button>
      </div>
    </div>

    <!-- Calling UNO. -->
    <div data-unogate class="pete-uno-wild hidden" role="dialog" aria-label="Call UNO">
      <div class="pete-uno-wild-box">
        <p class="font-display text-lg font-bold text-white">Down to one card</p>
        <button type="button" data-uno-call class="pete-uno-call">UNO!</button>
        <div class="pete-uno-timer" aria-hidden="true"><span data-uno-timer></span></div>
        <p class="mt-2 text-xs text-white/50">Say it, or they'll catch you for two.</p>
      </div>
    </div>
  </section>

  <!-- Acting: shown while it's your turn. -->
  <section data-acting class="hidden rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
    <div class="flex flex-wrap items-center gap-3">
      <p data-hint class="text-sm text-[color:var(--ink)]/50">
        Click a card that lights up. Nothing lights up? Draw one.
      </p>
      <div class="ml-auto flex flex-wrap items-center gap-2">
        <button type="button" data-draw
                class="rounded-full border-2 border-[color:var(--ink)]/15 bg-[color:var(--card)] px-6 py-3 font-display text-lg font-bold shadow-pete
                       hover:bg-[color:var(--ink)]/5 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
          Draw
        </button>
        <button type="button" data-take
                class="hidden rounded-full bg-[#cc3d4a] px-6 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">
          Take <span data-take-n>0</span>
        </button>
        <button type="button" data-pass
                class="hidden rounded-full bg-[color:var(--accent)] px-6 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">
          Keep it
        </button>
      </div>
    </div>
    <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>

  <!-- Between hands: deal the next one, or get up. -->
  <section data-between class="hidden rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">
    <div class="flex flex-wrap items-center gap-3">
      <div class="min-w-0">
        <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">In front of you</div>
        <div class="font-display text-3xl font-bold tabular-nums" data-table-stack>0</div>
        <p class="mt-0.5 text-xs text-[color:var(--ink)]/40">
          Bought in for <span data-bought-in class="tabular-nums">0</span> · <span data-ante-note class="tabular-nums">0</span> to ante
        </p>
      </div>

      <div class="ml-auto flex flex-wrap items-center gap-2">
        <button type="button" data-leave
                class="rounded-full border-2 border-[color:var(--ink)]/15 bg-[color:var(--card)] px-5 py-3 font-display text-base font-bold shadow-pete
                       hover:bg-[color:var(--ink)]/5 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
          Get up
        </button>
        <button type="button" data-deal
                class="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">
          Next hand
        </button>
      </div>
    </div>
    <p data-between-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
  </section>

  <!-- The rail talk, shown while you're seated. -->
  <section data-chat class="hidden rounded-3xl bg-[color:var(--card)] p-4 shadow-pete border-2 border-[color:var(--ink)]/10">
    <div data-chat-log class="flex flex-col gap-1 max-h-40 overflow-y-auto pr-1 text-sm" aria-live="polite" aria-label="Table chat"></div>
    <form data-chat-form class="mt-3 flex items-center gap-2">
      <input data-chat-input type="text" maxlength="240" autocomplete="off" placeholder="Say something to the table…"
             class="flex-1 min-w-0 rounded-full border-2 border-[color:var(--ink)]/15 bg-[color:var(--bg)] px-4 py-2 text-sm focus:outline-none focus:border-[color:var(--accent)]">
      <button type="submit"
              class="rounded-full bg-[color:var(--accent)] px-5 py-2 font-display text-sm font-bold text-white shadow-pete hover:brightness-105 active:translate-y-px transition">
        Say
      </button>
    </form>
  </section>

  <!-- Sitting down: shown when you aren't at a table. -->
  <section data-sitting class="rounded-3xl bg-[color:var(--card)] p-5 sm:p-6 shadow-pete border-2 border-[color:var(--ink)]/10">

    <div class="flex flex-wrap items-center justify-between gap-3">
      <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Which table?</div>
      <div class="pete-seg" role="group" aria-label="Which rules">
        <button type="button" data-rules="normal" class="pete-seg-btn">UNO</button>
        <button type="button" data-rules="nomercy" class="pete-seg-btn">No Mercy</button>
      </div>
    </div>

    <div data-grid="normal">
      <div class="mt-2 grid gap-2 sm:grid-cols-3">
        {{range .Tables}}
        <button type="button" data-tier="{{.Slug}}" data-min="{{.MinBuy}}" data-max="{{.MaxBuy}}" data-ante="{{.Ante}}"
                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)]">{{.Ante}} ante</span>
          </div>
          <p class="mt-0.5 text-xs text-[color:var(--ink)]/50">{{.Blurb}}</p>
          <p class="mt-1.5 text-xs font-semibold text-[color:var(--ink)]/40">
            {{.Bots}} bot{{if gt .Bots 1}}s{{end}} · buy in {{.MinBuy}}–{{.MaxBuy}}
          </p>
        </button>
        {{end}}
      </div>
    </div>

    <div data-grid="nomercy" class="hidden">
      <div class="mt-2 grid gap-2 sm:grid-cols-3">
        {{range .NoMercy}}
        <button type="button" data-tier="{{.Slug}}" data-min="{{.MinBuy}}" data-max="{{.MaxBuy}}" data-ante="{{.Ante}}"
                class="pete-tier pete-tier-nm 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)]">{{.Ante}} ante</span>
          </div>
          <p class="mt-0.5 text-xs text-[color:var(--ink)]/50">{{.Blurb}}</p>
          <p class="mt-1.5 text-xs font-semibold text-[color:var(--ink)]/40">
            {{.Bots}} bot{{if gt .Bots 1}}s{{end}} · 168 cards
          </p>
        </button>
        {{end}}
      </div>
    </div>

    <div class="mt-5">
      <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Buying in for</div>
      <div class="mt-2 flex items-center gap-3">
        <input type="range" data-buyin-slider class="flex-1 min-w-0" aria-label="How much to buy in for">
        <span data-buyin class="font-display text-2xl font-bold tabular-nums">0</span>
      </div>
      <p class="mt-1.5 text-xs text-[color:var(--ink)]/40" data-buyin-note></p>
    </div>

    <button type="button" data-sit
            class="mt-5 w-full 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">
      Sit down
    </button>

    <div data-lobby-wrap class="mt-6 hidden">
      <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Or join a table in progress</div>
      <div data-lobby class="mt-2 grid gap-2"></div>
    </div>

    <p data-note="normal" class="mt-3 text-center text-xs text-[color:var(--ink)]/40">
      Everyone antes, and the first one out takes the pot less {{.RakePct}}% rake. Normal rules: no stacking a +2 on a +2, and a reverse is a skip when it's just the two of you.
    </p>
    <p data-note="nomercy" class="hidden mt-3 text-center text-xs text-[color:var(--ink)]/40">
      168 cards, +6s and +10s. Draw cards stack, you draw until you can play, and {{.MercyLimit}} cards in your hand puts you out of the hand. The pot still goes to whoever goes out first.
    </p>
    <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/uno.js" defer></script>
{{end}}