{{define "teampew"}}
<div>
<h2 class="text-xl mb-4">Join Blue Team</h2>
<form hx-post="/join-team" hx-target="#ancestor">
    <input type="hidden" name="team" value="blue">
  <div class="mb-1">
    {{if and (eq .State.Role "guesser") (eq .State.Team "blue")}}
    {{else}}
      <button type="submit" name="role" value="guesser" class="w-full bg-blue-500 text-white py-2 px-4 rounded">
      Join as Guesser
    </button>
    {{end}}
  </div>
  {{if eq .Room.BlueTeam.Mime ""}}
  <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>
  {{end}}
</form>
</div>
<div>
<h2 class="text-xl mb-4">Join Red Team</h2>
<form hx-post="/join-team" hx-target="#ancestor">
    <input type="hidden" name="team" value="red">
  <div class="mb-1">
    {{if and (eq .State.Role "guesser") (eq .State.Team "red")}}
    {{else}}
      <button type="submit" name="role" value="guesser" class="w-full bg-red-500 text-white py-2 px-4 rounded">
      Join as Guesser
    </button>
    {{end}}
  </div>
  {{if eq .Room.RedTeam.Mime ""}}
  <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>
  {{end}}
</form>
</div>
{{end}}