{% extends "base.html" %}
{% block title %}Top 10 - Multiplic-a-t{% endblock %}

{% block body %}
  <div class="text-center mb-4">
    <h2>Top 10 de Puntuaciones</h2>
    <a href="{{ url_for('juego') }}" class="btn btn-sm btn-primary mt-2">Jugar de nuevo</a>
  </div>

  <div class="row justify-content-center">
    <div class="col-md-6">
      {% if top10 %}
        <table class="table table-striped">
          <thead>
            <tr>
              <th>#</th>
              <th>Nombre</th>
              <th>Puntuación</th>
            </tr>
          </thead>
          <tbody>
            {# Recorremos top10 sin enumerate; loop.index comienza en 1 #}
            {% for par in top10 %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>{{ par[0] }}</td> {# par[0] = nombre #}
                <td>{{ par[1] }}</td> {# par[1] = puntuación #}
              </tr>
            {% endfor %}
          </tbody>
        </table>
      {% else %}
        <p class="text-center">Aún no hay puntuaciones.</p>
      {% endif %}
    </div>
  </div>
{% endblock %}