templates/admin_predictions.html

{% extends 'base.html' %}
{% block title %}Match predictions – Admin – {{ app_brand }}{% endblock %}
{% block content %}
<div class="page">
  <div style="margin-bottom:1rem;">
    <a href="{{ url_for('admin') }}" style="color:var(--muted2); text-decoration:none; font-size:0.875rem;">← Back to Admin</a>
  </div>

  <!-- Match Header -->
  <div class="card" style="margin-bottom:1.5rem;">
    <div style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;">
      <div>
        <div style="font-family:var(--font-display); font-size:2rem;">
          <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="color:var(--muted2); font-size:0.9rem;">{{ match.team1 }} vs {{ match.team2 }}</div>
        <div style="color:var(--muted); font-size:0.85rem; margin-top:0.25rem;">
          Match #{{ match.match_number or '?' }} · {{ match.match_date }} · {{ match.match_time }}
          {% if match.venue %} · {{ match.venue }}{% endif %}
        </div>
      </div>
      <div style="text-align:right;">
        <span class="badge badge-{{ match.status }}">{{ match.status }}</span>
        {% if match.winner %}
        <div style="margin-top:0.5rem; color:var(--green); font-weight:700;">🏆 {{ match.winner }}</div>
        {% if match.man_of_match %}<div style="color:var(--muted2); font-size:0.85rem;">⭐ {{ match.man_of_match }}</div>{% endif %}
        {% endif %}
      </div>
    </div>
  </div>

  <!-- Summary -->
  {% set total = predictions|length %}
  {% set team1_picks = predictions|selectattr('predicted_winner','equalto',match.team1)|list|length %}
  {% set team2_picks = predictions|selectattr('predicted_winner','equalto',match.team2)|list|length %}
  {% set total_bid = predictions|sum(attribute='bid_amount') %}

  <div class="grid grid-4" style="margin-bottom:1.5rem;">
    <div class="stat-box">
      <div class="stat-value">{{ total }}</div>
      <div class="stat-label">Total Predictions</div>
    </div>
    <div class="stat-box">
      <div class="stat-value" style="color:{{ match.team1_color }};">{{ team1_picks }}</div>
      <div class="stat-label">{{ match.team1_abbr }} Picks</div>
    </div>
    <div class="stat-box">
      <div class="stat-value" style="color:{{ match.team2_color }};">{{ team2_picks }}</div>
      <div class="stat-label">{{ match.team2_abbr }} Picks</div>
    </div>
    <div class="stat-box">
      <div class="stat-value">{{ '%.0f'|format(total_bid) }}</div>
      <div class="stat-label">Total Points at Stake</div>
    </div>
  </div>

  <!-- Predictions table -->
  {% if predictions %}
  <div class="card">
    <div class="table-wrap">
      <table>
        <thead>
          <tr>
            <th>Player</th>
            <th>Winner Pick</th>
            <th>MOTM Pick</th>
            <th style="text-align:right;">Bid</th>
            <th>Winner?</th>
            <th>MOTM?</th>
            <th style="text-align:right;">P/L</th>
            <th>Submitted</th>
          </tr>
        </thead>
        <tbody>
          {% for p in predictions %}
          <tr>
            <td>
              <div style="font-weight:600;">{{ p.display_name or p.username }}</div>
              <div style="font-size:0.78rem; color:var(--muted);">@{{ p.username }}</div>
            </td>
            <td style="font-weight:600; color:var(--orange);">{{ p.predicted_winner }}</td>
            <td style="font-size:0.85rem; color:var(--muted2);">{{ p.predicted_motm or '—' }}</td>
            <td style="text-align:right; font-family:var(--font-mono); font-weight:700;">{{ '%.0f'|format(p.bid_amount) }}</td>
            <td style="text-align:center;">
              {% if p.is_settled %}
                {{ '✅' if p.winner_correct else '❌' }}
              {% else %}<span style="color:var(--muted);">—</span>{% endif %}
            </td>
            <td style="text-align:center;">
              {% if p.is_settled and p.motm_correct is not none %}
                {{ '✅' if p.motm_correct else '❌' }}
              {% else %}<span style="color:var(--muted);">—</span>{% endif %}
            </td>
            <td style="text-align:right;">
              {% if p.is_settled %}
              <span class="{{ p.points_earned|delta_class }}" style="font-family:var(--font-mono); font-weight:700;">{{ p.points_earned|delta_sign }}</span>
              {% else %}<span style="color:var(--muted);">Pending</span>{% endif %}
            </td>
            <td style="font-size:0.78rem; color:var(--muted2);">{{ p.updated_at[:16] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="empty-state card">
    <div class="icon">🎯</div>
    <div>No predictions for this match yet.</div>
  </div>
  {% endif %}
</div>
{% endblock %}