{% extends "base.html" %}
{% block content %}
<h2 class="text-2xl font-bold mb-6">Teams</h2>
<div class="grid md:grid-cols-2 gap-6">
  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-xl font-semibold mb-4" style="color: var(--irish-green);">Available Teams</h3>
    {% if teams %}
      <ul class="space-y-3">
        {% for team in teams %}
          <li class="border-b pb-2 flex justify-between items-center">
            <span class="font-medium">{{ team.name }}</span>
            <form action="/teams/join/{{ team.id }}" method="post" class="inline">
              <button type="submit" 
                      class="px-3 py-1 text-sm rounded-md" 
                      style="background-color: var(--golden-ale); color: var(--black-stout);">
                Join Team
              </button>
            </form>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p class="italic text-gray-500">No teams available yet.</p>
    {% endif %}
  </div>

  <div class="bg-white p-6 rounded-lg shadow-md">
    <h3 class="text-xl font-semibold mb-4" style="color: var(--irish-green);">Create New Team</h3>
    <form action="/teams/create" method="post" class="mt-4">
      <div class="mb-4">
        <label for="name" class="block text-sm font-medium mb-1">Team Name</label>
        <input type="text" name="name" id="name" placeholder="Enter team name" required 
              class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2"
              style="border-color: var(--irish-green); focus:ring-color: var(--irish-green);">
      </div>
      <button type="submit" 
              class="w-full px-4 py-2 text-white rounded-md font-medium"
              style="background-color: var(--irish-green);">
        Create Team
      </button>
    </form>
  </div>
</div>

<div class="mt-10 bg-white p-6 rounded-lg shadow-md">
  <h3 class="text-xl font-semibold mb-4" style="color: var(--irish-green);">About Teams</h3>
  <p class="mb-4">
    Teams are the heart of LeagueLedger. Join an existing team or create your own to start tracking your pub quiz triumphs!
  </p>
  <p class="italic">
    Every point counts in the journey to becoming pub quiz champions.
  </p>
</div>
{% endblock %}