{% trans_default_domain 'admin' %}

<div {{ attributes }}>

    {% if not is_granted('ROLE_ADMIN') and offerOptions is empty %}

        <twig:Admin:Alert type="error"
                          class="shadow border border-red-700/30"
                          message="Bitte rufen Sie die Rundmail-Funktion direkt über das Angebot auf."/>

    {% else %}

        <div class="lg:grid lg:grid-cols-12 lg:gap-x-8">
            <div class="lg:col-span-8">
                <div class="space-y-12 divide-y divide-gray-300 dark:divide-gray-700">

                    <div class="space-y-12">

                        {% if is_granted('ROLE_ADMIN') %}
                            <fieldset>
                                <legend class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">{{ 'mailing.selectGroup'|trans }}</legend>

                                <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
                                    <button
                                            data-action="live#emit"
                                            data-live-event-param="group"
                                            data-live-group-param="veranstaltende"
                                            class="{{ group == 'veranstaltende' ? 'border-primary-600 dark:border-primary-400/50 ring-2 ring-primary-600 dark:border-primary-400/50' : 'border-gray-300 dark:border-gray-800' }} text-left relative flex cursor-pointer rounded-lg border bg-white dark:bg-gray-900 p-4 shadow-sm focus:outline-none">
                                        <span class="flex flex-1">
                                            <span class="flex flex-col">
                                                <span id="group-0-label"
                                                      class="block text-sm font-medium text-gray-900 dark:text-gray-100">Veranstaltende</span>
                                                <span id="group-0-description-0"
                                                      class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">{{ countAllHosts }}
                                                    E-Mails</span>
                                            </span>
                                        </span>
                                        {% if group == 'veranstaltende' %}
                                            <twig:ux:icon name="ph:check-circle-fill" class="h-5 w-5 text-primary-600" aria-hidden="true" />
                                        {% endif %}
                                        <span aria-hidden="true"
                                              class="{{ group == 'veranstaltende' ? 'border-primary-600' : 'border-transparent' }} pointer-events-none absolute -inset-px rounded-lg border-2"></span>
                                    </button>
                                    <button data-action="live#emit"
                                            data-live-event-param="group"
                                            data-live-group-param="teilnehmende"
                                            class="{{ group == 'teilnehmende' ? 'border-primary-600 dark:border-primary-400/50 ring-2 ring-primary-600 dark:ring-primary-400/50' : 'border-gray-300 dark:border-gray-800' }} text-left relative flex cursor-pointer rounded-lg border bg-white dark:bg-gray-900 p-4 shadow-sm focus:outline-none">
                                        <span class="flex flex-1">
                                            <span class="flex flex-col">
                                                <span id="group-1-label"
                                                      class="block text-sm font-medium text-gray-900 dark:text-gray-100">Teilnehmende</span>
                                                <span id="group-1-description-0"
                                                      class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">{{ countAllParticipants }}
                                                    E-Mails</span>
                                            </span>
                                        </span>
                                        {% if group == 'teilnehmende' %}
                                            <twig:ux:icon name="ph:check-circle-fill" class="h-5 w-5 text-primary-600" aria-hidden="true" />
                                        {% endif %}
                                        <span aria-hidden="true"
                                              class="{{ group == 'teilnehmende' ? 'border-primary-600' : 'border-transparent' }} pointer-events-none absolute -inset-px rounded-lg border-2"></span>
                                    </button>
                                </div>
                            </fieldset>
                        {% endif %}

                        {% if 'veranstaltende' == group %}

                            <fieldset>
                                <legend class="sr-only">Notifications</legend>
                                <div class="space-y-5">
                                    <div class="relative flex items-start">
                                        <div class="flex h-6 items-center">
                                            <input id="opt-hostsnotdisabled"
                                                   data-model="hostsNotDisabled"
                                                   aria-describedby="descr-hostsnotdisabled"
                                                   type="checkbox"
                                                   class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                        </div>
                                        <div class="ml-3 text-sm leading-6">
                                            <label for="opt-hostsnotdisabled"
                                                   class="font-medium text-gray-900 dark:text-gray-100">Nicht-deaktivierte
                                                Accounts:</label>
                                            <span id="descr-hostsnotdisabled" class="text-gray-500 dark:text-gray-400">Nur
                                                Accounts, die einen
                                                aktiven
                                                Account haben.</span>
                                        </div>
                                    </div>

                                    <div class="relative flex items-start">
                                        <div class="flex h-6 items-center">
                                            <input id="candidates"
                                                   data-model="hostsWithOffer"
                                                   aria-describedby="candidates-description"
                                                   type="checkbox"
                                                    {{ edition is not null ? 'disabled' : '' }}
                                                   class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                        </div>
                                        <div class="ml-3 text-sm leading-6">
                                            <label for="candidates"
                                                   class="font-medium text-gray-900 dark:text-gray-100">Mit
                                                Angebot:</label>
                                            <span id="candidates-description" class="text-gray-500 dark:text-gray-400">Veranstalter
                                                bietet oder hat
                                                in
                                                Vergangenheit ein Angebot angeboten.</span>
                                        </div>
                                    </div>
                                </div>
                            </fieldset>

                        {% endif %}

                        {% if (('teilnehmende' == group and not selectedOffers) or hostsWithOffer) and edition is null %}

                            <fieldset>
                                <legend class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">Saisons
                                </legend>
                                <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">Nur mit Angeboten
                                    einer
                                    dieser Saisons.</p>
                                <div class="mt-4 space-y-2">
                                    {% for editionOption in editionOptions %}
                                        <div class="relative flex gap-x-3">
                                            <div class="flex items-center">
                                                <input id="edition-{{ loop.index }}"
                                                       data-model="selectedEditions[]"
                                                       type="checkbox"
                                                       value="{{ editionOption.id }}"
                                                       class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="edition-{{ loop.index }}"
                                                       class="font-medium text-gray-900 dark:text-gray-100">{{ editionOption.name }}</label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </fieldset>

                        {% endif %}

                        {% if 'teilnehmende' == group and selectedOffers is not empty %}

                            <fieldset>
                                <legend class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
                                    Angebote
                                </legend>
                                <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">Nur an Teilnehmende
                                    aus
                                    folgenden Angeboten.</p>
                                <div class="mt-4 space-y-2">
                                    {% for offer in offerOptions %}
                                        <div class="relative flex gap-x-3">
                                            <div class="flex items-center">
                                                <input id="offer-{{ loop.index }}"
                                                       data-model="selectedOffers[]"
                                                       type="checkbox"
                                                       value="{{ offer.id }}"
                                                       class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="offer-{{ loop.index }}"
                                                       class="font-medium text-gray-900 dark:text-gray-100">{{ offer.name }}</label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </fieldset>

                            <fieldset>
                                <legend class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
                                    Anmeldestatus
                                </legend>
                                <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">Nur an Teilnehmende,
                                    die zu
                                    dem/den Angeboten
                                    ...
                                    sind.</p>
                                <div class="mt-4 space-y-2">
                                    {% for status in ['confirmed', 'waitlisted',  'waiting', 'withdrawn', 'unfulfilled', 'error'] %}
                                        <div class="relative flex gap-x-3">
                                            <div class="flex items-center">
                                                <input id="status{{ loop.index }}"
                                                       data-model="attendanceStatus[]"
                                                       type="checkbox"
                                                       value="{{ status }}"
                                                       class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="status{{ loop.index }}"
                                                       class="font-medium text-gray-900 dark:text-gray-100">{{ "mailing.attendanceStatus.#{status}"|trans }}</label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </fieldset>

                        {% endif %}

                        {% if 'teilnehmende' == group %}
                            <fieldset>
                                <legend class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">Filter
                                </legend>
                                <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">Die Teilnehmende, die
                                    eine
                                    E-Mail bekommen, weiter einschränken.</p>
                                <div class="mt-4 space-y-5">
                                    {#                            <div class="relative flex items-start"> #}
                                    {#                                <div class="flex h-6 items-center"> #}
                                    {#                                    <input id="comments" data-model="hostsNotDisabled" #}
                                    {#                                           aria-describedby="comments-description" #}
                                    {#                                           name="comments" type="checkbox" #}
                                    {#                                           class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600"> #}
                                    {#                                </div> #}
                                    {#                                <div class="ml-3 text-sm leading-6"> #}
                                    {#                                    <label for="comments" class="font-medium text-gray-900 dark:text-gray-100">Nicht-deaktivierte #}
                                    {#                                        Accounts:</label> #}
                                    {#                                    <span id="comments-description" class="text-gray-500 dark:text-gray-400">Nur #}
                                    {#                                        Accounts, die einen #}
                                    {#                                        aktiven #}
                                    {#                                        Account haben.</span> #}
                                    {#                                </div> #}
                                    {#                            </div> #}

                                    <div class="relative flex items-start">
                                        <div class="flex h-6 items-center">
                                            <input id="opt-onlyparticipantsunacknowledged"
                                                   data-model="onlyParticipantsUnacknowledged"
                                                   aria-describedby="descr-onlyparticipantsunacknowledged"
                                                   type="checkbox"
                                                   class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                        </div>
                                        <div class="ml-3 text-sm leading-6">
                                            <label for="opt-onlyparticipantsunacknowledged"
                                                   class="font-medium text-gray-900 dark:text-gray-100">Unbestätigte
                                                Angebote:</label>
                                            <span id="descr-onlyparticipantsunacknowledged"
                                                  class="text-gray-500 dark:text-gray-400">Teilnehmende
                                                sind zu Angeboten angemeldet, die noch nicht bezahlt oder alternativ
                                                bestätigt
                                                wurden.</span>
                                        </div>
                                    </div>

                                    {% if onlyParticipantsUnacknowledged %}
                                        <div class="relative flex items-start">
                                            <div class="flex h-6 items-center">
                                                <input id="opt-onlyparticipantsunpaid"
                                                       data-model="onlyParticipantsUnpaid"
                                                       aria-describedby="descr-onlyparticipantsunpaid"
                                                       type="checkbox"
                                                       class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                            </div>
                                            <div class="ml-3 text-sm leading-6">
                                                <label for="opt-onlyparticipantsunpaid"
                                                       class="font-medium text-gray-900 dark:text-gray-100">Zahlung
                                                    ausstehend:</label>
                                                <span id="descr-onlyparticipantsunpaid"
                                                      class="text-gray-500 dark:text-gray-400">Nur Anmeldungen, bei
                                                    denen auch
                                                    wirklich eine Zahlung ausstehend ist.</span>
                                            </div>
                                        </div>

                                        {% if canCreatePaymentLinks %}
                                            <div class="relative flex items-start">
                                                <div class="flex h-6 items-center">
                                                    <input id="opt-addpaymentlink"
                                                           data-model="addPaymentLink"
                                                           aria-describedby="descr-addpaymentlink"
                                                           type="checkbox"
                                                           class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                                                </div>
                                                <div class="ml-3 text-sm leading-6">
                                                    <label for="opt-addpaymentlink"
                                                           class="font-medium text-gray-900 dark:text-gray-100">Zahlungsaufforderung
                                                        generieren:</label>
                                                    <span id="descr-addpaymentlink"
                                                          class="text-gray-500 dark:text-gray-400">Es
                                                        wird eine Zahlungsaufforderung erstellt und ein Link zum
                                                        Bezahlen der
                                                        Rechnung eingefügt.</span>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endif %}

                                </div>
                            </fieldset>
                        {% endif %}

                        {% if selectedHosts is not empty %}

                            <fieldset>
                                <legend class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">
                                    Veranstalter-Profile
                                </legend>
                                <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">Nur an
                                    Ansprechpartner von
                                    folgenden
                                    Veranstaltern
                                    versenden.</p>
                                <div class="mt-4 space-y-2">
                                    {% for host in hostOptions %}
                                        <div class="relative flex gap-x-3">
                                            <div class="flex items-center">
                                                <input id="host-{{ loop.index }}"
                                                       data-model="selectedHosts[]"
                                                       type="checkbox"
                                                       value="{{ host.id }}"
                                                       class="h-4 w-4 rounded border-gray-300 dark:border-gray-700 dark:bg-gray-900 text-primary-600 focus:ring-primary-600 dark:focus:ring-offset-gray-900">
                                            </div>
                                            <div class="text-sm leading-6">
                                                <label for="host-{{ loop.index }}"
                                                       class="font-medium text-gray-900 dark:text-gray-100">{{ host.name }}</label>
                                            </div>
                                        </div>
                                    {% endfor %}
                                </div>
                            </fieldset>

                        {% endif %}

                    </div>

                    <div class="pt-6">

                        <h3 class="text-gray-900 dark:text-gray-100">{{ 'mailing.recipients.0'|trans }}</h3>

                        <p class="text-sm leading-5 text-gray-500 dark:text-gray-400 dark:text-gray-300">{{ 'mailing.recipients.1'|trans }}</p>

                        <div class="mt-6">

                            {% for email, users in recipients %}

                                <span class="inline-flex items-center rounded-full bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 p-1 pr-2 mb-1">

                                    <span class="isolate inline-flex -space-x-1 overflow-hidden">
                                        {% for user in users %}

                                            <span class="relative z-30 ring-2 ring-white dark:ring-gray-900 flex-none inline-flex items-center justify-center h-6 w-6 rounded-full bg-gray-400">
                                                <span class="text-xs font-medium leading-none text-white"
                                                      title="{{ user.name }}">{{ user.firstname|first|upper ~ user.lastname|first|upper }}</span>
                                            </span>
                                        {% endfor %}
                                    </span>

                                    <span class="ml-2 text-sm text-gray-700 dark:text-gray-300">{{ email }}</span>

                                    <button
                                            class="bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 p-0.5 ml-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-600 dark:hover:text-gray-300"
                                            data-action="live#action:prevent"
                                            data-live-action-param="remove"
                                            data-live-email-param="{{ email }}"
                                            title="Empfänger entfernen">
                                        <twig:ux:icon name="ph:x" class="h-4 w-4" />
                                    </button>

                                </span>

                            {% endfor %}

                        </div>

                        <p class="mt-4 font-medium text-sm text-gray-900 dark:text-gray-100">{{ recipients|length }}
                            E-Mails</p>

                    </div>

                    <div class="pt-6">

                        <h3 class="text-gray-900 dark:text-gray-100">{{ 'mailing.write.0'|trans }}</h3>

                        <p class="text-sm leading-5 text-gray-500 dark:text-gray-300">{{ 'mailing.write.1'|trans }}</p>

                        {% if recipients|length %}
                            <form class="mt-6 grid gap-6">

                                <div class="col-span-2">
                                    <label for="emailSubject"
                                           class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">E-Mail-Betreff</label>
                                    <div class="mt-2">
                                        <input type="text" data-model="emailSubject" id="emailSubject"
                                               class="block w-full rounded-md border-0 py-1.5 text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-900 shadow-sm 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 sm:leading-6">
                                    </div>
                                </div>


                                <div class="col-span-3" data-controller="ferienpass--admin-lexical" x-data="{ isPreview: false }" data-live-ignore>
                                    <label for="emailText"
                                           class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">E-Mail-Text</label>

                                    <el-tab-group class="mt-2">
                                        <div class="group flex items-center">
                                            <el-tab-list class="flex gap-2">
                                                <button type="button" @click="isPreview = false" class="rounded-md border border-transparent bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 aria-selected:bg-gray-100 aria-selected:text-gray-900 aria-selected:hover:bg-gray-200 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white dark:aria-selected:bg-white/10 dark:aria-selected:text-white dark:aria-selected:hover:bg-white/10">Verfassen</button>
                                                <button type="button" @click="isPreview = true" class="rounded-md border border-transparent bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900 aria-selected:bg-gray-100 aria-selected:text-gray-900 aria-selected:hover:bg-gray-200 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-white/10 dark:hover:text-white dark:aria-selected:bg-white/10 dark:aria-selected:text-white dark:aria-selected:hover:bg-white/10">Vorschau</button>
                                            </el-tab-list>

                                            <div class="ml-auto items-center space-x-2 flex" x-show="!isPreview" data-ferienpass--admin-lexical-target="toolbar">
                                                <button type="button"
                                                        class="inline-flex size-6 items-center justify-center rounded-full text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-white"
                                                        title="Bold"
                                                        data-action="click->ferienpass--admin-lexical#dispatchAction"
                                                        data-ferienpass--admin-lexical-action-param="bold">
                                                    <span class="sr-only">Bold</span>
                                                    {{ ux_icon('ph:text-b', { class: 'size-5' }) }}
                                                </button>
                                                <button type="button"
                                                        class="inline-flex size-6 items-center justify-center rounded-full text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-white"
                                                        title="Italic"
                                                        data-action="click->ferienpass--admin-lexical#dispatchAction"
                                                        data-ferienpass--admin-lexical-action-param="italic">
                                                    <span class="sr-only">Italic</span>
                                                    {{ ux_icon('ph:text-italic', { class: 'size-5' }) }}
                                                </button>
                                            </div>
                                        </div>

                                        <el-tab-panels class="mt-2 block">
                                            <div class="-m-0.5 rounded-lg p-0.5">
                                                <label for="emailText" class="sr-only">E-Mail-Text</label>
                                                <div data-ferienpass--admin-lexical-target="editor" contenteditable="true" class="lexical-editor px-4 py-3 min-h-[200px] outline-none prose dark:prose-invert max-w-none text-gray-900 dark:text-gray-100/90 rounded-md bg-white dark:bg-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 dark:ring-gray-700 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm/6"></div>
                                                <textarea id="emailText"
                                                          data-model="emailText"
                                                          data-ferienpass--admin-lexical-target="input"
                                                          class="hidden"></textarea>
                                                <p class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Markdown wird unterstützt.</p>
                                            </div>
                                            <div hidden class="-m-0.5 rounded-lg p-0.5">
                                                <div class="border-b border-gray-200 dark:border-white/10">
                                                    {% if preview == false %}
                                                        <twig:Admin:Alert type="error"
                                                                          class="mt-2 shadow border border-red-700/30"
                                                                          message="Es gibt einen Fehler mit dem E-Mail-Text. Die E-Mail kann so nicht versendet werden."/>
                                                    {% else %}
                                                        <div class="mx-px mt-px px-3 pb-12 pt-2 text-sm leading-5 text-gray-800 dark:text-gray-200">
                                                            <div class="prose prose-sm dark:prose-invert">
                                                                {{ preview|raw }}
                                                            </div>
                                                        </div>
                                                    {% endif %}
                                                </div>
                                            </div>
                                        </el-tab-panels>
                                    </el-tab-group>
                                </div>

                                <div class="col-span-2">
                                    <label for="emailAttachment"
                                           class="block text-sm font-medium leading-6 text-gray-900 dark:text-gray-100">E-Mail-Anhang</label>
                                    <div class="mt-2">
                                        <input type="file" name="emailAttachment"/>
                                    </div>

                                    <p class="mt-1 text-gray-500 dark:text-gray-400 text-sm">Als beste Praxis gilt:
                                        Maximal eine
                                        Datei, nur PDF, nicht größer als 1 MB (denken Sie daran, dass E-Mail nicht für
                                        große
                                        Dateien geeignet ist).</p>
                                </div>

                                <div class="col-span-3 flex justify-end">
                                    <twig:Admin:Button variant="primary" type="submit" data-action="live#action:prevent" data-live-action-param="files|submit">E-Mail versenden</twig:Admin:Button>
                                </div>
                            </form>

                        {% else %}

                            <twig:Admin:Alert type="info"
                                              class="mt-6 shadow border border-blue-700/30"
                                              message="mailing.noRecipients"/>

                        {% endif %}

                        {% if confirm is not null %}

                            <twig:Admin:Alert type="confirm"
                                              class="mt-6 shadow border border-green-700/30"
                                              message="{{ confirm }}"/>
                        {% endif %}

                    </div>

                    <div class="pt-6">
                        <h3 class="text-gray-900 dark:text-gray-100">Benachrichtigungs-Tokens</h3>

                        <p class="text-sm leading-5 text-gray-500 dark:text-gray-300">
                            Sie können folgende Tokens verwenden, die vor dem Versenden mit dem richtigen Inhalt
                            ersetzt werden.
                        </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-semibold leading-6 text-gray-900 dark:text-gray-100">
                                        Token
                                    </dt>
                                    <dd class="mt-1 text-sm font-semibold leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">
                                        Beispiel
                                    </dd>
                                </div>
                                {% for name, value in availableTokens %}
                                    <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">{{ "{{ #{name} }}" }}</dt>
                                        <dd class="mt-1 text-sm leading-6 text-gray-700 dark:text-gray-200 sm:col-span-2 sm:mt-0">{{ value }}</dd>
                                    </div>
                                {% endfor %}
                            </dl>
                        </div>
                    </div>

                </div>
            </div>
            <aside class="mt-8 lg:mt-0 lg:col-span-4 lg:pl-8 lg:border-l lg:border-gray-200 dark:lg:border-gray-800">
                <h3 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">{{ 'mailing.recent'|trans }}</h3>
                <ul class="mt-4 divide-y divide-gray-100 dark:divide-gray-800">
                    {% for mailing in recentMailings %}
                        <li>
                            <a href="{{ path('admin_tools_dispatch', { uuid: mailing.logEntry.group.uuid.toBase58 }) }}"
                               class="group block py-3">
                                <div class="min-w-0">
                                    <p class="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-primary-600 truncate">{{ mailing.subject ?? 'Rundmail' }}</p>
                                    <p class="mt-1 text-xs text-gray-500 dark:text-gray-400">{{ mailing.createdAt|time_diff }}</p>
                                </div>
                            </a>
                        </li>
                    {% else %}
                        <li class="py-3 text-sm text-gray-500 dark:text-gray-400">Keine Rundmails gefunden.</li>
                    {% endfor %}
                </ul>
            </aside>
        </div>

    {% endif %}

    {% if showConfirm %}
        <twig:Turbo:Stream:Update target="#modal">
            <twig:Admin:MailingModal numberOfEmails="{{ recipients|length }}" :emailText="emailText" />
        </twig:Turbo:Stream:Update>
    {% endif %}

</div>
