{% extends "@FerienpassAdmin/layout/base.html.twig" %}
{% trans_default_domain 'admin' %}
{% set title = 'eraseData.title' %}

{% block main %}

    <twig:Admin:PageHeader title="eraseData.title" subtitle="Recht auf Löschung und Recht auf Auskunft umsetzen." />

    <div class="py-6 max-w-3xl">

        {% if participants is empty %}

            <twig:Admin:Alert class="mt-6" type="error" message="eraseData.empty"/>

        {% else %}

            <div class="divide-y divide-gray-300 dark:divide-gray-600 space-y-6">

                <div class="mt-6">
                    <table class="w-full">
                        <thead>
                        <tr>
                            <th class="pr-4 py-3 border-b border-gray-200 dark:border-gray-700 text-left text-sm leading-4 font-medium text-gray-900 dark:text-white">
                                {{ 'eraseData.name'|trans }}
                            </th>
                            <th class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 text-left text-sm leading-4 font-medium text-gray-900 dark:text-white">
                                {{ 'eraseData.latestAttendance'|trans }}
                            </th>
                            <th class="px-4 py-3 border-b border-gray-200 dark:border-gray-700 text-left text-sm leading-4 font-medium text-gray-900 dark:text-white">
                                {{ 'eraseData.countAttendances'|trans }}
                            </th>
                            <th class="pl-4 py-3 border-b border-gray-200 dark:border-gray-700 text-left text-sm leading-4 font-medium text-gray-900 dark:text-white">
                                {{ 'eraseData.user'|trans }}
                            </th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for participant in participants %}
                            <tr class="border-t border-gray-200 dark:border-gray-800">
                                <td class="pr-4 py-2">
                                    <p class="text-sm leading-5 font-medium text-gray-700 dark:text-gray-100">
                                        {{ participant.name }}
                                    </p>
                                </td>
                                <td class="px-4 py-2">
                                    <p class="text-sm leading-5 font-medium text-gray-500 dark:text-gray-300">
                                        {% set attendance = participant.lastAttendance %}
                                        {{ (attendance and attendance.offer.edition) ? attendance.offer.edition.name : '-' }}
                                    </p>
                                </td>
                                <td class="px-4 py-2">
                                    <p class="text-sm leading-5 font-medium text-gray-500 dark:text-gray-300">
                                        {{ participant.attendances|length }}
                                    </p>
                                </td>
                                <td class="pl-4 py-2">
                                    <p class="text-sm leading-5 font-medium text-gray-500 dark:text-gray-300">
                                        {{ participant.user ? participant.user.name : '-' }}
                                    </p>
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>

                <div class="pt-6">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-50">
                        {{ 'eraseData.cta.headline'|trans }}
                    </h3>

                    <div class="mt-2 max-w-xl text-sm leading-5 text-gray-500 dark:text-gray-300">
                        <p>{{ 'eraseData.cta.text'|trans({count: participants|length}) }}</p>
                    </div>

                    <div class="mt-5">

                        {{ form_start(form) }}
                        <button type="submit"
                                class="inline-flex items-center justify-center px-4 py-2 border border-transparent font-medium rounded-md text-red-700 bg-red-100 dark:bg-red-500/10 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/20 focus:outline-none focus:border-red-300 focus:shadow-outline-red active:bg-red-200 transition ease-in-out duration-150 sm:text-sm sm:leading-5">
                            {{ 'eraseData.cta.button'|trans }}
                        </button>
                        {{ form_end(form) }}

                    </div>
                </div>

            </div>

        {% endif %}
    </div>

{% endblock %}