{% extends "@FerienpassAdmin/layout/modalBase.html.twig" %}

{% block main %}
    <form action="{{ path('admin_participant_duplicates_merge_modal', { uuid1: p1.uuid.toBase58, uuid2: p2.uuid.toBase58 }) }}" method="POST">
        <div class="sm:flex sm:items-start" data-modal-hide-close>
            <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-primary-100 dark:bg-primary-900 sm:mx-0 sm:h-10 sm:w-10">
                <span class="block h-6 w-6 text-primary-600 dark:text-primary-300">
                    <twig:ux:icon name="ph:arrows-left-right" />
                </span>
            </div>
            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100" id="modal-headline">Teilnehmende zusammenführen</h3>
                <div class="mt-4">
                    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
                        Wählen Sie aus, welcher Teilnehmende beibehalten werden soll.
                        Alle Anmeldungen des anderen Teilnehmenden werden übertragen, und dieser wird anschließend <strong>gelöscht</strong>.
                    </p>

                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                        {% for p in [p1, p2] %}
                        <label class="group relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none dark:bg-gray-800 border-gray-200 dark:border-gray-700 has-[:checked]:border-primary-500 has-[:checked]:ring-1 has-[:checked]:ring-primary-500">
                            <input type="radio" name="base" value="{{ p.uuid.toBase58 }}" class="sr-only" {{ loop.first ? 'checked' : '' }}>
                            <div class="flex flex-1">
                                <div class="flex flex-col">
                                    <span class="block text-sm font-medium text-gray-900 dark:text-gray-100">{{ p.name }}</span>
                                    <span class="mt-1 flex items-center text-xs text-gray-500 dark:text-gray-400">
                                        {{ p.dateOfBirth ? p.dateOfBirth|date("d.m.Y") : "-" }}
                                    </span>
                                    <span class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        {{ p.user ? p.user.email : 'Kein Benutzer' }}
                                    </span>
                                    <span class="mt-1 text-xs text-gray-500 dark:text-gray-400">
                                        {{ p.attendances|length }} Anmeldungen
                                    </span>
                                </div>
                            </div>
                            <twig:ux:icon name="ph:check-circle-fill" class="h-5 w-5 text-primary-600 invisible group-has-[:checked]:visible" aria-hidden="true" />
                            <span class="pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-has-[:checked]:border-primary-500" aria-hidden="true"></span>
                        </label>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="mt-5 sm:mt-4 sm:ml-10 sm:flex sm:pl-4 sm:gap-3">
            <twig:Admin:Button variant="primary" type="submit" class="inline-flex w-full justify-center sm:w-auto">
                Zusammenführung bestätigen
            </twig:Admin:Button>
            <twig:Admin:Button command="close" commandfor="admin-modal-dialog" class="mt-3 sm:mt-0 inline-flex w-full justify-center sm:w-auto">
                Abbrechen
            </twig:Admin:Button>
        </div>
    </form>
{% endblock %}
