{% set isReadonly = isReadonly|default(false) %}

<div {{ attributes.defaults({ id: 'offer-dates-component', class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6' }) }}>
    <div class="space-y-6">
        {# Application Deadline #}
        <div>
            <label for="application-deadline" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                {{ 'offers.label.applicationDeadline'|trans({}, 'admin') }}
            </label>
            <div class="mt-1 flex items-center gap-x-3">
                <input type="datetime-local" id="application-deadline"
                       value="{{ applicationDeadline ? applicationDeadline|date('Y-m-d\TH:i') : '' }}"
                       {% if isReadonly %}readonly disabled{% else %}data-model="on(input)|applicationDeadline"{% endif %}
                       class="block w-1/3 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 {{ isReadonly ? 'bg-gray-50 dark:bg-gray-900 cursor-not-allowed' }}">
                {% if isDirty and not isReadonly %}
                    <twig:Admin:Button variant="primary" size="sm" data-action="live#action" data-live-action-param="save">
                        Speichern
                    </twig:Admin:Button>
                {% endif %}
            </div>
        </div>

        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Termine</h3>

            {% if offer.dates is empty and not isReadonly %}
                <label class="flex items-center gap-x-2 text-sm font-medium text-gray-700 dark:text-gray-300">
                    <input type="checkbox" data-model="isPermanent"
                           class="rounded border-gray-300 text-primary-600 focus:ring-primary-600">
                    Dauerangebot
                </label>
            {% endif %}

            <div class="flex flex-col gap-y-3" id="offer-dates-list">
                {% for date in offer.dates %}
                    <twig:Admin:Offer:OfferDateItem :date="date" :isReadonly="isReadonly"/>
                {% endfor %}
            </div>

            {% if not isReadonly %}
                <div x-data="{ help: false }" class="relative inline-block mt-4">
                    {% if offer.dates is empty and not isPermanent %}
                        <twig:Admin:Button variant="primary"
                                           href="{{ path('admin_offer_date_add', { uuid: offer.uuid.toBase58 }) }}"
                                           data-turbo-frame="modal"
                                           size="sm"
                                           class="animate-pulse-ring"
                                           @mouseenter="help = true" @mouseleave="help = false">
                            <twig:ux:icon name="ph:plus" class="size-4 mr-2"/>
                            Zeit erstellen
                        </twig:Admin:Button>
                    {% elseif not isPermanent %}
                        <twig:Admin:Button variant="ghost"
                                           href="{{ path('admin_offer_date_add', { uuid: offer.uuid.toBase58 }) }}"
                                           data-turbo-frame="modal"
                                           size="sm"
                                           @mouseenter="help = true" @mouseleave="help = false">
                            <twig:ux:icon name="ph:plus" class="size-4 mr-2"/>
                            Zusätzliche Zeit
                        </twig:Admin:Button>
                    {% endif %}
                    <div x-show="help" x-cloak x-transition
                         class="absolute bottom-full left-0 mb-2 w-max max-w-64 p-2 bg-gray-900 text-white text-xs rounded shadow-lg z-50">
                        <p>Sie können eine zusätzliche Zeit eintragen, wenn die gleiche Gruppe von Kindern an mehreren Terminen erscheinen muss. Wenn Sie das Angebot mehrmals anbieten, verwenden Sie stattdessen die Funktion »Neue Termingruppe« auf der Übersichtsseite.</p>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>

    <twig:Admin:Edit:Footer :isDirty="isDirty" :isReadonly="isReadonly" :sections="sections" :section="section" :params="{uuid: offer.uuid}" :useLiveAction="true" />

    {% if message|default %}
        <twig:Turbo:Stream:Prepend target="#notifications">
            <twig:Admin:Notification type="success" title="Daten gespeichert" :message="message" />
        </twig:Turbo:Stream:Prepend>
    {% endif %}
</div>
