{% extends '@Contao/fragment/_container.html.twig' %}

{% block container %}

    {% embed '@Contao/fragment/_modalBase.html.twig' %}
        {% block modalContent %}

            <div class="sm:flex sm:items-start">
                <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 dark:bg-red-600/70 sm:mx-0 sm:h-10 sm:w-10">
                    <twig:ux:icon name="lucide:triangle-alert" class="block h-6 w-6 text-red-600 dark:text-red-100/90" />
                </div>
                <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
                    <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
                        id="modal-headline">{{ 'attendanceWithdraw.title'|trans({}, 'cms') }}</h3>
                    <div class="mt-2">
                        <p class="text-sm leading-5 text-gray-500 dark:text-gray-300">
                            {{ 'attendanceWithdraw.confirmation'|trans({}, 'cms') }}
                        </p>

                        <div class="mt-6 border-t border-gray-100 dark:border-gray-700">
                            <dl class="divide-y divide-gray-100 dark:divide-gray-800">
                                <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                    <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">
                                        {{ 'attendanceWithdraw.participant'|trans({}, 'cms') }}
                                    </dt>
                                    <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">{{ attendance.participant.name }}</dd>
                                </div>
                                <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                    <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">{{ 'attendanceWithdraw.offer'|trans({}, 'cms') }}
                                    </dt>
                                    <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">{{ attendance.offer.name }}</dd>
                                </div>
                                <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
                                    <dt class="text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">{{ 'attendanceWithdraw.date'|trans({}, 'cms') }}
                                    </dt>
                                    <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">{% if attendance.offer.dates is not empty %}
                                            {% set startDate = attendance.offer.dates|first.begin %}
                                            <time datetime="{{ startDate|date('c') }}">{{ startDate|format_datetime(pattern="E, dd.MM.yyyy HH:mm") }}</time>
                                        {% else %}
                                            <span>{{ 'attendanceWithdraw.permanent'|trans({}, 'cms') }}</span>
                                        {% endif %}
                                    </dd>
                                </div>
                            </dl>
                        </div>

                        {% if attendance.paid %}
                            {% if inGracePeriod %}
                                {% set info = 'attendanceWithdraw.infoInGracePeriod'|trans({firstname: attendance.participant.firstname}, 'cms') %}
                                {% if 'attendanceWithdraw.infoInGracePeriod' != info %}
                                    <p class="text-sm font-bold leading-5 text-orange-700 dark:text-orange-400 mt-2">{{ info }}</p>
                                {% endif %}
                            {% else %}
                                {% set info = 'attendanceWithdraw.infoOutsideGracePeriod'|trans({firstname: attendance.participant.firstname}, 'cms') %}
                                {% if 'attendanceWithdraw.infoOutsideGracePeriod' != info %}
                                    <p class="text-sm font-bold leading-5 text-orange-700 dark:text-orange-400 mt-2">{{ info }}</p>
                                {% endif %}
                            {% endif %}
                        {% endif %}

                    </div>
                </div>
            </div>
            <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">

                {{ form_start(cancel, {
                    attr: { 'data-turbo-frame': '_top' }
                }) }}

                <button type="submit"
                        class="inline-flex w-full justify-center rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
                >
                    {{ 'attendanceWithdraw.submit'|trans({firstname: attendance.participant.firstname}, 'cms') }}
                </button>

                {{ form_end(cancel) }}

                <form method="dialog">
                    <button class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto">
                        {{ 'attendanceWithdraw.cancel'|trans({}, 'cms') }}
                    </button>
                </form>
            </div>
        {% endblock %}
    {% endembed %}

{% endblock %}
