{% trans_default_domain 'admin' %}

<div {{ attributes.defaults({ id: 'edition-cms-component', class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6' }) }}>
    <div class="space-y-8">

        {# --- Navigation --- #}
        <div class="space-y-4">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Seitennavigation</h3>

            <label class="flex items-start gap-x-3 text-sm text-gray-700 dark:text-gray-300">
                <input type="checkbox" data-model="addToNavigation"
                       class="mt-0.5 rounded border-gray-300 text-primary-600 focus:ring-primary-600 dark:bg-gray-800 dark:border-gray-700">
                <span>
                    <span class="font-medium">Zur Seitennavigation hinzufügen</span>
                    <span class="block text-gray-500 dark:text-gray-400">Die öffentliche Angebotsseite dieser Saison erscheint im Hauptmenü der Website.</span>
                </span>
            </label>

            {% if addToNavigation %}
                <div class="max-w-md">
                    <label for="cms-position-after" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
                        Einsortieren nach
                    </label>
                    <select id="cms-position-after" data-model="navigationPositionAfter"
                            class="mt-1 block w-full 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">
                        <option value="">— am Ende —</option>
                        {% for id, label in this.pages %}
                            <option value="{{ id }}" {{ navigationPositionAfter == id ? 'selected' : '' }}>{{ label }}</option>
                        {% endfor %}
                    </select>
                    <p class="mt-2 text-sm text-gray-500 dark:text-gray-400">Der Menüpunkt wird direkt hinter der gewählten Seite eingefügt.</p>
                </div>
            {% endif %}
        </div>

        {# --- Welcome text --- #}
        <div class="space-y-2">
            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300 uppercase tracking-wider">Begrüßungstext</h3>
            <label for="cms-welcome-text" class="sr-only">Begrüßungstext</label>
            <textarea id="cms-welcome-text" rows="6" data-model="debounce(300)|welcomeText"
                      class="block w-full rounded-md border-gray-300 shadow-sm focus:border-primary-500 focus:ring-primary-500 sm:text-sm font-mono dark:bg-gray-800 dark:border-gray-700"
                      placeholder="Optionaler Einleitungstext (Markdown), wird oberhalb der Angebotsliste angezeigt.">{{ welcomeText }}</textarea>
            <p class="text-sm text-gray-500 dark:text-gray-400">Markdown wird unterstützt. Der Text erscheint über der Angebotsliste auf der öffentlichen Saisonseite.</p>
        </div>

    </div>

    <twig:Admin:Edit:Footer
            :isDirty="isDirty"
            :sections="sections"
            :section="section"
            :params="{ alias: edition.alias }"
            :useLiveAction="true"
            editRoute="admin_editions_edit"
            viewRoute="admin_editions_show"
    />

    {% 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>
