TijdVoorDeTest/templates/backoffice/quiz/tab_overview.html.twig

<h4 class="mb-3">Quick actions</h4>
<div class="mb-3 btn-group" data-controller="bo--quiz">

    {% if quiz is same as (season.activeQuiz) %}
        <a class="btn btn-secondary"
           href="{{ path('tvdt_backoffice_enable', {seasonCode: season.seasonCode, quiz: 'null'}) }}">{{ 'Deactivate Quiz'|trans }}</a>
    {% else %}
        <a class="btn btn-primary"
           href="{{ path('tvdt_backoffice_enable', {seasonCode: season.seasonCode, quiz: quiz.id}) }}">{{ 'Make active'|trans }}</a>
    {% endif %}
    <button class="btn btn-danger" data-action="click->bo--quiz#clearQuiz">
        {{ 'Clear Quiz...'|trans }}
    </button>
    <button class="btn btn-danger" data-action="click->bo--quiz#deleteQuiz">
        {{ 'Delete Quiz...'|trans }}
    </button>
</div>

<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>

<h4 class="mb-3 mt-4" id="candidates">{{ 'Candidates'|trans }}</h4>
<table class="table table-hover mb-3">
    <thead>
        <tr>
            <th scope="col">{{ 'Name'|trans }}</th>
            <th scope="col">{{ 'Quiz Status'|trans }}</th>
            <th scope="col">{{ 'Candidate Status'|trans }}</th>
            <th scope="col">{{ 'Actions'|trans }}</th>
        </tr>
    </thead>
    <tbody>
        {% for candidate in season.candidates %}
            {% set quizCandidate = null %}
            {% for qc in quiz.candidateData %}
                {% if qc.candidate.id.toString == candidate.id.toString %}
                    {% set quizCandidate = qc %}
                {% endif %}
            {% endfor %}

            {% set givenAnswersCount = 0 %}
            {% for givenAnswer in candidate.givenAnswers %}
                {% if givenAnswer.quiz.id.toString == quiz.id.toString %}
                    {% set givenAnswersCount = givenAnswersCount + 1 %}
                {% endif %}
            {% endfor %}

            <tr>
                <td>{{ candidate.name }}</td>
                <td>
                    {% if quizCandidate and quizCandidate.started %}
                        {% if givenAnswersCount >= quiz.questions|length %}
                            <span class="badge text-bg-success">{{ 'Completed'|trans }}</span>
                        {% else %}
                            <span class="badge text-bg-warning">{{ 'In Progress'|trans }} ({{ givenAnswersCount }}/{{ quiz.questions|length }})</span>
                        {% endif %}
                    {% else %}
                        <span class="badge text-bg-secondary">{{ 'Not Started'|trans }}</span>
                    {% endif %}
                </td>
                <td>
                    {% if quizCandidate == null or quizCandidate.active %}
                        <span class="badge text-bg-success">{{ 'Active'|trans }}</span>
                    {% else %}
                        <span class="badge text-bg-secondary">{{ 'Inactive'|trans }}</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ path('tvdt_backoffice_toggle_candidate', {quiz: quiz.id, candidate: candidate.id}) }}"
                       class="btn btn-sm btn-outline-secondary">
                        {% if quizCandidate == null or quizCandidate.active %}
                            {{ 'Deactivate'|trans }}
                        {% else %}
                            {{ 'Activate'|trans }}
                        {% endif %}
                    </a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
</table>

{# Modal Clear #}
<div class="modal fade" id="clearQuizModal" data-bs-backdrop="static"
     tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ 'Please Confirm'|trans }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ 'Are you sure you want to clear all the results? This will also delete al the eliminations.'|trans }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
                <a href="{{ path('tvdt_backoffice_quiz_clear', {quiz: quiz.id}) }}"
                   class="btn btn-danger">{{ 'Yes'|trans }}</a>
            </div>
        </div>
    </div>
</div>

{# Modal Delete #}
<div class="modal fade" id="deleteQuizModal" data-bs-backdrop="static"
     tabindex="-1"
     aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h1 class="modal-title fs-5" id="staticBackdropLabel">{{ 'Please Confirm'|trans }}</h1>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                {{ 'Are you sure you want to delete this quiz?'|trans }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
                <a href="{{ path('tvdt_backoffice_quiz_delete', {quiz: quiz.id}) }}"
                   class="btn btn-danger">{{ 'Yes'|trans }}</a>
            </div>
        </div>
    </div>
</div>