<div {{ attributes }}>
    <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-primary-100 dark:bg-primary-900/40 sm:mx-0 sm:h-10 sm:w-10">
            <span class="block h-6 w-6 text-primary-600 dark:text-primary-400"><twig:ux:icon name="ph:arrows-clockwise" /></span>
        </div>
        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
            <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100" id="modal-headline">
                Alle Angebote mit Status ändern
            </h3>

            <div class="mt-4 grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-6">
                <div class="sm:col-span-3 text-left">
                    <label for="fromStatus" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 block">
                        Alle Angebote mit Status
                    </label>
                    <div class="mt-1">
                        <select id="fromStatus" data-model="fromStatus" class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:focus:ring-primary-500">
                            <option value="">- Status wählen -</option>
                            {% for status in this.statuses %}
                                <option value="{{ status }}">{{ ('offers.status.' ~ status)|trans([], 'admin') }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="sm:col-span-3 text-left">
                    <label for="transition" class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-1 block">
                        wird Status / Aktion
                    </label>
                    <div class="mt-1">
                        <select id="transition" data-model="transition" {{ not fromStatus ? 'disabled' }} class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-white/5 dark:text-white dark:ring-white/10 dark:focus:ring-primary-500 disabled:opacity-50 disabled:cursor-not-allowed">
                            <option value="">- Aktion wählen -</option>
                            {% for transition in this.transitions %}
                                <option value="{{ transition }}">{{ ('offers.workflow.' ~ transition)|trans([], 'admin') }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>

            <div class="mt-6 text-left">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    Anzahl betroffener Angebote: <span class="font-bold text-gray-900 dark:text-gray-100">{{ this.countAffected }}</span>
                </p>
            </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"
                data-action="live#action"
                data-live-action-param="apply"
                :disabled="this.countAffected == 0 or not transition"
                class="inline-flex w-full justify-center sm:w-auto">
            Ausführen
        </twig:Admin:Button>
        <twig:Admin:Button
                data-action="modal#close"
                class="mt-3 sm:mt-0 inline-flex w-full justify-center sm:w-auto"
                data-bs-dismiss="modal">
            Abbrechen
        </twig:Admin:Button>
    </div>

    {% if success %}
        <twig:Turbo:Stream:Update target="#modal"/>
        {% if message %}
            <twig:Turbo:Stream:Prepend target="#notifications">
                <twig:Admin:Notification type="success" :title="message" />
            </twig:Turbo:Stream:Prepend>
        {% endif %}
        {% for item in this.appliedOffers %}
            <twig:Turbo:Stream:Replace target="#item-{{ item.id }}">
                {{ include('@FerienpassAdmin/components/OffersReview/_item.html.twig', { item: item }) }}
            </twig:Turbo:Stream:Replace>
        {% endfor %}
    {% endif %}
</div>
