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

{% block content %}
<div class="page">
  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.25rem;">
    <h1 style="margin:0;">Schedule</h1>
    <a href="/schedule/import" class="btn-secondary" style="padding:0.4rem 0.9rem;border-radius:6px;font-size:0.82rem;font-weight:600;text-decoration:none;background:#2e3650;color:#e8eaf0;">Import CSV</a>
  </div>

  <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 next_game %}
  <div class="card" style="margin-bottom:1rem;border-color:#2563eb;">
    <div class="section-title">Next Unplayed Game</div>
    {% set ak = next_game.away_tricode + '_' + next_game.season %}
    {% set hk = next_game.home_tricode + '_' + next_game.season %}
    <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.5rem;">
      <span style="font-size:0.9rem;color:#e8eaf0;">
        Game {{ next_game.game_number }} &bull; {{ next_game.game_date }} &bull;
        {{ team_names.get(ak, next_game.away_tricode) }}
        <span style="color:#4e5a6e;">@</span>
        {{ team_names.get(hk, next_game.home_tricode) }}
      </span>
      <a href="/" style="padding:0.4rem 0.9rem;border-radius:6px;font-size:0.82rem;font-weight:600;text-decoration:none;background:#2563eb;color:#fff;">Play this game</a>
    </div>
  </div>
  {% endif %}

  {% if not current_season %}
  <div class="card"><p class="empty">Select a season to view the schedule.</p></div>
  {% elif not games %}
  <div class="card"><p class="empty">No schedule imported for this season yet. <a href="/schedule/import" style="color:#7ba7e0;">Import a CSV</a>.</p></div>
  {% else %}
  <div class="card">
    <table>
      <thead>
        <tr>
          <th data-sort>#</th>
          <th data-sort>Date</th>
          <th data-sort>Away</th>
          <th data-sort>Home</th>
          <th>Result</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for g in games %}
        {% set ak = g.away_tricode + '_' + g.season %}
        {% set hk = g.home_tricode + '_' + g.season %}
        {% set played = g.game_id is not none %}
        <tr style="{% if not played %}opacity:0.7{% endif %}">
          <td style="color:#5a6070;">{{ g.game_number }}</td>
          <td>{{ g.game_date }}</td>
          <td><a href="/team/{{ ak }}">{{ team_names.get(ak, g.away_tricode) }}</a></td>
          <td><a href="/team/{{ hk }}">{{ team_names.get(hk, g.home_tricode) }}</a></td>
          <td>
            {% if played %}
            <a href="/results?season={{ g.season }}" style="color:#34d399;font-size:0.78rem;">Played</a>
            {% else %}
            <span style="color:#4e5a6e;font-size:0.78rem;">—</span>
            {% endif %}
          </td>
          <td style="text-align:right;">
            {% if not played %}
            <a href="/" style="font-size:0.78rem;color:#7ba7e0;text-decoration:none;">Play</a>
            {% endif %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% 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 = '/schedule' + (params.toString() ? '?' + params : '');
}
</script>
{% endblock %}