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

    <h1 class="rendered-title">{{ render_title(quiz.title) }}</h1>

    <section class="quiz-score-card">
        <div class="quiz-score-headline">
            <span class="quiz-score-percent">{{ format_number(attempt.score_percent) }}%</span>
            <span class="quiz-score-points">{{ format_number(attempt.score_points) }} / {{ attempt.max_points }} points</span>
        </div>
        {% if attempt.pass_percent %}
        <div class="quiz-verdict{% if attempt.passed %} quiz-verdict-pass{% else %} quiz-verdict-fail{% endif %}">
            {% if attempt.passed %}Passed{% else %}Not passed{% endif %} - pass mark {{ attempt.pass_percent }}%
        </div>
        {% endif %}
        <div class="quiz-score-meta">
            <span>{{ attempt.answered_count }} of {{ attempt.question_count }} questions answered</span>
            <span>Status: {{ attempt.status }}</span>
            {% if attempt.completed_at %}<span>{{ dt_ago(attempt.completed_at) }}</span>{% endif %}
        </div>
        {% if fallback_count %}
        <p class="quiz-grade-fallback" role="status">
            {{ fallback_count }} answer{% if fallback_count != 1 %}s were{% else %} was{% endif %}
            scored by the deterministic fallback because automatic review was unavailable.
        </p>
        {% endif %}
    </section>

    {% if review %}
    <section class="quiz-review" aria-label="Answer review">
        <h2>Review</h2>
        {% for question in review %}
        {% set _question = question %}{% include "_quiz_answer_review.html" %}
        {% endfor %}
    </section>
    {% else %}
    <p class="quiz-review-disabled">The author of this quiz turned per-answer review off.</p>
    {% endif %}

    <div class="quiz-results-actions">
        <form method="POST" action="{{ quiz.url }}/attempts" class="inline-form">
            <button type="submit" class="btn btn-primary">Play again</button>
        </form>
        <a href="{{ quiz.url }}#leaderboard" class="btn btn-secondary">Leaderboard</a>
        <a href="/quizzes" class="btn btn-secondary">All quizzes</a>
    </div>
</div>
{% endblock %}