{% extends 'base.html.twig' %}

{% block title %}Quizz hymnes | LPF 2026{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/anthem-quiz.css') }}?v=2">
{% endblock %}

{% block body %}
    <section class="ta-topbar">
        <div>
            <h1 class="ta-page-title">Quizz hymnes</h1>
            <p class="ta-page-subtitle">
                Écoutez un extrait d’hymne national et retrouvez le bon drapeau parmi les propositions.
            </p>
        </div>
    </section>

    <section class="ta-card anthem-quiz-card" data-anthem-quiz-root>
        {% if is_admin_preview %}
            <p class="anthem-quiz-admin-note">
                <i class="ti ti-lock" aria-hidden="true"></i>
                Mode test admin : ce quizz n’est visible que pour les administrateurs tant que l’édition est marquée « réservée aux admins ».
            </p>
        {% endif %}

        <div class="anthem-quiz-status" data-anthem-quiz-status>
            {% if quiz_status.edition %}
                <p class="anthem-quiz-status__edition">{{ quiz_status.edition.title }}</p>
                <p class="anthem-quiz-status__meta">
                    {{ quiz_status.edition.questionsCount }} question{{ quiz_status.edition.questionsCount > 1 ? 's' : '' }}
                    · {{ quiz_status.edition.choicesCount }} drapeaux par question
                </p>
            {% endif %}

            {% if quiz_status.canPlay %}
                <button type="button" class="ta-btn ta-btn-primary" data-anthem-quiz-start>
                    {% if quiz_status.attempt and not quiz_status.attempt.finished %}
                        Reprendre la partie
                    {% else %}
                        Commencer le quizz
                    {% endif %}
                </button>
            {% else %}
                <p class="anthem-quiz-status__message">{{ quiz_status.reason }}</p>
                {% if quiz_status.attempt and quiz_status.attempt.finished %}
                    <p class="anthem-quiz-final-score">
                        Votre score : <strong>{{ quiz_status.attempt.score|number_format(0, ',', ' ') }}</strong> points
                    </p>
                {% endif %}
            {% endif %}
        </div>

        <div class="anthem-quiz-game" data-anthem-quiz-game hidden>
            <div class="anthem-quiz-progress">
                <span data-anthem-quiz-progress-label>Question 1 / 10</span>
                <span data-anthem-quiz-score-label>Score : 0</span>
            </div>

            <div class="anthem-quiz-audio">
                <audio controls preload="none" data-anthem-quiz-audio></audio>
                <p class="anthem-quiz-audio__hint">Extrait audio (~30 s). Écoutez avant de répondre.</p>
            </div>

            <div class="anthem-quiz-feedback" data-anthem-quiz-feedback hidden></div>

            <div class="anthem-quiz-choices" data-anthem-quiz-choices></div>
        </div>

        <div class="anthem-quiz-result" data-anthem-quiz-result hidden>
            <h2 class="ta-card-title">Partie terminée</h2>
            <p class="anthem-quiz-final-score">
                Score final : <strong data-anthem-quiz-final-score>0</strong> points
            </p>
        </div>
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/anthem-quiz.js') }}?v=1" defer></script>
{% endblock %}