{% extends "base.html" %}
{% block title %}Leaders — Solitaire Hockey{% endblock %}

{% block content %}
<div class="page">
  <h1>League Leaders</h1>

  <div class="filters">
    <label>Season</label>
    <select class="filter" onchange="applyFilters()">
      <option value="">All seasons</option>
      {% for s in seasons %}
      <option value="{{ s }}" {% if s == current_season %}selected{% endif %}>
        {{ s[:4] }}-{{ s[4:] }}
      </option>
      {% endfor %}
    </select>
  </div>

  <!-- Points: full width, first -->
  <div class="card" style="margin-bottom:1rem;">
    <div class="section-title">Points</div>
    {% if leaders.points %}
    <table>
      <thead><tr>
        <th data-sort>Player</th><th data-sort>Team</th>
        <th class="num" data-sort>GP</th><th class="num" data-sort>G</th>
        <th class="num" data-sort>A</th><th class="num" data-sort>PTS</th>
      </tr></thead>
      <tbody>
        {% for p in leaders.points %}
        <tr>
          <td><a href="/player/{{ p.player_id }}">{{ p.player_name }}</a></td>
          <td>{{ p.team_tricode }}</td>
          <td class="num">{{ p.gp }}</td>
          <td class="num">{{ p.goals }}</td>
          <td class="num">{{ p.assists }}</td>
          <td class="num" style="font-weight:700;color:#fbbf24;">{{ p.points }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
    {% else %}<p class="empty">No data yet.</p>{% endif %}
  </div>

  <!-- Goals and Assists: 50/50 -->
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;">
    <div class="card">
      <div class="section-title">Goals</div>
      {% if leaders.goals %}
      <table>
        <thead><tr>
          <th data-sort>Player</th><th data-sort>Team</th>
          <th class="num" data-sort>GP</th><th class="num" data-sort>G</th>
        </tr></thead>
        <tbody>
          {% for p in leaders.goals %}
          <tr>
            <td><a href="/player/{{ p.player_id }}">{{ p.player_name }}</a></td>
            <td>{{ p.team_tricode }}</td>
            <td class="num">{{ p.gp }}</td>
            <td class="num" style="font-weight:700;color:#fbbf24;">{{ p.goals }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}<p class="empty">No data yet.</p>{% endif %}
    </div>

    <div class="card">
      <div class="section-title">Assists</div>
      {% if leaders.assists %}
      <table>
        <thead><tr>
          <th data-sort>Player</th><th data-sort>Team</th>
          <th class="num" data-sort>GP</th><th class="num" data-sort>A</th>
        </tr></thead>
        <tbody>
          {% for p in leaders.assists %}
          <tr>
            <td><a href="/player/{{ p.player_id }}">{{ p.player_name }}</a></td>
            <td>{{ p.team_tricode }}</td>
            <td class="num">{{ p.gp }}</td>
            <td class="num" style="font-weight:700;color:#fbbf24;">{{ p.assists }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}<p class="empty">No data yet.</p>{% endif %}
    </div>
  </div>

  <!-- Save % and GAA: 50/50 -->
  <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
    <div class="card">
      <div class="section-title">Save % <span style="font-weight:400;color:#5a6070;">(min. 5 GP)</span></div>
      {% if leaders.sv_pct %}
      <table>
        <thead><tr>
          <th data-sort>Goalie</th><th data-sort>Team</th>
          <th class="num" data-sort>GP</th><th class="num" data-sort>SA</th>
          <th class="num" data-sort>GA</th><th class="num" data-sort>SV%</th>
        </tr></thead>
        <tbody>
          {% for g in leaders.sv_pct %}
          <tr>
            <td><a href="/player/{{ g.player_id }}">{{ g.player_name }}</a></td>
            <td>{{ g.team_tricode }}</td>
            <td class="num">{{ g.gp }}</td>
            <td class="num">{{ g.sa }}</td>
            <td class="num">{{ g.ga }}</td>
            <td class="num" style="font-weight:700;color:#fbbf24;">{{ "%.3f"|format(g.sv_pct) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}<p class="empty">No data yet (need 5+ GP).</p>{% endif %}
    </div>

    <div class="card">
      <div class="section-title">Goals Against Average <span style="font-weight:400;color:#5a6070;">(min. 5 GP)</span></div>
      {% if leaders.gaa %}
      <table>
        <thead><tr>
          <th data-sort>Goalie</th><th data-sort>Team</th>
          <th class="num" data-sort>GP</th><th class="num" data-sort>GA</th>
          <th class="num" data-sort>GAA</th>
        </tr></thead>
        <tbody>
          {% for g in leaders.gaa %}
          <tr>
            <td><a href="/player/{{ g.player_id }}">{{ g.player_name }}</a></td>
            <td>{{ g.team_tricode }}</td>
            <td class="num">{{ g.gp }}</td>
            <td class="num">{{ g.ga }}</td>
            <td class="num" style="font-weight:700;color:#fbbf24;">{{ "%.2f"|format(g.gaa) }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
      {% else %}<p class="empty">No data yet (need 5+ GP).</p>{% endif %}
    </div>
  </div>

</div>
{% endblock %}

{% block scripts %}
<script>
function applyFilters() {
  const season = document.querySelector('select.filter').value;
  const params = new URLSearchParams();
  if (season) params.set('season', season);
  window.location = '/leaders' + (params.toString() ? '?' + params : '');
}
</script>
{% endblock %}