{{define "room"}}
<div id="hello-user">
  <p>Hello {{.State.Username}};</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>
  <button hx-get="/end-turn" hx-target="#room" class="bg-amber-100 text-black px-4 py-2 rounded">End Turn</button>
</div>
{{end}}