{% extends "backoffice/base.html" %}
{% load i18n %}
{% block body %}
    <p>
        <h2>{% translate "Quiz" %}: {{ quiz.season.name }} - {{ quiz.name }}</h2>
    </p>
    <div id="questions">
        <p>
            <h4>{% translate "Questions" %}</h4>
        </p>
        <div class="accordion">
            {% for question in quiz.questions.all %}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#question-{{ forloop.counter0 }}"
                                aria-controls="question-{{ forloop.counter0 }}">
                            {% with question_error=question.errors %}
                                {% if question_error %}
                                    <span data-bs-toggle="tooltip"
                                          title="{{ question_error }}"
                                          class="badge text-bg-danger rounded-pill me-2">!</span>
                                {% endif %}
                            {% endwith %}
                            {{ forloop.counter }}. {{ question.question }}
                        </button>
                    </h2>
                    <div id="question-{{ forloop.counter0 }}"
                         class="accordion-collapse collapse">
                        <div class="accordion-body">
                            {% for answer in question.answers.all %}
                                <li {% if answer.is_right_answer %}class="text-decoration-underline"{% endif %}>{{ answer.text }}</li>
                            {% empty %}
                                {% translate "There are no answers for this question" %}
                            {% endfor %}
                        </div>
                    </div>
                </div>
            {% empty %}
                EMPTY
            {% endfor %}
        </div>
    </div>
    <div class="scores">
        <p>
            <h4>{% translate "Score" %}</h4>
        </p>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-lg me-2">
                <a class="btn btn-primary">{% translate "Start Elimination" %}</a>
            </div>
            <div class="btn-group btn-group-lg">
                <a class="btn btn-secondary">{% translate "Prepare Custom Elimination" %}</a>
                <a class="btn btn-secondary">{% translate "Load Prepared Elimination" %}</a>
            </div>
        </div>
        <p>{% translate "Number of dropouts:" %} {{ quiz.dropouts }}</p>
        <table class="table table-hover">
            <thead>
                <tr>
                    <th scope="col">{% translate "Candidate" %}</th>
                    <th scope="col">{% translate "Correct Answers" %}</th>
                    <th scope="col">{% translate "Corrections" %}</th>
                    <th scope="col">{% translate "Score" %}</th>
                    <th scope="col">{% translate "Time" %}</th>
                </tr>
            </thead>
            <tbody>
                {% with result=quiz.get_score %}
                    {% for candidate in result %}
                        <tr class="table-{% if forloop.revcounter > quiz.dropouts %}success{% else %}danger{% endif %}">
                            <td>{{ candidate.name }}</td>
                            <td>{{ candidate.correct }}</td>
                            <td>{{ candidate.corrections }}</td>
                            <td>{{ candidate.score }}</td>
                            <td>{{ candidate.time }}</td>
                        </tr>
                    {% empty %}
                    {% endfor %}
                </tbody>
            </table>
        {% endwith %}
    </div>
{% endblock body %}
{% block script %}
    <script>
        const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
        const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
    </script>
{% endblock script %}