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

{{/* The front door: the only page in here a stranger is allowed to see.

     It exists because a link has to unfurl into something, and because a casino
     whose first move is to shove you at an auth screen is a casino you'd assume
     was broken. Nothing on this page can be played — every table below sends you
     through sign-in first, and comes back to the table you picked. */}}

{{define "main"}}
<div class="space-y-8">

  <section class="rounded-3xl bg-[color:var(--card)] p-6 sm:p-10 shadow-pete border-2 border-[color:var(--ink)]/10">
    {{/* No decoration in here on purpose. The chip stacks want the casino's JS,
         which the door doesn't load, and an emoji big enough to balance the hero
         is an emoji that isn't on every machine. The share card carries the
         pictures; the door carries the way in. */}}
    <div class="flex flex-wrap items-center justify-between gap-6">
      <div class="min-w-0 max-w-2xl">
        <p class="text-xs font-semibold uppercase tracking-[0.18em] text-[color:var(--accent)]">The doors are open</p>
        <h1 class="mt-2 font-display text-3xl sm:text-5xl font-bold">{{.Room.Name}}</h1>
        <p class="mt-3 text-[color:var(--ink)]/70">
          Six tables, played against the house and its bots, for the same euros you
          already have. A chip is worth a euro, the house takes {{.RakePct}}% of what you
          win and nothing at all when you lose, and whatever you don't spend comes
          back when you cash out.
        </p>
        <div class="mt-6 flex flex-wrap items-center gap-3">
          <a href="/auth/login?next=/games"
             class="inline-flex items-center gap-2 rounded-full bg-[color:var(--accent)] px-6 py-3 font-display text-lg font-bold text-[#20180c] shadow-pete hover:-translate-y-0.5 hover:shadow-pete-lg transition">
            Sign in and sit down
          </a>
          <span class="text-sm text-[color:var(--ink)]/45">You'll need a parodia.dev account.</span>
        </div>
      </div>

    </div>
  </section>

  <section>
    <h2 class="font-display text-2xl font-bold mb-4">The tables</h2>
    <div class="grid gap-4 sm:grid-cols-2">
      {{template "_door_table" dict "Href" "/games/blackjack" "Emoji" "🃏" "Name" "Blackjack" "Line" "Six decks, blackjack pays 3:2."}}
      {{template "_door_table" dict "Href" "/games/holdem" "Emoji" "♠️" "Name" "Texas hold'em" "Line" "A cash game against bots that were trained on it."}}
      {{template "_door_table" dict "Href" "/games/uno" "Emoji" "🎴" "Name" "UNO" "Line" "Three tables, and a No Mercy deck that bites."}}
      {{template "_door_table" dict "Href" "/games/trivia" "Emoji" "🧠" "Name" "Trivia" "Line" "A ladder. Climb it or bank it."}}
      {{template "_door_table" dict "Href" "/games/hangman" "Emoji" "🔤" "Name" "Hangman" "Line" "Longer words pay more, for the obvious reason."}}
      {{template "_door_table" dict "Href" "/games/solitaire" "Emoji" "🂡" "Name" "Solitaire" "Line" "Klondike, and the deal you pick sets the price."}}
    </div>
  </section>

  <p class="pb-2 text-center text-sm text-[color:var(--ink)]/40">
    {{if eq .Room.Slug "casinopolis"}}The lights come on at six, and the place changes its name.
    {{else}}It goes back to being Casinopolis at six in the morning.{{end}}
  </p>
</div>
{{end}}

{{define "_door_table"}}
<a href="{{.Href}}"
   class="group rounded-3xl bg-[color:var(--card)] p-6 shadow-pete border-2 border-[color:var(--ink)]/10 hover:-translate-y-0.5 hover:shadow-pete-lg transition">
  <div class="flex items-center gap-3">
    <span class="grid h-12 w-12 shrink-0 place-items-center rounded-2xl bg-[color:var(--accent)]/25 text-2xl">{{.Emoji}}</span>
    <div class="min-w-0">
      <h3 class="font-display text-xl font-bold">{{.Name}}</h3>
      <p class="text-sm text-[color:var(--ink)]/60">{{.Line}}</p>
    </div>
  </div>
</a>
{{end}}