{% extends "base.html" %}
{% block title %}{{ t('leaderboard') }} — {{ t('brand') }}{% endblock %}
{% block content %}
<h2 style="margin-bottom:0.5rem;font-size:1.1rem">{{ t('leaderboard') }}</h2>

<div class="flex mb" style="margin-bottom:0.8rem;gap:0.3rem;flex-wrap:wrap">
  {% for g in games %}
  <a href="{{ url_for('web.leaderboard', game_id=g.id) }}"
     class="btn btn-outline btn-sm {% if game and g.id == game.id %}active{% endif %}"
     style="border-color:{{ 'var(--p)' if game and g.id==game.id else 'var(--border)' }};padding:0.3rem 0.6rem;font-size:0.72rem">
    {{ g.name }}
  </a>
  {% endfor %}
</div>

{% if game %}
<div class="card animate-in" style="margin-bottom:0.6rem;padding:0.5rem 0.7rem;border-color:rgba(245,158,11,0.18)">
  <div style="color:var(--w);font-size:0.75rem">{{ t('minimum_hours') }} · {{ t('minimum_month') }}</div>
</div>

<div class="table-wrap animate-in">
  <table>
    <thead><tr>
      <th>#</th><th>{{ t('player_username') }}</th>
      <th>{{ t('matches_played') }}</th><th>{{ t('wins') }}</th><th>{{ t('losses') }}</th>
      <th>{{ t('win_rate') }}</th><th>{{ t('play_time') }}</th><th>{{ t('eligible') }}</th>
    </tr></thead>
    <tbody>
      {% for e in entries[:30] %}
      <tr>
        <td style="font-family:'Orbitron';font-weight:800;font-size:0.82rem;color:{{ ['#FFD700','#C0C0C0','#CD7F32'][e.rank-1] if e.rank<=3 else 'var(--txt)' }}">{{ e.rank }}</td>
        <td style="font-size:0.78rem"><strong>{{ e.user.display_name if e.user else 'N/A' }}</strong></td>
        <td>{{ e.matches_played or 0 }}</td>
        <td style="color:var(--p);font-weight:700">{{ e.wins or 0 }}</td>
        <td style="color:var(--d)">{{ e.losses or 0 }}</td>
        <td><span class="badge badge-green">{{ e.win_rate }}%</span></td>
        <td>{{ e.play_time_hours }}h</td>
        <td><span class="badge {% if e.qualified %}badge-green{% else %}badge-red{% endif %}">{{ 'Y' if e.qualified else 'N' }}</span></td>
      </tr>
      {% else %}
      <tr><td colspan="8" style="text-align:center;color:var(--mute);padding:1rem">{{ t('no_data') }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% else %}
<div class="card text-center animate-in" style="color:var(--dim);padding:2rem">
  <div>{{ t('select_game_first') }}</div>
</div>
{% endif %}
{% endblock %}