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

<div class="row">
    <div class="col-md-6 col-12">
        <div class="mb-3">
            <a class="btn btn-sm btn-outline-primary"
               href="{{ path('tvdt_backoffice_add_candidates', {seasonCode: season.seasonCode}) }}">{{ 'Add Candidate'|trans }}</a>
        </div>
        <ul class="list-group mb-3">
            {% for candidate in season.candidates %}
                <li class="list-group-item d-flex align-items-center justify-content-between gap-2">
                    {{ candidate.name }}
                    <div class="btn-group btn-group-sm" role="group">
                        <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal"
                                data-bs-target="#renameCandidate-{{ candidate.id }}"
                                title="{{ 'Rename'|trans }}"><i class="bi bi-pencil"></i></button>
                        <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal"
                                data-bs-target="#deleteCandidate-{{ candidate.id }}"
                                title="{{ 'Delete'|trans }}"><i class="bi bi-trash"></i></button>
                    </div>

                    <div class="modal fade" id="renameCandidate-{{ candidate.id }}" data-bs-backdrop="static"
                         tabindex="-1" aria-labelledby="renameCandidate-{{ candidate.id }}Label" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <form action="{{ path('tvdt_backoffice_candidate_rename', {seasonCode: season.seasonCode, candidate: candidate.id}) }}"
                                      method="POST">
                                    <div class="modal-header">
                                        <h1 class="modal-title fs-5" id="renameCandidate-{{ candidate.id }}Label">{{ 'Rename candidate'|trans }}</h1>
                                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                                    </div>
                                    <div class="modal-body text-start">
                                        <input type="hidden" name="_token" value="{{ csrf_token('rename_candidate') }}">
                                        <label class="form-label" for="renameCandidateName-{{ candidate.id }}">{{ 'Name'|trans }}</label>
                                        <input type="text" class="form-control" id="renameCandidateName-{{ candidate.id }}"
                                               name="name" value="{{ candidate.name }}" maxlength="16" required autofocus>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Cancel'|trans }}</button>
                                        <button type="submit" class="btn btn-primary">{{ 'Rename'|trans }}</button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>

                    <div class="modal fade" id="deleteCandidate-{{ candidate.id }}" data-bs-backdrop="static"
                         tabindex="-1" aria-labelledby="deleteCandidate-{{ candidate.id }}Label" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <h1 class="modal-title fs-5" id="deleteCandidate-{{ candidate.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 candidate? All their answers will be lost.'|trans }}
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'No'|trans }}</button>
                                    <form action="{{ path('tvdt_backoffice_candidate_delete', {seasonCode: season.seasonCode, candidate: candidate.id}) }}"
                                          method="POST">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete_candidate') }}">
                                        <button type="submit" class="btn btn-danger">{{ 'Yes'|trans }}</button>
                                    </form>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            {% else %}
                {{ 'No candidates'|trans }}
            {% endfor %}
        </ul>
    </div>
    <div class="col-md-6 col-12">
        {{ include('backoffice/help/season_candidates.html.twig') }}
    </div>
</div>