{{define "room"}}
<div id="interier" hx-get="/" hx-trigger="sse:roomupdate_{{.State.RoomID}}">
  <div id="meta">
    <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 <span class="text-{{.Room.TeamTurn}}-500">{{.Room.TeamTurn}}</span> team</p>
    <p>
      {{if eq .State.Team ""}}
      join the team!
      {{else}}
      you're on the team <span class="text-{{.State.Team}}-500">{{.State.Team}}</span>!
      {{end}}
    </p>
  </div>
  <hr />
  {{if .Room.IsRunning}}
    {{template "cardcounter" .Room}}
  {{end}}
  <div class="flex justify-center">
    <!-- Left Panel -->
    {{template "teamlist" .Room.BlueTeam}}
    {{if and (ne .State.Team "blue") (not .Room.IsRunning)}}
    {{template "teampew" "blue"}}
    {{end}}
    <!-- Right Panel -->
    {{if and (ne .State.Team "red") (not .Room.IsRunning)}}
    {{template "teampew" "red"}}
    {{end}}
    {{template "teamlist" .Room.RedTeam}}
  </div>
  <hr />
  <div id="cardtable">
    {{template "cardtable" .Room}}
  </div>
  <div>
    {{if and (eq .State.Role "guesser") (eq .State.Team .Room.TeamTurn)}}
    <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>
  <div>
  {{if .Room.MimeDone}}
  {{template "cluepop"}}
  {{end}}
  </div>
</div>
{{end}}