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

{% block body %}
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card shadow-sm">
        <div class="card-body">
          <h3 class="card-title mb-4 text-center">¡Pon a prueba tus multiplicaciones!</h3>
          
          <!-- Temporizador: texto + barra de progreso -->
          <div class="mb-3">
            <span id="tiempo-texto" class="fs-5">60 segundos restantes</span>
            <div class="progress mt-1">
              <div id="barra-tiempo" class="progress-bar bg-success" role="progressbar" 
                   style="width: 100%" aria-valuenow="60" aria-valuemin="0" aria-valuemax="60">
              </div>
            </div>
          </div>

          <!-- Contador de aciertos -->
          <div class="mb-3">
            <span class="fs-6">Aciertos: <span id="contador-aciertos">0</span></span>
          </div>

          <!-- Enunciado de la multiplicación -->
          <div class="mb-3">
            <label for="input-respuesta" class="form-label fs-5" id="enunciado">¿Cuánto es 0 × 0?</label>
            <input type="number" id="input-respuesta" class="form-control" autocomplete="off" />
          </div>

          <!-- Mensaje de feedback (correcto/incorrecto) -->
          <div id="feedback" class="mb-3" style="min-height: 1.5em;"></div>

          <!-- Botón oculto inicialmente, para reiniciar o ver ranking -->
          <div id="boton-final" class="text-center mt-4 d-none">
            <button id="ver-ranking" class="btn btn-primary">Ver Ranking</button>
            <button id="jugar-otra" class="btn btn-secondary ms-2">Jugar otra vez</button>
          </div>

          <!-- Formulario para que el usuario escriba nombre si entra en top 10 -->
          <div id="form-nombre" class="mt-4 d-none">
            <p class="mb-2">¡Felicidades! Entraste en el Top 10. Escribe tu nombre:</p>
            <div class="input-group">
              <input type="text" id="input-nombre" class="form-control" maxlength="20" />
              <button id="guardar-nombre" class="btn btn-success">Guardar</button>
            </div>
            <div id="mensaje-guardar" class="mt-2"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
  <!-- Importar el archivo JS que contiene la lógica del juego -->
  <script src="{{ url_for('static', filename='js/game.js') }}"></script>
{% endblock %}