{{define "room"}}
<div class="flex h-screen">
  <!-- Left Panel -->
  <div class="w-1/4 p-4 border-r">
    <h2 class="text-xl mb-4">Join Blue Team</h2>
    <form hx-post="/join-team" hx-target="#room-content">
      <input type="hidden" name="room_id" value="{{.Room.ID}}">
      <input type="hidden" name="team" value="blue">
      <div class="mb-2">
        <button type="submit" name="role" value="guesser" class="w-full bg-blue-500 text-white py-2 px-4 rounded">
          Join as Guesser
        </button>
      </div>
      <div>
        <button type="submit" name="role" value="mime" class="w-full bg-blue-700 text-white py-2 px-4 rounded">
          Join as Mime
        </button>
      </div>
    </form>
  </div>

  <!-- Center Panel -->
  <div class="w-1/2 p-4 flex justify-center">
    <div class="grid grid-cols-5 gap-2">
      {{range .Room.Cards}}
        <div class="border p-2 text-center rounded" 
             style="background-color: {{if eq .Color "white"}}#ffffff{{else if eq .Color "blue"}}#0000ff{{else if eq .Color "red"}}#ff0000{{else if eq .Color "black"}}#000000{{else if eq .Color "beige"}}#f5f5dc{{else}}#f5f5dc{{end}};">
          {{if .Revealed}}
            {{.Word}}
          {{else}}
            <button hx-post="/reveal-card" 
                    hx-target="#room-content"
                    hx-include="form"
                    class="w-full h-full flex items-center justify-center">
              ?
            </button>
          {{end}}
        </div>
      {{end}}
    </div>
  </div>

  <!-- Right Panel -->
  <div class="w-1/4 p-4">
    <h2 class="text-xl mb-4">Join Red Team</h2>
    <form hx-post="/join-team" hx-target="#room-content">
      <input type="hidden" name="room_id" value="{{.Room.ID}}">
      <input type="hidden" name="team" value="red">
      <div class="mb-2">
        <button type="submit" name="role" value="guesser" class="w-full bg-red-500 text-white py-2 px-4 rounded">
          Join as Guesser
        </button>
      </div>
      <div>
        <button type="submit" name="role" value="mime" class="w-full bg-red-700 text-white py-2 px-4 rounded">
          Join as Mime
        </button>
      </div>
    </form>
  </div>
</div>
{{end}}