{% 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">
        <h4 class="py-2">{{ 'Score'|trans }}</h4>
        <div class="btn-toolbar" role="toolbar">
            <div class="btn-group btn-group-lg me-2">
                {# <a class="btn btn-primary">{{ 'Start Elimination'|trans }}</a> #}
                <a href="{{ path('app_prepare_elimination', {seasonCode: season.seasonCode, quiz: quiz.id}) }}"
                   class="btn btn-secondary">{{ 'Prepare Custom Elimination'|trans }}</a>
                {%~ if not quiz.eliminations.empty %}
                    <button class="btn btn-secondary dropdown-toggle"
                            data-bs-toggle="dropdown">{{ 'Load Prepared Elimination'|trans }}</button>
                    <ul class="dropdown-menu">
                        {%~ for elimination in quiz.eliminations %}
                            <li><a class="dropdown-item"
                                   href="{{ path('app_prepare_elimination_view', {elimination: elimination.id}) }}">{{ elimination.created|format_datetime() }}</a>
                            </li>
                        {%~ endfor %}
                    </ul>
                {% endif %}
            </div>
        </div>
        <p>{{ 'Number of dropouts:'|trans }}  {{ quiz.dropouts }} </p>
        <table class="table table-hover">
            <thead>
            <tr>
                <th scope="col">{{ 'Candidate'|trans }}</th>
                <th style="width: 15%" scope="col">{{ 'Correct Answers'|trans }}</th>
                <th style="width: 20%" scope="col">{{ 'Corrections'|trans }}</th>
                <th style="width: 10%" scope="col">{{ 'Score'|trans }}</th>
                <th style="width: 20%" 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.name }}</td>
                    <td>{{ candidate.correct|default('0') }}</td>
                    <td>
                        <form method="post"
                              action="{{ path('app_backoffice_modify_correction', {quiz: quiz.id, candidate: candidate.id}) }}">
                            <div class="row">
                                <div class="col-8">
                                    <input class="form-control form-control-sm" type="number"
                                           value="{{ candidate.corrections }}" step="0.5"
                                           name="corrections">
                                </div>
                                <div class="col-2">
                                    <button class="btn btn-sm btn-primary" type="submit">{{ 'Save'|trans }}</button>
                                </div>
                            </div>
                        </form>
                    </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 %}
    {{ parent() }}
    <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 %}