{{define "room"}}
<div id="hello-user">
  <p>Hello {{.State.Username}};</p>
  <p>Room created by {{.Room.CreatorName}};</p>
  <p>Game is running: {{.Room.IsRunning}}</p>
  <p>
    {{if and (eq .State.Username .Room.CreatorName) (not .Room.IsRunning)}}
      <button hx-get="/start-game" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">Start Game</button>
    {{end}}
  </p>
  <p>Turn of the {{.Room.TeamTurn}} team</p>
  <p>
    {{if eq .State.Team ""}}
    join the team!
    {{else}}
    you're on the team {{.State.Team}}!
    {{end}}
  </p>
</div>
<hr />
<div class="flex justify-center">
  <!-- Left Panel -->
  {{template "teamlist" .Room.BlueTeam}}
  {{if ne .State.Team "blue"}}
  {{template "teampew" "blue"}}
  {{end}}
  <!-- Right Panel -->
  {{if ne .State.Team "red"}}
  {{template "teampew" "red"}}
  {{end}}
  {{template "teamlist" .Room.RedTeam}}
</div>
<hr />
<div id="cardtable">
  {{template "cardtable" .Room}}
</div>
<div>
  {{if eq .State.Role "guesser"}}
  <button hx-get="/end-turn" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">End Turn</button>
  {{else if eq .State.Role "mime"}}
  {{template "mimeclue"}}
  {{end}}
</div>
{{end}}