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

{% block body %}
    <h2 class="py-2">{{ 'Quiz'|trans }}: {{ quiz.season.name }} - {{ quiz.name }}</h2>
    <div class="py-2 btn-group">
        <a class="btn btn-primary {% if quiz is same as(season.activeQuiz) %}disabled{% endif %}"
           href="{{ path('app_backoffice_enable', {seasonCode: season.seasonCode, quiz: quiz.id}) }}">{{ 'Make active'|trans }}</a>
        {% if quiz is same as (season.activeQuiz) %}
            <a class="btn btn-secondary"
               href="{{ path('app_backoffice_enable', {seasonCode: season.seasonCode, quiz: 'null'}) }}">{{ 'Deactivate Quiz'|trans }}</a>
        {% endif %}
    </div>

    <div id="questions">
        <h4 class="py-2">{{ 'Questions'|trans }}</h4>
        <div class="accordion">
            {% for question in quiz.questions %}
                <div class="accordion-item">
                    <h2 class="accordion-header">
                        <button class="accordion-button collapsed"
                                type="button"
                                data-bs-toggle="collapse"
                                data-bs-target="#question-{{ loop.index0 }}"
                                aria-controls="question-{{ loop.index0 }}">
                            {% set questionErrors = question.getErrors %}
                            {% if questionErrors %}
                                <span data-bs-toggle="tooltip"
                                      title="{{ questionErrors }}"
                                      class="badge text-bg-danger rounded-pill me-2">!</span>
                            {% endif %}
                            {{ loop.index }}. {{ question.question }}
                        </button>
                    </h2>
                    <div id="question-{{ loop.index0 }}"
                         class="accordion-collapse collapse">
                        <div class="accordion-body">
                            <ul>
                                {% for answer in question.answers %}
                                    <li {% if answer.isRightAnswer %}class="text-decoration-underline"{% endif %}>{{ answer.text }}</li>
                                {% else %}
                                    {{ 'There are no answers for this question'|trans }}
                                {% endfor %}
                            </ul>
                        </div>
                    </div>
                </div>
            {% else %}
                EMPTY
            {% endfor %}
        </div>
    </div>
    <div class="scores">
        <p>
        <h4>{{ 'Score'|trans }}</h4>
        </p>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-lg me-2">
                <a class="btn btn-primary">{{ 'Start Elimination'|trans }}</a>
            </div>
            <div class="btn-group btn-group-lg">
                <a href="{{ path('app_prepare_elimination', {seasonCode: season.seasonCode, quiz: quiz.id}) }}"
                   class="btn btn-secondary">{{ 'Prepare Custom Elimination'|trans }}</a>
                <a class="btn btn-secondary">{{ 'Load Prepared Elimination'|trans }}</a>
            </div>
        </div>
        <p>{{ 'Number of dropouts:'|trans }}  {{ quiz.dropouts }} </p>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">{{ 'Candidate'|trans }}</th>
                <th scope="col">{{ 'Correct Answers'|trans }}</th>
                <th scope="col">{{ 'Corrections'|trans }}</th>
                <th scope="col">{{ 'Score'|trans }}</th>
                <th scope="col">{{ 'Time'|trans }}</th>
            </tr>
            </thead>
            <tbody>
            {% for candidate in result %}
                <tr class="table-{% if loop.revindex > quiz.dropouts %}success{% else %}danger{% endif %}">
                    <td>{{ candidate.0.name }}</td>
                    <td>{{ candidate.correct|default('0') }}</td>
                    <td>{{ candidate.corrections|default('0') }}</td>
                    <td>{{ candidate.score|default('x') }}</td>
                    <td>{{ candidate.time }}</td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="5">{{ 'No results'|trans }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock %}
{% block javascripts %}
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
            const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
        });
    </script>
{% endblock javascripts %}
{% block title %}

{% endblock %}