{% extends "base.html" %}
{% block content %}
<div class="max-w-4xl mx-auto space-y-6">
  <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6">
    <div>
      <h1 class="text-2xl md:text-3xl font-garamond font-bold text-irish-green">League Leaderboard</h1>
      <p class="text-gray-600">
        See how your team ranks in {{ selected_league.name if selected_league else "your league" }}
      </p>
    </div>
    
    <div class="mt-4 md:mt-0">
      <form method="get" action="/leaderboard/" class="flex flex-col sm:flex-row gap-3">
        <select name="league_id"
                onchange="this.form.submit()"
                class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green bg-white">
          {% for league in leagues %}
            <option value="{{ league.id }}" {% if selected_league and selected_league.id == league.id %}selected{% endif %}>
              {{ league.name }}
            </option>
          {% endfor %}
        </select>
        <select name="timeframe" 
                onchange="this.form.submit()" 
                class="border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-irish-green bg-white">
          <option value="all" {% if timeframe == "all" %}selected{% endif %}>All Time</option>
          <option value="month" {% if timeframe == "month" %}selected{% endif %}>This Month</option>
          <option value="week" {% if timeframe == "week" %}selected{% endif %}>This Week</option>
        </select>
      </form>
    </div>
  </div>
  
  <!-- Podium (on larger screens) -->
  <div class="hidden md:flex justify-center items-end space-x-8 mb-12">
    <!-- 2nd Place -->
    {% if top_teams[1] %}
      <div class="flex flex-col items-center">
        <div class="w-20 h-20 rounded-full bg-white shadow-md flex items-center justify-center mb-4">
          <span class="text-4xl font-bold text-gray-500">2</span>
        </div>
        <div class="bg-gray-100 w-32 h-32 flex flex-col items-center justify-center rounded-t-lg">
          <p class="font-bold text-lg">{{ top_teams[1].name }}</p>
          <p class="text-irish-green font-bold">{{ top_teams[1].points }} pts</p>
        </div>
      </div>
    {% endif %}
    
    <!-- 1st Place -->
    {% if top_teams[0] %}
      <div class="flex flex-col items-center">
        <div class="w-24 h-24 rounded-full bg-golden-ale shadow-md flex items-center justify-center mb-4">
          <span class="text-5xl font-bold text-white">1</span>
        </div>
        <div class="bg-gray-100 w-36 h-40 flex flex-col items-center justify-center rounded-t-lg shadow-md">
          <p class="font-bold text-xl">{{ top_teams[0].name }}</p>
          <p class="text-irish-green font-bold text-xl">{{ top_teams[0].points }} pts</p>
        </div>
      </div>
    {% endif %}
    
    <!-- 3rd Place -->
    {% if top_teams[2] %}
      <div class="flex flex-col items-center">
        <div class="w-16 h-16 rounded-full bg-[#CD7F32] shadow-md flex items-center justify-center mb-4">
          <span class="text-3xl font-bold text-white">3</span>
        </div>
        <div class="bg-gray-100 w-28 h-28 flex flex-col items-center justify-center rounded-t-lg">
          <p class="font-bold">{{ top_teams[2].name }}</p>
          <p class="text-irish-green font-bold">{{ top_teams[2].points }} pts</p>
        </div>
      </div>
    {% endif %}
  </div>
  
  <!-- Timeframe Indicator -->
  <div class="bg-irish-green bg-opacity-10 text-irish-green px-4 py-3 rounded-md text-center font-bold mb-6">
    Showing {{ time_label }} Rankings
  </div>
  
  <!-- Leaderboard Table -->
  <div class="bg-white rounded-lg shadow-md overflow-hidden">
    <table class="min-w-full">
      <thead class="bg-irish-green text-white">
        <tr>
          <th class="py-3 px-4 text-left">Rank</th>
          <th class="py-3 px-4 text-left">Team</th>
          <th class="py-3 px-4 text-right">Points</th>
          <th class="py-3 px-4 text-center">Change</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-200">
        {% for team in teams %}
          <tr class="{% if team.rank == 1 %}bg-golden-ale bg-opacity-10{% endif %} hover:bg-gray-50">
            <td class="py-3 px-4 font-bold">{{ team.rank }}</td>
            <td class="py-3 px-4">
              <a href="/teams/{{ team.id }}" class="text-irish-green hover:underline">{{ team.name }}</a>
            </td>
            <td class="py-3 px-4 text-right font-bold">{{ team.points }}</td>
            <td class="py-3 px-4 text-center">
              {% if team.change > 0 %}
                <span class="text-green-600"><i class="fas fa-arrow-up"></i> {{ team.change }}</span>
              {% elif team.change < 0 %}
                <span class="text-red-600"><i class="fas fa-arrow-down"></i> {{ team.change|abs }}</span>
              {% else %}
                <span class="text-gray-400">-</span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        
        {% if not teams %}
          <tr>
            <td colspan="4" class="py-8 text-center text-gray-500">No teams found. Start a quiz league to see rankings here!</td>
          </tr>
        {% endif %}
      </tbody>
    </table>
  </div>
  
  <!-- Team Formation CTA -->
  <div class="bg-irish-green rounded-lg shadow-md p-6 text-center text-white">
    <h3 class="text-xl font-garamond font-bold mb-2">Ready to join the rankings?</h3>
    <p class="mb-4">Create or join a team and start climbing the leaderboard today!</p>
    <a href="/teams/" class="inline-block bg-white text-irish-green font-bold px-6 py-2 rounded-md hover:bg-gray-100 transition">
      Join a Team
    </a>
  </div>
</div>
{% endblock %}