{% extends "base.html" %}
{% block extra_head %}
<link rel="stylesheet" href="{{ static_url('/static/css/quiz.css') }}">
{% endblock %}
{% block content %}
{% set _attempt_url = quiz.url ~ '/attempts/' ~ attempt.uid %}
<div class="quiz-play-page">
    <a href="{{ quiz.url }}" class="back-link">&larr; Back to the quiz</a>

    {% if quiz_error %}
    <div class="quiz-banner quiz-banner-error" role="alert">{{ quiz_error }}</div>
    {% endif %}

    {% if attempt.status == 'expired' %}
    <div class="quiz-banner quiz-banner-locked" role="status">This attempt ran out of time and was closed.</div>
    {% elif attempt.status == 'completed' %}
    <div class="quiz-banner quiz-banner-done" role="status">This attempt is finished. <a href="{{ _attempt_url }}/results">See the result</a>.</div>
    {% endif %}

    <dp-quiz-player data-attempt-url="{{ _attempt_url }}"
                    data-remaining="{{ attempt.remaining_seconds }}"
                    data-has-limit="{{ 1 if attempt.expires_at else 0 }}"
                    data-status="{{ attempt.status }}">
        <header class="quiz-play-head">
            <h1 class="rendered-title">{{ render_title(quiz.title) }}</h1>
            <div class="quiz-hud">
                <span class="quiz-hud-item" data-quiz-progress>{{ attempt.answered_count }} / {{ attempt.question_count }} answered</span>
                <span class="quiz-hud-item" data-quiz-score>{{ format_number(attempt.score_points) }} / {{ attempt.max_points }} points</span>
                {% if attempt.expires_at %}
                <span class="quiz-hud-item quiz-hud-timer" data-quiz-timer role="timer">{{ format_duration(attempt.remaining_seconds) }}</span>
                {% endif %}
            </div>
        </header>

        <div class="quiz-slides" data-quiz-slides>
            {% for question in attempt.questions %}
            {% set _question = question %}{% set _mode = "player" %}{% include "_quiz_question.html" %}
            {% endfor %}
        </div>

        <div class="quiz-play-actions">
            <form method="POST" action="{{ _attempt_url }}/finish" class="inline-form" data-quiz-finish-form>
                <button type="submit" class="btn btn-primary"
                        data-confirm="Finish this attempt and see your score?"
                        {% if attempt.status != 'in_progress' %}disabled{% endif %}>Finish attempt</button>
            </form>
            <a href="{{ _attempt_url }}/results" class="btn btn-secondary">Results</a>
        </div>
    </dp-quiz-player>
</div>
{% endblock %}