{% trans_default_domain 'admin' %}

<div {{ attributes }}>

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

        <fieldset>
            <legend class="text-base font-semibold leading-6 text-gray-900 dark:text-gray-100">{{ 'export.selectExport'|trans }}</legend>

            <div class="mt-4 grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
                {% for exporterName in exporterOptions %}
                    <button
                            data-action="live#emit"
                            data-live-event-param="selectExport"
                            data-live-name-param="{{ exporterName }}"
                            class="{{ export == exporterName ? '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-0-label"
                                      class="block text-sm font-medium text-gray-900 dark:text-gray-100">{{ "#{exporterName}.0"|trans([], 'export') }}</span>
                                <span id="group-0-description-0"
                                      class="mt-1 flex items-center text-sm text-gray-500 dark:text-gray-400">{{ "#{exporterName}.1"|trans([], 'export') }}</span>
                            </span>
                        </span>
                        {% if export == exporterName %}
                            <twig:ux:icon name="ph:check-circle-fill" class="h-5 w-5 text-primary-600 dark:text-primary-400/50" aria-hidden="true" />
                        {% endif %}
                        <span aria-hidden="true"
                              class="{{ export == exporterName ? 'border-primary-600' : 'border-transparent' }} pointer-events-none absolute -inset-px rounded-lg border-2"></span>
                    </button>
                {% endfor %}
            </div>
        </fieldset>

        {% if export %}
            {% if 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 Angebote in einer dieser Saisons.</p>
                    <div class="mt-4 space-y-2">
                        {% for edition 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="{{ edition.id }}"
                                           class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                                </div>
                                <div class="text-sm leading-6">
                                    <label for="edition-{{ loop.index }}"
                                           class="font-medium text-gray-900 dark:text-gray-100">{{ edition.name }}</label>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </fieldset>
            {% endif %}

            <fieldset>
                <legend class="text-sm font-semibold leading-6 text-gray-900 dark:text-gray-100">Veranstaltende</legend>
                <p class="mt-1 text-sm leading-6 text-gray-600 dark:text-gray-400">Nur Angebote von/mit diesen Veranstaltenden.</p>
                <div class="mt-4 space-y-2">
                    <select data-model="selectedHosts" multiple>
                        {% for host in hostOptions %}
                            <option value="{{ host.id }}">{{ host.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </fieldset>

            <fieldset>
                <legend class="sr-only">Veröffentlichte</legend>
                <div class="space-y-5">
                    <div class="relative flex items-start">
                        <div class="flex h-6 items-center">
                            <input id="comments" data-model="onlyPublished"
                                   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">Nur veröffentlichte:</label>
                            <span id="comments-description" class="text-gray-500 dark:text-gray-400">Angebote ausblenden, die nicht
                                veröffentlicht sind.</span>
                        </div>
                    </div>
                </div>
            </fieldset>


            <div>
            <p class="text-xs text-gray-500 max-w-md">Der Export kann je nach Umfang bis zu zwei Minuten dauern. Wir senden den Link zum Download an <em data-controller="ferienpass--admin-personalize" data-ferienpass--admin-personalize-source-value="[data-current-user-email]"></em>, sobald wir fertig sind.</p>

                <twig:Admin:Button variant="primary" class="mt-6" data-action="live#action:prevent" data-live-action-param="submit">{{ 'export.button'|trans }}</twig:Admin:Button>
            </div>
        {% endif %}

    </div>

    {% if noEntriesNotification %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="error" title="Keine Daten gefunden" message="Es wurden keine Daten zum Export gefunden, nachdem die Filter angewendet wurden. Überprüfen Sie Ihre Filtereinstellungen und versuchen Sie es erneut."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}

    {% if successNotification %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Export wird erstellt" message="Der Export wird Ihnen per E-Mail zugestellt. Bitte überprüfen Sie Ihr E-Mail-Postfach."/>
        </twig:Turbo:Stream:Prepend>
    {% endif %}

</div>
