TijdVoorDeTest/templates/backoffice/season/tab_question_bank.html.twig

<div class="d-flex align-items-center mb-3">
    <h4 class="mb-0 pe-2">{{ 'Question bank'|trans }}</h4>
    <a class="link" href="{{ path('tvdt_backoffice_question_bank_new', {seasonCode: season.seasonCode}) }}">{{ 'Add'|trans }}</a>
</div>

    <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
        <a class="badge rounded-pill text-decoration-none{% if activeLabel is null %} text-bg-primary{% else %} text-bg-secondary{% endif %}"
           href="{{ path('tvdt_backoffice_question_bank', {seasonCode: season.seasonCode}) }}">{{ 'All'|trans }}</a>
        {% for label in season.questionLabels %}
            <span class="d-inline-flex align-items-center gap-1">
                <a class="badge rounded-pill text-decoration-none{% if activeLabel is same as (label) %} text-bg-primary{% else %} text-bg-secondary{% endif %}"
                   href="{{ path('tvdt_backoffice_question_bank', {seasonCode: season.seasonCode, label: label.id}) }}">{{ label.name }}</a>
                <form action="{{ path('tvdt_backoffice_question_bank_label_delete', {seasonCode: season.seasonCode, label: label.id}) }}"
                      method="POST" class="d-inline">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete_question_label') }}">
                    <button type="submit" class="btn btn-sm btn-link p-0 text-danger" aria-label="{{ 'Remove label'|trans }}">&times;</button>
                </form>
            </span>
        {% endfor %}
        <form action="{{ path('tvdt_backoffice_question_bank_labels', {seasonCode: season.seasonCode}) }}"
              method="POST" class="d-inline-flex align-items-center gap-1">
            <input type="hidden" name="_token" value="{{ csrf_token('add_question_label') }}">
            <input type="text" class="form-control form-control-sm" name="name" maxlength="64"
                   placeholder="{{ 'New label'|trans }}" required>
            <button type="submit" class="btn btn-sm btn-outline-primary">{{ 'Add label'|trans }}</button>
        </form>
    </div>

        <table class="table align-middle">
        <thead>
        <tr>
            <th>{{ 'Question'|trans }}</th>
            <th>{{ 'Labels'|trans }}</th>
            <th>{{ 'Reusable'|trans }}</th>
            <th>{{ 'Used in'|trans }}</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        {% for bankQuestion in bankQuestions %}
            <tr>
                <td>{{ bankQuestion.question }}</td>
                <td>
                    {% for label in bankQuestion.labels %}
                        <span class="badge rounded-pill text-bg-secondary">{{ label.name }}</span>
                    {% endfor %}
                </td>
                <td>
                    {% if bankQuestion.reusable %}
                        <span class="badge text-bg-info">{{ 'Reusable'|trans }}</span>
                    {% endif %}
                </td>
                <td>
                    {{ bankQuestion.usages|map(usage => usage.quiz.name)|join(', ') }}
                </td>
                <td class="text-end">
                    <div class="d-inline-flex align-items-center gap-2">
                        {% if bankQuestion.canBeAssigned and assignableQuizzes|length > 0 %}
                            <form action="{{ path('tvdt_backoffice_question_bank_assign', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
                                  method="POST" class="d-inline-flex align-items-center gap-1">
                                <input type="hidden" name="_token" value="{{ csrf_token('assign_bank_question') }}">
                                <select class="form-select form-select-sm" name="quiz" required>
                                    {% for quiz in assignableQuizzes %}
                                        <option value="{{ quiz.id }}">{{ quiz.name }}</option>
                                    {% endfor %}
                                </select>
                                <button type="submit" class="btn btn-sm btn-outline-primary">{{ 'Assign'|trans }}</button>
                            </form>
                        {% endif %}
                        <a class="btn btn-sm btn-outline-secondary"
                           href="{{ path('tvdt_backoffice_question_bank_edit', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}">{{ 'Edit'|trans }}</a>
                        <button type="button" class="btn btn-sm btn-outline-danger" data-bs-toggle="modal"
                                data-bs-target="#deleteBankQuestion-{{ bankQuestion.id }}">{{ 'Delete'|trans }}</button>
                    </div>

                    <div class="modal fade" id="deleteBankQuestion-{{ bankQuestion.id }}" data-bs-backdrop="static"
                         tabindex="-1" aria-labelledby="deleteBankQuestion-{{ bankQuestion.id }}Label" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="deleteBankQuestion-{{ bankQuestion.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 text-start">
                                    {{ 'Are you sure you want to delete this question from the question bank?'|trans }}
                                    {% if bankQuestion.isUsed %}
                                        <br><strong>{{ 'This question has been used in a quiz. The copy in the quiz will not be affected.'|trans }}</strong>
                                    {% endif %}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
                                    <form action="{{ path('tvdt_backoffice_question_bank_delete', {seasonCode: season.seasonCode, bankQuestion: bankQuestion.id}) }}"
                                          method="POST">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete_bank_question') }}">
                                        <button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="5">{{ 'No questions in the question bank yet'|trans }}</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>