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

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

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

  {% if not current_season %}
  <div class="card"><p class="empty">Select a season to view standings.</p></div>

  {% elif not standings %}
  <div class="card"><p class="empty">No team data found for this season. Make sure teams and team_seasons are populated.</p></div>

  {% else %}

  {% for conf in ['Eastern', 'Western'] %}
  {% if conf in standings %}
  <h2 style="color:#fff; margin:1.5rem 0 0.75rem;">{{ conf }} Conference</h2>

  {% for div in ['Atlantic','Northeast','Southeast','Central','Northwest','Pacific'] %}
  {% if div in standings[conf] %}
  <div class="card" style="margin-bottom:0.75rem;">
    <div class="section-title">{{ div }} Division</div>
    <table>
      <thead>
        <tr>
          <th data-sort>Team</th>
          <th class="num" data-sort>GP</th>
          <th class="num" data-sort>W</th>
          <th class="num" data-sort>L</th>
          <th class="num" data-sort>T</th>
          <th class="num" data-sort>PTS</th>
          <th class="num" data-sort>GF</th>
          <th class="num" data-sort>GA</th>
          <th class="num" data-sort>DIFF</th>
        </tr>
      </thead>
      <tbody>
        {% set div_teams = standings[conf][div] | sort(attribute='points', reverse=True) %}
        {% for team in div_teams %}
        {% set diff = (team.gf or 0) - (team.ga or 0) %}
        <tr>
          <td><a href="/team/{{ team.tricode }}_{{ current_season }}">{{ team.full_name }}</a></td>
          <td class="num">{{ team.gp or 0 }}</td>
          <td class="num badge-w">{{ team.wins or 0 }}</td>
          <td class="num badge-l">{{ team.losses or 0 }}</td>
          <td class="num badge-t">{{ team.ties or 0 }}</td>
          <td class="num" style="font-weight:700;color:#fff;">{{ team.points or 0 }}</td>
          <td class="num">{{ team.gf or 0 }}</td>
          <td class="num">{{ team.ga or 0 }}</td>
          <td class="num" style="color:{% if diff > 0 %}#34d399{% elif diff < 0 %}#f87171{% else %}#8892a4{% endif %}">
            {{ '+' if diff > 0 else '' }}{{ diff }}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
  {% endfor %}

  {% endif %}
  {% endfor %}

  {% endif %}
</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 = '/standings' + (params.toString() ? '?' + params : '');
}
</script>
{% endblock %}