{% extends 'base.html' %}
{% block title %}Matches – {{ app_brand }}{% endblock %}
{% block content %}
<div class="page">
  <div class="page-header">
    <div class="page-title">ALL MATCHES</div>
    <div class="page-subtitle">Full schedule &amp; your predictions — {{ app_brand }}</div>
  </div>

  <!-- Filters -->
  <form method="get" style="display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.5rem; align-items:flex-end;">
    <div>
      <label style="font-size:0.8rem; color:var(--muted2); display:block; margin-bottom:0.3rem;">Status</label>
      <select name="status" style="width:auto; padding:0.5rem 0.75rem;">
        <option value="">All</option>
        {% for s in statuses %}
        <option value="{{ s }}" {% if filter_status == s %}selected{% endif %}>{{ s|capitalize }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label style="font-size:0.8rem; color:var(--muted2); display:block; margin-bottom:0.3rem;">Date</label>
      <input type="date" name="date" value="{{ filter_date }}" style="width:auto; padding:0.5rem 0.75rem;">
    </div>
    <button type="submit" class="btn btn-secondary btn-sm">Filter</button>
    <a href="{{ url_for('matches') }}" class="btn btn-ghost btn-sm">Clear</a>
  </form>

  {% if matches %}
  <div class="card">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>#</th>
            <th>Teams</th>
            <th>Date & Time</th>
            <th>Venue</th>
            <th>Status</th>
            <th>Result</th>
            <th>Your Prediction</th>
            <th>P/L</th>
          </tr>
        </thead>
        <tbody>
          {% for match in matches %}
          {% set pred = pred_map.get(match.id) %}
          <tr>
            <td style="color:var(--muted); font-family:var(--font-mono);">
              {{ match.match_number or '—' }}
            </td>
            <td>
              <div style="font-weight:700;">
                <span style="color:{{ match.team1_color }};">{{ match.team1_abbr }}</span>
                <span style="color:var(--muted);"> vs </span>
                <span style="color:{{ match.team2_color }};">{{ match.team2_abbr }}</span>
              </div>
              <div style="font-size:0.75rem; color:var(--muted2);">{{ match.team1 }} vs {{ match.team2 }}</div>
            </td>
            <td style="white-space:nowrap;">
              <div>{{ match.match_date|format_date }}</div>
              <div style="font-size:0.8rem; color:var(--muted2);">{{ match.match_time }}</div>
            </td>
            <td style="font-size:0.85rem; color:var(--muted2);">
              {{ match.venue or '—' }}{% if match.city and match.venue %}<br>{% endif %}
              {% if match.city %}<span style="font-size:0.78rem;">{{ match.city }}</span>{% endif %}
            </td>
            <td><span class="badge badge-{{ match.status }}">{{ match.status }}</span></td>
            <td>
              {% if match.winner and match.winner != 'ABANDONED' %}
              <div style="font-weight:700; color:var(--green);">🏆 {{ match.winner }}</div>
              {% if match.man_of_match %}<div style="font-size:0.78rem; color:var(--muted2);">⭐ {{ match.man_of_match }}</div>{% endif %}
              {% elif match.status == 'abandoned' %}
              <span style="color:var(--muted);">Abandoned</span>
              {% else %}—{% endif %}
            </td>
            <td>
              {% if pred %}
              <div style="font-weight:600; color:var(--orange);">
                {{ team_abbr.get(pred.predicted_winner, pred.predicted_winner) }}
              </div>
              {% if pred.predicted_motm %}<div style="font-size:0.78rem; color:var(--muted2);">⭐ {{ pred.predicted_motm }}</div>{% endif %}
              <div style="font-size:0.78rem; font-family:var(--font-mono);">Bid: {{ '%.0f'|format(pred.bid_amount) }}</div>
              {% elif match.can_predict %}
              <a href="{{ url_for('predict', match_id=match.id) }}" class="btn btn-primary btn-sm">Predict</a>
              {% elif match.status == 'upcoming' %}
              <a href="{{ url_for('predict', match_id=match.id) }}" class="btn btn-ghost btn-sm" title="{% if not match.is_match_today %}Opens on match day{% else %}View{% endif %}">{% if not match.is_match_today %}📆 {{ match.match_date|format_date }}{% elif match.locked %}🔒 Locked{% else %}View{% endif %}</a>
              {% else %}
              <span style="color:var(--muted); font-size:0.85rem;">—</span>
              {% endif %}
            </td>
            <td>
              {% if pred and pred.is_settled %}
              <div class="{{ pred.points_earned|delta_class }}" style="font-family:var(--font-mono); font-weight:700;">
                {{ pred.points_earned|delta_sign }}
              </div>
              <div style="font-size:0.75rem; color:var(--muted);">
                W:{% if pred.winner_correct %}✅{% else %}❌{% endif %}
                {% if pred.motm_correct is not none %}M:{% if pred.motm_correct %}✅{% else %}❌{% endif %}{% endif %}
              </div>
              {% elif pred and not pred.is_settled %}
              <span style="color:var(--muted); font-size:0.8rem;">Pending</span>
              {% else %}—{% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="empty-state card">
    <div class="icon">📅</div>
    <div>No matches found for the selected filters.</div>
  </div>
  {% endif %}
</div>
{% endblock %}