<div {{ attributes }}>
    {% trans_default_domain 'admin' %}

    <form data-action="live#action:prevent" data-live-action-param="submit">
        <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-blue-100 dark:bg-blue-600/70 sm:mx-0 sm:h-10 sm:w-10">
                <span class="block h-6 w-6 text-blue-600 dark:text-blue-100/90"><twig:ux:icon name="ph:rows-plus-bottom" /></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">
                    Plätze erhöhen
                </h3>
                <div class="mt-2 text-left">
                    <p class="text-sm text-gray-500 dark:text-gray-300">
                        Geben Sie die neue maximale Teilnehmerzahl an und entscheiden Sie, ob Teilnehmer von der Warteliste automatisch nachrücken sollen.
                    </p>

                        <div class="mt-4">
                            <label for="maxParticipants"
                                   class="block text-sm font-medium text-gray-700 dark:text-gray-300">Neue maximale
                                Teilnehmerzahl</label>
                            <div class="mt-1">
                                <input type="number" data-model="maxParticipants" id="maxParticipants"
                                       min="{{ (offer.maxParticipants ?: 0) + 1 }}"
                                       class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm dark:bg-gray-800 dark:border-gray-700 dark:text-white">
                            </div>
                        </div>

                    {% if offer.attendancesWaitlisted|length > 0 %}
                        <div class="mt-4 space-y-4">
                            <div class="relative flex items-start">
                                <div class="flex h-5 items-center">
                                    <input id="reorder" data-model="reorder" type="checkbox"
                                           class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-700">
                                </div>
                                <div class="ml-3 text-sm">
                                    <label for="reorder"
                                           class="font-medium text-gray-700 dark:text-gray-300">{{ 'attendances.label.reorder'|trans({}, 'admin') }}</label>
                                    <p class="text-gray-500 dark:text-gray-400">{{ 'attendances.help.reorder'|trans({}, 'admin') }}</p>
                                </div>
                            </div>

                            {% if reorder %}
                                <div class="space-y-4">
                                    <div class="relative flex items-start">
                                        <div class="flex h-5 items-center">
                                            <input id="commit" data-model="commit" type="checkbox"
                                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-700">
                                        </div>
                                        <div class="ml-3 text-sm">
                                            <label for="commit"
                                                   class="font-medium text-gray-700 dark:text-gray-300">{{ 'attendances.label.commit'|trans({}, 'admin') }}</label>
                                            <p class="text-gray-500 dark:text-gray-400">{{ 'attendances.help.commit'|trans({}, 'admin') }}</p>
                                        </div>
                                    </div>
                                    <div class="relative flex items-start">
                                        <div class="flex h-5 items-center">
                                            <input id="notify" data-model="notify" type="checkbox"
                                                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-700">
                                        </div>
                                        <div class="ml-3 text-sm">
                                            <label for="notify"
                                                   class="font-medium text-gray-700 dark:text-gray-300">{{ 'attendances.label.notify'|trans({}, 'admin') }}</label>
                                            <p class="text-gray-500 dark:text-gray-400">{{ 'attendances.help.notify'|trans({}, 'admin') }}</p>
                                        </div>
                                    </div>
                                </div>
                            {% endif %}
                        </div>
                    {% endif %}
                </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" class="inline-flex w-full justify-center sm:w-auto" data-action="live#action" data-live-action-param="submit">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>

    {% if success %}
        <twig:Turbo:Stream:Update target="#modal"/>
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Plätze erhöht"
                                     message="Die maximale Teilnehmerzahl wurde angepasst und die Warteliste wird verarbeitet."/>
        </twig:Turbo:Stream:Prepend>

        {% if notify and notificationUuid %}
            <twig:Turbo:Stream:Prepend target="#notifications">
                <twig:Admin:Notification type="mail_sent" title="{{ 'Teilnehmer:innen wurden benachrichtigt' }}"
                                         message="{{ 'Die Teilnehmer:innen wurden über die Änderung des Teilnahmestatus informiert' }}"
                                         dismissAfter="0"
                                         primaryActionLink="{{ path('admin_outbox', { group: notificationUuid }) }}"
                                         primaryActionTitle="{{ 'Nachrichten anzeigen' }}"/>
            </twig:Turbo:Stream:Prepend>
        {% endif %}
    {% endif %}
</div>
