{% extends "base.html" %}
{% block title %}{{ quiz.title }}{% endblock %}

{% block content %}
<div class="quiz-play-wrap">
  <div class="quiz-play-header">
    <span class="quiz-play-title">{{ quiz.icon }} {{ quiz.title }}</span>
    <div class="progress-bar-wrap">
      <div class="progress-bar" id="progress-bar" style="width:0%"></div>
    </div>
    <span class="progress-text" id="progress-text">1 / {{ quiz.questions|length }}</span>
  </div>

  <form method="post" id="quiz-form" action="{{ url_for('public.quiz_play', quiz_id=quiz.id) }}">
    {% for i, q in quiz.questions | enumerate %}
    <div class="question-block" data-index="{{ i }}" {% if i > 0 %}hidden{% endif %}>
      <p class="question-num">Question {{ i + 1 }} / {{ quiz.questions|length }}</p>
      <h2 class="question-text">{{ q.text }}</h2>
      <div class="choices">
        {% for j, choice in q.choices | enumerate %}
        <label class="choice-label" id="label-{{ i }}-{{ j }}">
          <input type="radio" name="q{{ i }}" value="{{ j }}"
                 onchange="onChoice({{ i }}, {{ j }})">
          <span class="choice-letter">{{ ['A','B','C','D'][j] }}</span>
          <span class="choice-text">{{ choice }}</span>
        </label>
        {% endfor %}
      </div>
      <input type="hidden" name="q{{ i }}" id="ans-{{ i }}" value="">
    </div>
    {% endfor %}

    <div class="quiz-nav">
      <button type="button" id="btn-prev" class="btn btn-outline" onclick="navigate(-1)" hidden>
        ← Précédente
      </button>
      <button type="button" id="btn-next" class="btn btn-primary" onclick="navigate(1)">
        Suivante →
      </button>
      <button type="submit" id="btn-submit" class="btn btn-success" hidden>
        Terminer le quiz ✓
      </button>
    </div>
  </form>
</div>

<script id="quiz-data" type="application/json">{{ quiz_json | safe }}</script>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='quiz.js') }}"></script>
{% endblock %}