{% extends "base.html" %}
{% block title %}AI GameDay — Leaderboard{% endblock %}
{% block content %}
<div class="page-header" style="margin-bottom:24px;">
  <h1 style="margin:0;font-size:1.6rem;">🏆 GameDay Leaderboard</h1>
  <p style="margin:4px 0 0;color:var(--text-muted,#8b949e);">All-time player participation across sessions</p>
</div>

{% if entries %}
<div class="card" style="overflow:auto;">
  <table style="width:100%;border-collapse:collapse;font-size:0.9rem;">
    <thead>
      <tr style="border-bottom:1px solid var(--border-color,#30363d);text-align:left;">
        <th style="padding:10px 14px;">#</th>
        <th style="padding:10px 14px;">Player</th>
        <th style="padding:10px 14px;">Role</th>
        <th style="padding:10px 14px;">Team</th>
        <th style="padding:10px 14px;">Session</th>
      </tr>
    </thead>
    <tbody>
      {% for e in entries %}
      <tr style="border-bottom:1px solid var(--border-color,#21262d);">
        <td style="padding:9px 14px;color:var(--text-muted,#8b949e);">{{ loop.index }}</td>
        <td style="padding:9px 14px;font-weight:600;">{{ e.player_name }}</td>
        <td style="padding:9px 14px;">
          <span style="background:var(--bg-tertiary,#161b22);border-radius:4px;padding:2px 7px;font-size:0.8rem;">{{ e.role_id }}</span>
        </td>
        <td style="padding:9px 14px;">{{ e.team_name }}</td>
        <td style="padding:9px 14px;color:var(--text-muted,#8b949e);">{{ e.session_name }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card" style="text-align:center;padding:48px;color:var(--text-muted,#8b949e);">
  <p style="font-size:2rem;margin-bottom:8px;">🎮</p>
  <p>No players yet. Start a session to build the leaderboard.</p>
  <a href="/gameday/" class="btn btn-primary" style="margin-top:12px;">Go to Sessions</a>
</div>
{% endif %}
{% endblock %}