<div {{ attributes }}>
    <div class="space-y-4">
        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Beginn</label>
                <input type="datetime-local" data-model="begin"
                       value="{{ begin ? begin|date('Y-m-d\TH:i') : '' }}"
                       class="block w-full rounded-md {{ _errors.has('begin') ? 'border-red-500' : 'border-gray-300' }} text-sm focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600">
                {% for error in _errors.get('begin') %}
                    <p class="mt-1 text-xs text-red-600">{{ error.message }}</p>
                {% endfor %}
            </div>
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Ende</label>
                <input type="datetime-local" data-model="end"
                       value="{{ end ? end|date('Y-m-d\TH:i') : '' }}"
                       class="block w-full rounded-md {{ _errors.has('end') ? 'border-red-500' : 'border-gray-300' }} text-sm focus:ring-primary-500 dark:bg-gray-700 dark:border-gray-600">
                {% for error in _errors.get('end') %}
                    <p class="mt-1 text-xs text-red-600">{{ error.message }}</p>
                {% endfor %}
            </div>
        </div>

        <div class="flex items-center gap-x-2">
            <input type="checkbox" id="recurring-{{ date.id }}" data-model="recurring"
                   class="h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-600">
            <label for="recurring-{{ date.id }}" class="text-sm font-medium text-gray-700 dark:text-gray-300">Wiederholen</label>
        </div>

        {% if recurring %}
            <div class="space-y-4 border-t pt-4 dark:border-gray-700">
                <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Häufigkeit</label>
                        <select data-model="mode" class="block w-full rounded-md border-gray-300 text-sm dark:bg-gray-700 dark:border-gray-600">
                            <option value="NONE" disabled>Häufigkeit wählen...</option>
                            <option value="DAILY">Täglich</option>
                            <option value="WEEKLY">Wöchentlich{{ this.weekdayName ? ' (jeden ' ~ this.weekdayName ~ ')' }}</option>
                        </select>
                    </div>

                    <div>
                        <label class="block text-sm font-medium text-gray-700 mb-1 dark:text-gray-300">Anzahl Termine</label>
                        <input type="number" data-model="count" min="1" class="block w-full rounded-md border-gray-300 text-sm dark:bg-gray-700 dark:border-gray-600">
                    </div>
                </div>
                <p class="mt-1 text-xs text-gray-500">Gesamtzahl der Termine inklusive des ersten Termins.</p>
            </div>
        {% endif %}

        {% if success %}
            {% if wasNew %}
                <twig:Turbo:Stream:Append target="#offer-dates-list">
                    <twig:Admin:Offer:OfferDateItem :date="date" />
                </twig:Turbo:Stream:Append>
            {% else %}
                <twig:Turbo:Stream:Replace target="#offer-date-{{ date.uuid }}">
                    <twig:Admin:Offer:OfferDateItem :date="date" />
                </twig:Turbo:Stream:Replace>
            {% endif %}
            <twig:Turbo:Stream:Update target="#modal"/>
        {% endif %}

        <div class="pt-4 flex justify-end gap-x-3">
            <twig:Admin:Button type="button" 
                               variant="secondary"
                               command="close"
                               commandfor="admin-modal-dialog">
                Abbrechen
            </twig:Admin:Button>
            <twig:Admin:Button type="button"
                               variant="primary"
                               data-action="live#action"
                               data-live-action-param="save"
                               class="w-full sm:w-auto">
                Speichern
            </twig:Admin:Button>
        </div>
    </div>
</div>
