{% macro confirm_modal(id, target, body, formAction, csrfToken) %}
    <div class="modal fade" id="{{ id }}" data-bs-backdrop="static"
         tabindex="-1"
         data-bo--quiz-target="{{ target }}"
         aria-labelledby="{{ id }}Label" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="{{ id }}Label">{{ 'Please Confirm'|trans }}</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">{{ body }}</div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
                    <form action="{{ formAction }}" method="POST">
                        <input type="hidden" name="_token" value="{{ csrfToken }}">
                        <button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
{% endmacro %}

<div data-controller="bo--quiz">
    <h4 class="mb-3">
        {{ 'Quick actions'|trans }}
        {% if quiz.isFinalized %}
            <span class="badge text-bg-success">{{ 'Finalized'|trans }}</span>
        {% elseif quiz.isLocked %}
            <span class="badge text-bg-warning">{{ 'Locked (answers given)'|trans }}</span>
        {% else %}
            <span class="badge text-bg-secondary">{{ 'Draft'|trans }}</span>
        {% endif %}
    </h4>
    <div class="mb-3 btn-group">

        {% if quiz is same as (season.activeQuiz) %}
            <form action="{{ path('tvdt_backoffice_enable', {seasonCode: season.seasonCode, quiz: 'null'}) }}" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token('enable_quiz') }}">
                <input type="hidden" name="redirect_quiz" value="{{ quiz.id }}">
                <button type="submit" class="btn btn-secondary rounded-0 rounded-start">
                    {{ 'Deactivate Quiz'|trans }}
                </button>
            </form>
        {% else %}
            <form action="{{ path('tvdt_backoffice_enable', {seasonCode: season.seasonCode, quiz: quiz.id}) }}" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token('enable_quiz') }}">
                <button type="submit" class="btn btn-primary rounded-0 rounded-start"
                        {% if not quiz.isFinalized %}disabled data-bs-toggle="tooltip"
                        title="{{ 'The quiz must be finalized before it can be activated'|trans }}"{% endif %}>
                    {{ 'Make active'|trans }}
                </button>
            </form>
        {% endif %}
        {% if not quiz.isFinalized %}
            <form action="{{ path('tvdt_backoffice_quiz_finalize', {quiz: quiz.id}) }}" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token('finalize_quiz') }}">
                <button type="submit" class="btn btn-success rounded-0">
                    {{ 'Finalize'|trans }}
                </button>
            </form>
        {% elseif not quiz.hasStartedCandidates and quiz is not same as (season.activeQuiz) %}
            <form action="{{ path('tvdt_backoffice_quiz_unfinalize', {quiz: quiz.id}) }}" method="POST">
                <input type="hidden" name="_token" value="{{ csrf_token('unfinalize_quiz') }}">
                <button type="submit" class="btn btn-outline-success rounded-0">
                    {{ 'Undo finalization'|trans }}
                </button>
            </form>
        {% endif %}
        <button class="btn btn-danger" data-action="click->bo--quiz#clearQuiz">
            {{ 'Clear Quiz...'|trans }}
        </button>
        <button class="btn btn-danger rounded-0 rounded-end" data-action="click->bo--quiz#deleteQuiz">
            {{ 'Delete Quiz...'|trans }}
        </button>
    </div>

    <a class="btn btn-outline-secondary mb-3"
       href="{{ path('tvdt_backoffice_quiz_export', {quiz: quiz.id}) }}">
        {{ 'Export to XLSX'|trans }}
    </a>

    <h4 class="mb-3">{{ '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 questionError = questionErrors[question.id.toString] ?? null %}
                        <span
                            class="badge rounded-pill me-2{% if questionError %} text-bg-danger{% else %} invisible{% endif %}"{% if questionError %} data-bs-toggle="tooltip" title="{{ questionError }}"{% endif %}>!</span>
                        {{~ 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 }}
                                    {% if answer.candidates|length > 0 %}
                                        <small class="text-muted">
                                            ({{ answer.candidates|map(c => c.name)|join(', ') }})
                                        </small>
                                    {% endif %}
                                </li>
                            {%~ else %}
                                {{ 'There are no answers for this question'|trans -}}
                            {%~ endfor %}
                        </ul>
                    </div>
                </div>
            </div>
        {% else %}
            {{ 'EMPTY'|trans }}
        {% endfor %}
    </div>

    {{ _self.confirm_modal(
        'clearQuizModal',
        'clearModal',
        'Are you sure you want to clear all the results? This will also delete all the eliminations.'|trans,
        path('tvdt_backoffice_quiz_clear', {quiz: quiz.id}),
        csrf_token('clear_quiz'),
    ) }}

    {{ _self.confirm_modal(
        'deleteQuizModal',
        'deleteModal',
        'Are you sure you want to delete this quiz?'|trans,
        path('tvdt_backoffice_quiz_delete', {quiz: quiz.id}),
        csrf_token('delete_quiz'),
    ) }}
</div>