{{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>
  {{template "cardtable" .}}
  <!-- 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}}