 

<div {{ attributes }}>

    <form class="relative flex h-full flex-col overflow-y-auto" data-action="live#action:prevent" data-live-action-param="submit">

        <div class="flex-1">
            <!-- Header -->
            <div class="bg-gray-50 dark:bg-gray-800/50 px-4 py-6 sm:px-6 @md:bg-transparent @md:px-0 @md:py-0">
                <div class="space-y-1">
                    <h2 id="drawer-title" class="text-base font-semibold text-gray-900 dark:text-white @md:tracking-tight @md:text-xl @md:font-bold @md:dark:text-gray-50">Teilnehmer:innen verwalten</h2>
                    <p class="text-sm text-gray-500 dark:text-gray-400 @md:mt-1 @md:dark:text-gray-300">
                        Passen Sie den Status der ausgewählten Teilnehmer:innen an.
                    </p>
                </div>
            </div>

            <!-- Divider container -->
            <div class="space-y-6 py-6 sm:space-y-0 sm:divide-y sm:divide-gray-200 dark:sm:divide-gray-800 sm:py-0">

                {% set offer = this.offer %}
                {% if offer %}
                    <div class="space-y-2 px-4 @md:grid @md:grid-cols-3 @md:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                        <div>
                            <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Angebot</span>
                        </div>
                        <div class="sm:col-span-2">
                            <div class="text-sm">
                                <h4 class="truncate text-gray-900 dark:text-white font-medium leading-5">{{ offer.name }} ({{ "##{offer.id}" }})</h4>
                                <p class="text-sm text-gray-500 dark:text-gray-400 leading-3">{{ offer.hosts|map(h => h.name)|join(', ') }}</p>
                                <p class="mt-3 text-sm text-gray-900 dark:text-gray-100 font-medium leading-3">
                                    {% if offer.dates is not empty %}
                                        <twig:Cms:OfferDate :dates="offer.dates" short />
                                    {% else %}
                                        Dauerangebot
                                    {% endif %}
                                </p>
                            </div>
                        </div>
                    </div>
                {% endif %}

                <!-- Participants Table -->
                <div class="space-y-2 px-4 @md:grid @md:grid-cols-3 @md:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div>
                        <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Ausgewählte Teilnehmer:innen</span>
                    </div>
                    <div class="sm:col-span-2">
                        <table class="min-w-full divide-y divide-gray-300 dark:divide-gray-700">
                            <thead>
                                <tr>
                                    <th scope="col" class="py-2 pl-2 pr-1 text-left text-xs font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider">Name</th>
                                    <th scope="col" class="py-2 pl-2 pr-1 text-left text-xs font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider">Status</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-gray-200 dark:divide-gray-800">
                                {% for attendance in this.attendances %}
                                    <tr>
                                        <td class="whitespace-nowrap py-2 pl-2 pr-1 text-sm font-medium text-gray-900 dark:text-gray-100">{{ attendance.participant.name }}</td>
                                        <td class="whitespace-nowrap py-2 pl-2 pr-1 text-sm text-gray-700 dark:text-gray-100/50">
                                            <twig:Admin:Badge attendance="{{ status ?: attendance.status }}" />
                                        </td>
                                    </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>

                <!-- Status -->
                <div class="space-y-2 px-4 @md:grid @md:grid-cols-3 @md:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div class="mb-1 @md:mb-0">
                        <label for="status" class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Neuer Status</label>
                    </div>
                    <div class="sm:col-span-2">
                        <select id="status" name="status" data-model="status" class="block w-full rounded-md bg-white dark:bg-gray-800 px-3 py-1.5 text-base text-gray-900 dark:text-gray-100 border-0 ring-1 ring-inset ring-gray-300 dark:ring-gray-700 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm/6">
                            <option value="">Status wählen…</option>
                            <option value="confirmed">{{ 'multiSelectStatus.confirmed'|trans({}, 'admin') }}</option>
                            <option value="withdrawn">{{ 'multiSelectStatus.withdrawn'|trans({}, 'admin') }}</option>
                        </select>
                        {% if _errors.has('status') %}
                            <p class="mt-2 text-sm text-red-600">{{ _errors.get('status') }}</p>
                        {% endif %}
                    </div>
                </div>

                <!-- Einstellungen -->
                {% if not stashed %}
                <div class="space-y-2 px-4 @md:grid @md:grid-cols-3 @md:gap-4 sm:space-y-0 sm:px-6 sm:py-5">
                    <div>
                        <span class="block text-sm/6 font-medium text-gray-900 dark:text-gray-100 sm:mt-1.5">Einstellungen</span>
                    </div>
                    <div class="sm:col-span-2 space-y-4">
                        <div class="relative flex items-start">
                            <div class="flex h-6 items-center">
                                <input id="commit" type="checkbox" data-model="commit" class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-800 text-primary-600 focus:ring-primary-600" {% if commit %}checked{% endif %} />
                            </div>
                            <div class="ml-3 text-sm/6">
                                <label for="commit" class="font-medium text-gray-900 dark:text-gray-100">{{ '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 {{ not this.isNotifiable ? 'opacity-50' : '' }}">
                            <div class="flex h-6 items-center">
                                <input id="notify" type="checkbox" data-model="notify" class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-800 text-primary-600 focus:ring-primary-600" {% if notify %}checked{% endif %} {% if not this.isNotifiable %}disabled{% endif %} />
                            </div>
                            <div class="ml-3 text-sm/6">
                                <label for="notify" class="font-medium text-gray-900 dark:text-gray-100">{{ 'attendances.label.notify'|trans({}, 'admin') }}</label>
                                <p class="text-gray-500 dark:text-gray-400">{{ 'attendances.help.notify'|trans({}, 'admin') }}</p>
                                {% if not this.isNotifiable %}
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 italic">{{ 'attendances.help.notNotifiable'|trans({}, 'admin') }}</p>
                                {% elseif not this.isParticipantNotifiable %}
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400 italic">
                                        {{ 'attendances.help.notNotifiableParticipant'|trans({}, 'admin') }}
                                        {% if notify %}
                                            <span class="font-semibold text-red-600">
                                                {{ this.nonNotifiableParticipants|map(p => p.name)|join(', ') }}
                                            </span>
                                        {% endif %}
                                    </p>
                                {% endif %}
                            </div>
                        </div>
                    </div>
                </div>
                {% endif %}

            </div>
        </div>

        <!-- Action buttons -->
        <div class="shrink-0 border-t border-gray-200 dark:border-gray-800 px-4 py-5 sm:px-6">
            <div class="flex justify-end gap-x-3">
                <twig:Admin:Button command="close" commandfor="admin-slideover-dialog">Abbrechen</twig:Admin:Button>
                <twig:Admin:Button variant="primary" data-action="live#action" data-live-action-param="submit">Speichern</twig:Admin:Button>
            </div>
        </div>

    </form>

    {% if confirm %}
        <twig:Turbo:Stream:Update target="#slideover"/>
        <twig:Turbo:Stream:Update target="#modal"/>
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Änderungen gespeichert" message="{{ confirm }}"/>
        </twig:Turbo:Stream:Prepend>
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="mail_sent" title="{{ attendances|length > 1 ? 'Teilnehmer:innen wurden benachrichtigt' : 'Teilnehmer:in wurde benachrichtigt' }}" message="{{ attendances|length > 1 ? 'Die Teilnehmer:innen wurden über die Änderung des Teilnahmestatus informiert': "#{attendances|first.participant.name} wurde über die Änderung des Teilnahmestatus informiert" }}" dismissAfter="0" primaryActionLink="{{ path('admin_outbox', { group: notificationUuid }) }}" primaryActionTitle="{{ attendances|length > 1 ? 'Nachrichten anzeigen' : 'Nachricht anzeigen' }}" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}

</div>
