{{define "_chipbar"}}
<section data-chipbar
         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 gap-x-6 gap-y-4">

    <div class="min-w-0">
      <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Chips in front of you</div>
      <div class="flex items-baseline gap-2">
        <span data-chips class="font-display text-3xl font-bold tabular-nums">—</span>
        <span data-pending class="hidden text-sm font-semibold text-[color:var(--ink)]/60 animate-pulse"></span>
      </div>
    </div>

    <div class="min-w-0">
      <div class="text-xs font-semibold uppercase tracking-wider text-[color:var(--ink)]/50">Your wallet</div>
      <div class="flex items-baseline gap-1.5">
        <span data-euros class="font-display text-2xl font-bold tabular-nums text-[color:var(--ink)]/70">—</span>
        <span class="text-sm text-[color:var(--ink)]/40" title="Pete reads this off the game box every couple of minutes, so it lags a little.">€, give or take</span>
      </div>
    </div>

    <div class="ml-auto flex flex-wrap items-center gap-2">
      <div class="flex items-center gap-1.5 rounded-full bg-[color:var(--ink)]/5 p-1.5">
        <label for="buyin-amount" class="sr-only">How many chips?</label>
        <input id="buyin-amount" data-buyin-amount type="number" min="1" step="1" value="100"
               inputmode="numeric" enterkeyhint="go"
               class="w-24 rounded-full bg-[color:var(--card)] px-3 py-1.5 text-sm font-semibold tabular-nums
                      border-2 border-[color:var(--ink)]/10 focus:outline-none focus:border-[color:var(--accent)]">
        <button type="button" data-buyin
                class="rounded-full bg-[color:var(--accent)] px-4 py-1.5 text-sm font-bold text-white shadow-pete
                       hover:brightness-105 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
          Buy chips
        </button>
      </div>
      <button type="button" data-cashout
              class="rounded-full bg-[color:var(--card)] px-4 py-2 text-sm font-bold shadow-pete border-2 border-[color:var(--ink)]/10
                     hover:bg-[color:var(--ink)]/5 active:translate-y-px disabled:opacity-40 disabled:pointer-events-none transition">
        Cash out
      </button>

      <!-- The room's volume. It lives in the chip bar because the chip bar is the
           one thing every table has, and the sound is the room's rather than any
           one game's. -->
      <button type="button" data-sfx-toggle aria-pressed="false"
              class="grid h-10 w-10 place-items-center rounded-full bg-[color:var(--card)] shadow-pete border-2 border-[color:var(--ink)]/10
                     hover:bg-[color:var(--ink)]/5 active:translate-y-px transition">
        <svg data-sfx-on 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">
          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
          <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
          <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
        </svg>
        <svg data-sfx-off viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="hidden h-5 w-5" aria-hidden="true">
          <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
          <line x1="23" y1="9" x2="17" y2="15"></line>
          <line x1="17" y1="9" x2="23" y2="15"></line>
        </svg>
        <span data-sfx-label class="sr-only">Mute the room</span>
      </button>
    </div>
  </div>

  <p data-chipbar-msg class="hidden mt-3 rounded-2xl bg-[color:var(--ink)]/5 px-4 py-2 text-sm font-semibold"></p>
</section>
{{end}}
