{% trans_default_domain 'admin' %}

{# Color slots per phase type. Each value is a single, contiguous class string
   used as-is in the template — Tailwind's content scanner sees every utility
   verbatim in this file (no `bg-${color}-500` style stitching, no values
   coming from PHP). Keep in sync with Tasks::PHASE_TYPES in the component.

   Slots:
     bar   — solid color used by the timeline bar and the colored row accent.
     edge  — border color for thin borders (currently unused after the section
             redesign, but kept for downstream callers).
     text  — type's text color for per-instance subtitles (e.g. "Losverfahren"
             inside an application_system row).
     glyph — pale bg + matching text + ring; used for icon backdrops and for
             the configured pills in the progress strip.
#}
{% set typeClasses = {
    host_editing_stage: {
        bar:   'bg-amber-500',
        edge:  'border-amber-400',
        text:  'text-amber-800 dark:text-amber-300',
        glyph: 'bg-amber-100 dark:bg-amber-500/15 text-amber-800 dark:text-amber-300 ring-amber-200 dark:ring-amber-500/30',
    },
    show_offers: {
        bar:   'bg-cyan-500',
        edge:  'border-cyan-400',
        text:  'text-cyan-800 dark:text-cyan-300',
        glyph: 'bg-cyan-100 dark:bg-cyan-500/15 text-cyan-800 dark:text-cyan-300 ring-cyan-200 dark:ring-cyan-500/30',
    },
    application_system: {
        bar:   'bg-emerald-500',
        edge:  'border-emerald-400',
        text:  'text-emerald-800 dark:text-emerald-300',
        glyph: 'bg-emerald-100 dark:bg-emerald-500/15 text-emerald-800 dark:text-emerald-300 ring-emerald-200 dark:ring-emerald-500/30',
    },
    allocation: {
        bar:   'bg-sky-500',
        edge:  'border-sky-400',
        text:  'text-sky-800 dark:text-sky-300',
        glyph: 'bg-sky-100 dark:bg-sky-500/15 text-sky-800 dark:text-sky-300 ring-sky-200 dark:ring-sky-500/30',
    },
    publish_lists: {
        bar:   'bg-indigo-500',
        edge:  'border-indigo-400',
        text:  'text-indigo-800 dark:text-indigo-300',
        glyph: 'bg-indigo-100 dark:bg-indigo-500/15 text-indigo-800 dark:text-indigo-300 ring-indigo-200 dark:ring-indigo-500/30',
    },
    holiday: {
        bar:   'bg-rose-500',
        edge:  'border-rose-400',
        text:  'text-rose-800 dark:text-rose-300',
        glyph: 'bg-rose-100 dark:bg-rose-500/15 text-rose-800 dark:text-rose-300 ring-rose-200 dark:ring-rose-500/30',
    },
    custom: {
        bar:   'bg-gray-400',
        edge:  'border-gray-300',
        text:  'text-gray-700 dark:text-gray-300',
        glyph: 'bg-gray-100 dark:bg-gray-700/40 text-gray-700 dark:text-gray-300 ring-gray-200 dark:ring-gray-600/30',
    },
} %}

{# Status-pill color lookup → Admin:Badge `color` prop. `live` adds a pulsing
   dot via the Badge content block. #}
{% set statusBadgeColor = {
    live:    'green',
    past:    'gray',
    gray:    'gray',
    indigo:  'sky',
} %}

{# Reusable inline-checkbox macro. The native checkmark + box come from the
   project's `@tailwindcss/forms` setup (see admin-bundle/assets/styles/base.css
   where `[type="checkbox"] { @apply form-checkbox }` is declared globally) —
   no SVG overlay needed here. #}
{% macro inlineCheckbox(id, title, description, modelName, checked) %}
    <div class="flex gap-3">
        <div class="flex h-6 shrink-0 items-center">
            <input id="{{ id }}" type="checkbox"
                   data-model="{{ modelName }}"
                   {{ checked ? 'checked' : '' }}
                   {% if description %}aria-describedby="{{ id }}-description"{% endif %}
                   class="size-4 rounded-sm border-gray-300 text-primary-600 focus:ring-primary-600 dark:border-white/10 dark:bg-white/5 dark:checked:bg-primary-500" />
        </div>
        <div class="text-sm/6">
            <label for="{{ id }}" class="font-medium text-gray-900 dark:text-gray-100">{{ title }}</label>
            {% if description %}
                <p id="{{ id }}-description" class="text-gray-500 dark:text-gray-400">{{ description }}</p>
            {% endif %}
        </div>
    </div>
{% endmacro %}

{# Self-import so the macros above are addressable as `ui.inlineCheckbox(...)`. #}
{% import _self as ui %}

{# Predefined phase taxonomy on the Twig side — workflow order, matches
   Tasks::PHASE_TYPES in PHP. #}
{% set phaseTypes = ['host_editing_stage', 'show_offers', 'application_system', 'allocation', 'publish_lists', 'holiday', 'custom'] %}
{% set multiTypes = ['application_system', 'custom'] %}
{% set typeIcons = {
    host_editing_stage: 'ph:pencil-simple',
    show_offers:        'ph:globe-hemisphere-west',
    application_system: 'ph:user-plus',
    allocation:         'ph:shuffle',
    publish_lists:      'ph:list-bullets',
    holiday:            'ph:sun-horizon',
    custom:             'ph:dots-three-vertical',
} %}


<div {{ attributes.defaults({ id: 'edition-tasks-component', class: 'border-t border-gray-200 dark:border-gray-800 mt-6 pt-6' }) }}>

    {# Section title + description come from the layout's `edit_header` block
       (sourced from `editions.legend.tasks.{0,1}` translations). #}

    {# ───────── Progress strip ─────────
       Glanceable checklist of configured types. Filled+colored when configured,
       gray+outlined when not. Click to scroll-jump to that section. #}
    {% set phasesByType = this.phasesByType %}
    {% set configuredCount = this.configuredCount %}
    <div class="mb-5 flex items-center gap-1.5 flex-wrap">
        {% for type in phaseTypes %}
            {% set configured = phasesByType[type] is not empty %}
            <button type="button"
                    x-data
                    @click="document.getElementById('section-{{ type }}').scrollIntoView({behavior:'smooth', block:'start'})"
                    title="{{ configured ? 'Konfiguriert — zur Phase springen' : 'Nicht konfiguriert' }}"
                    class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-xs font-medium ring-1 ring-inset transition {{ configured ? typeClasses[type].glyph ~ ' hover:brightness-95' : 'bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400 ring-gray-200 dark:ring-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700/60' }}">
                <span class="size-4 inline-flex items-center justify-center rounded-full {{ configured ? typeClasses[type].bar ~ ' text-white' : 'bg-gray-100 dark:bg-gray-700 text-gray-400 dark:text-gray-500' }}">
                    {% if configured %}
                        <twig:ux:icon name="ph:check-bold" class="size-2.5" />
                    {% else %}
                        <span class="text-[9px] leading-none">+</span>
                    {% endif %}
                </span>
                {{ ("editions.task.short." ~ type)|trans }}
            </button>
        {% endfor %}
    </div>

    {# ───────── Gantt-style timeline ───────── #}
    {% set tl = this.timeline %}
    {% if tl is null %}
        <div class="rounded-lg border border-dashed border-gray-200 dark:border-gray-700 p-8 text-center text-sm text-gray-500 dark:text-gray-400">
            Keine datierten Phasen — richten Sie unten welche ein, um sie hier zeitlich zu sehen.
        </div>
    {% else %}
        <div class="rounded-lg ring-1 ring-gray-200 dark:ring-gray-800 bg-white dark:bg-gray-900 overflow-hidden">
            <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between flex-wrap gap-2">
                <div>
                    <div class="text-sm font-semibold text-gray-900 dark:text-gray-100">Zeitlicher Ablauf</div>
                    <div class="text-sm text-gray-500 dark:text-gray-400">
                        {{ tl.start|date('d.m.Y') }} – {{ tl.end|date('d.m.Y') }} · {{ tl.count }} datierte Phasen
                    </div>
                </div>
                <div class="flex items-center gap-x-3 text-[11px] text-gray-500 dark:text-gray-400">
                    <span class="inline-flex items-center gap-1.5"><span class="block w-3 h-0.5 bg-red-500"></span>Heute</span>
                    <span class="inline-flex items-center gap-1.5"><span class="block size-2.5 rounded bg-emerald-500"></span>Anmeldung</span>
                    <span class="inline-flex items-center gap-1.5"><span class="block size-2.5 rounded bg-amber-500"></span>Bearbeitung</span>
                    <span class="inline-flex items-center gap-1.5"><span class="block size-2.5 rounded bg-rose-500"></span>Ferien</span>
                </div>
            </div>

            <div class="px-4 pt-4 pb-3">
                {# Month header. left/width come from the server-computed pct so the
                   layout doesn't reflow on the client and is RTL-safe. #}
                <div class="relative h-5 mb-1">
                    {% for m in tl.months %}
                        <div class="absolute top-0 text-[11px] text-gray-400 dark:text-gray-500 font-semibold"
                             style="left: {{ m.leftPct }}%; width: {{ m.widthPct }}%;">
                            <span class="pl-1">{{ m.label }}</span>
                        </div>
                    {% endfor %}
                </div>

                <div class="relative">
                    {# Month gridlines #}
                    {% for m in tl.months %}
                        <div class="absolute top-0 bottom-0 border-l border-gray-100 dark:border-gray-800"
                             style="left: {{ m.leftPct }}%;"></div>
                    {% endfor %}

                    {# "Heute" marker #}
                    <div class="absolute top-0 bottom-0 z-10" style="left: {{ tl.todayPct }}%;">
                        <div class="absolute -top-1 -left-[5px] size-2.5 rounded-full bg-red-500 ring-2 ring-white dark:ring-gray-900"></div>
                        <div class="h-full w-px bg-red-500/80"></div>
                        <div class="absolute top-1 left-2 text-[10px] font-bold text-red-600 dark:text-red-400 bg-white dark:bg-gray-900 px-1 rounded">Heute</div>
                    </div>

                    {# Phase bars — one row per bar, click jumps to card. #}
                    <div class="relative" style="padding-top: 8px;">
                        {% for bar in tl.bars %}
                            {% set safeType = bar.type in phaseTypes ? bar.type : 'custom' %}
                            <div class="relative h-7">
                                <button type="button"
                                        data-action="live#action"
                                        data-live-action-param="jumpTo"
                                        data-live-key-param="{{ bar.key }}"
                                        title="{{ ("editions.task." ~ safeType)|trans }} · {{ bar.range }}"
                                        style="left: {{ bar.leftPct }}%; width: {{ bar.widthPct }}%;"
                                        class="absolute top-1 h-5 rounded-md {{ typeClasses[safeType].bar }} hover:brightness-95 transition shadow-sm {{ focusKey == bar.key ? 'ring-2 ring-offset-2 ring-primary-600 dark:ring-offset-gray-900' : '' }} flex items-center px-2 text-[11px] font-medium text-white truncate text-left">
                                    <span class="truncate">{{ ("editions.task.short." ~ safeType)|trans }}</span>
                                </button>
                            </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    {# ───────── Predefined sections ─────────
       One section per phase type, rendered in workflow order. Each section
       owns its own typographic header (icon + title + status pill + description)
       — phase rows underneath are intentionally header-less. #}
    <div class="mt-8 flex flex-col gap-y-8">
        {% for sectionType in phaseTypes %}
            {% set typePhases = phasesByType[sectionType] %}
            {% set isEmpty = typePhases is empty %}
            {% set isMulti = sectionType in multiTypes %}
            {% set summary = this.sectionSummary(sectionType) %}

            <section id="section-{{ sectionType }}" class="scroll-mt-24">

                {# Section header — icon, title, summary status (or empty eyebrow), description, CTA. #}
                <div class="flex items-start gap-4 mb-2">
                    <div class="size-9 rounded-md flex items-center justify-center shrink-0 ring-1 ring-inset {{ typeClasses[sectionType].glyph }}">
                        <twig:ux:icon :name="typeIcons[sectionType]" class="size-5" />
                    </div>

                    <div class="flex-1 min-w-0 pt-0.5">
                        <div class="flex items-center gap-2 flex-wrap">
                            <h3 class="text-[15px] font-bold text-gray-900 dark:text-gray-100">{{ ("editions.task." ~ sectionType)|trans }}</h3>

                            {% if isEmpty %}
                                <span class="text-xs italic text-gray-400 dark:text-gray-500">Nicht konfiguriert</span>
                            {% else %}
                                {% if summary %}
                                    <twig:Admin:Badge :color="statusBadgeColor[summary.tone]|default('gray')" :pill="true">
                                        <twig:block name="content">
                                            {% if summary.kind == 'live' %}
                                                <span class="mr-1.5 block size-1.5 rounded-full bg-green-500 animate-pulse"></span>
                                            {% endif %}
                                            {{ summary.label }}
                                        </twig:block>
                                    </twig:Admin:Badge>
                                {% endif %}
                                {% if isMulti %}
                                    <span class="text-[11px] text-gray-500 dark:text-gray-400">· {{ typePhases|length }} Phase{{ typePhases|length > 1 ? 'n' : '' }}</span>
                                {% endif %}
                            {% endif %}
                        </div>
                        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ ("editions.task.description." ~ sectionType)|trans }}</p>
                    </div>

                    <div class="shrink-0">
                        {% if isEmpty %}
                            <twig:Admin:Button variant="primary"
                                               size="sm"
                                               data-action="live#action"
                                               data-live-action-param="addPhase"
                                               data-live-type-param="{{ sectionType }}">
                                <twig:ux:icon name="ph:plus" class="size-4 mr-1.5" />
                                Phase einrichten
                            </twig:Admin:Button>
                        {% elseif isMulti %}
                            <twig:Admin:Button variant="secondary"
                                               size="sm"
                                               data-action="live#action"
                                               data-live-action-param="addPhase"
                                               data-live-type-param="{{ sectionType }}">
                                <twig:ux:icon name="ph:plus" class="size-4 mr-1.5" />
                                Weitere
                            </twig:Admin:Button>
                        {% endif %}
                    </div>
                </div>

                {# Configured rows — single shared card per section so multi-instance
                   types (application_system, custom) read as one stack with
                   hairline dividers. Indented at ml-[52px] (36px icon + 16px gap). #}
                {% if not isEmpty %}
                    <div class="bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden divide-y divide-gray-100 dark:divide-gray-800 ml-[52px]">
                        {% for entry in typePhases %}
                            {% set key = entry.key %}
                            {% set data = entry.data %}
                            {% set isApp = sectionType == 'application_system' %}
                            {% set st = this.statusFor(data) %}

                            <div id="phase-row-{{ key }}"
                                 class="relative pl-5 pr-4 py-4 {{ focusKey == key ? 'ring-2 ring-inset ring-primary-500/60' : '' }}">

                                {# Colored left accent — full row height. #}
                                <div class="absolute left-0 top-0 bottom-0 w-1 {{ typeClasses[sectionType].bar }}" aria-hidden="true"></div>

                                <div class="flex items-start gap-4 flex-wrap">
                                    <div class="min-w-0 flex-1">

                                        {# Top line: per-instance subtitle + status + day count. #}
                                        <div class="flex items-center gap-2 flex-wrap">
                                            {% if isApp %}
                                                <span class="text-sm font-semibold {{ typeClasses[sectionType].text }}">
                                                    {% if data.applicationSystem == 'lot' %}Losverfahren
                                                    {% elseif data.applicationSystem == 'firstcome' %}Windhundverfahren
                                                    {% else %}Anmeldesystem nicht gewählt
                                                    {% endif %}
                                                </span>
                                            {% elseif sectionType == 'custom' and data.title %}
                                                <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ data.title }}</span>
                                            {% endif %}

                                            <twig:Admin:Badge :color="statusBadgeColor[st.tone]|default('gray')" :pill="true">
                                                <twig:block name="content">
                                                    {% if st.kind == 'live' %}
                                                        <span class="mr-1.5 block size-1.5 rounded-full bg-green-500 animate-pulse"></span>
                                                    {% endif %}
                                                    {{ st.label }}
                                                </twig:block>
                                            </twig:Admin:Badge>

                                            {% if not data.alwaysActive and data.periodBegin and data.periodEnd %}
                                                {% set begin = data.periodBegin|date('U') %}
                                                {% set finish = data.periodEnd|date('U') %}
                                                <span class="text-xs text-gray-500 dark:text-gray-400">· {{ max(1, ((finish - begin) / 86400)|round) }} Tage</span>
                                            {% endif %}
                                        </div>

                                        {# Two standalone datetime-local inputs with an arrow
                                           between — each gets its own form-input border from
                                           base.css. Simple, no compound wrapper to overflow. #}
                                        <div class="mt-2 flex items-center gap-2 flex-wrap">
                                            <input type="datetime-local"
                                                   value="{{ data.periodBegin }}"
                                                   data-model="on(change)|phases.{{ key }}.periodBegin"
                                                   {{ data.alwaysActive ? 'disabled' : '' }}
                                                   class="w-auto text-gray-900 dark:text-gray-100 dark:bg-gray-800">
                                            <span class="text-gray-400 dark:text-gray-500 select-none">→</span>
                                            <input type="datetime-local"
                                                   value="{{ data.periodEnd }}"
                                                   data-model="on(change)|phases.{{ key }}.periodEnd"
                                                   {{ data.alwaysActive ? 'disabled' : '' }}
                                                   class="w-auto text-gray-900 dark:text-gray-100 dark:bg-gray-800">
                                        </div>

                                        {% if isApp %}
                                            <div class="mt-2">
                                                {{ ui.inlineCheckbox(
                                                    'phase-' ~ key ~ '-alwaysActive',
                                                    'Immer aktiv',
                                                    'Datumsfelder werden deaktiviert.',
                                                    'phases.' ~ key ~ '.alwaysActive',
                                                    data.alwaysActive
                                                ) }}
                                            </div>
                                        {% endif %}
                                    </div>

                                    {# Icon-only ghost delete — relies on title + aria-label. #}
                                    <twig:Admin:Button variant="ghost"
                                                       size="sm"
                                                       class="!px-2 text-gray-400 hover:text-red-700 hover:bg-red-50 dark:hover:text-red-400 dark:hover:bg-red-500/10"
                                                       title="Phase entfernen"
                                                       aria-label="Phase entfernen"
                                                       data-action="live#action"
                                                       data-live-action-param="deletePhase"
                                                       data-live-key-param="{{ key }}">
                                        <twig:ux:icon name="ph:trash" class="size-4" />
                                    </twig:Admin:Button>
                                </div>

                                {# ───── Type-specific config ───── #}
                                {% if sectionType == 'custom' %}
                                    <div class="mt-4 pt-4 border-t border-dashed border-gray-200 dark:border-gray-700">
                                        <label class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1">Titel</label>
                                        <input type="text"
                                               value="{{ data.title }}"
                                               data-model="on(change)|phases.{{ key }}.title"
                                               class="block w-full text-gray-900 dark:text-gray-100">
                                    </div>
                                {% endif %}

                                {% if isApp %}
                                    <div class="mt-4 pt-4 border-t border-dashed border-gray-200 dark:border-gray-700 grid grid-cols-1 lg:grid-cols-2 gap-x-8 gap-y-4">

                                        {# Anmeldesystem — radio cards. Sub-type is also the row's subtitle (see above). #}
                                        <div>
                                            <label class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1.5">Anmeldesystem</label>
                                            <div class="grid grid-cols-2 gap-2">
                                                {% for opt in [
                                                    {id: 'lot',       label: 'Losverfahren',      desc: 'Anmeldungen werden gesammelt und am Ende zufällig zugeteilt.'},
                                                    {id: 'firstcome', label: 'Windhundverfahren', desc: 'Wer zuerst kommt, mahlt zuerst.'}
                                                ] %}
                                                    {% set sel = data.applicationSystem == opt.id %}
                                                    <button type="button"
                                                            data-action="live#action"
                                                            data-live-action-param="setApplicationSystem"
                                                            data-live-key-param="{{ key }}"
                                                            data-live-system-param="{{ opt.id }}"
                                                            class="text-left rounded-md p-2.5 transition ring-1 ring-inset {{ sel ? 'ring-primary-600 bg-primary-50/60 dark:bg-primary-500/10' : 'ring-gray-200 dark:ring-gray-700 hover:ring-gray-300 dark:hover:ring-gray-600 bg-white dark:bg-gray-800' }}">
                                                        <div class="flex items-center gap-2">
                                                            <span class="size-3.5 rounded-full ring-1 {{ sel ? 'ring-primary-600 bg-primary-600' : 'ring-gray-300 dark:ring-gray-600' }} flex items-center justify-center">
                                                                {% if sel %}<span class="size-1.5 rounded-full bg-white"></span>{% endif %}
                                                            </span>
                                                            <span class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ opt.label }}</span>
                                                        </div>
                                                        <p class="text-[11px] text-gray-500 dark:text-gray-400 mt-1 leading-snug">{{ opt.desc }}</p>
                                                    </button>
                                                {% endfor %}
                                            </div>
                                        </div>

                                        {% if data.applicationSystem == 'lot' %}
                                            <div>
                                                <label class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1.5">Maximale Anmeldungen pro Kind</label>
                                                <div class="flex items-center gap-2 flex-wrap">
                                                    <input type="number"
                                                           value="{{ data.maxApplications|default(5) }}"
                                                           data-model="on(change)|phases.{{ key }}.maxApplications"
                                                           class="w-20 text-gray-900 dark:text-gray-100 text-center">
                                                    <span class="text-sm text-gray-500 dark:text-gray-400">Anmeldungen</span>
                                                </div>
                                                <div class="mt-2">
                                                    {{ ui.inlineCheckbox(
                                                        'phase-' ~ key ~ '-skipMax',
                                                        'Mehr Anmeldungen erlauben',
                                                        'Unbegrenzte Anmeldungen möglich; nur die obige Anzahl wird priorisiert.',
                                                        'phases.' ~ key ~ '.skipMaxApplications',
                                                        data.skipMaxApplications
                                                    ) }}
                                                </div>
                                            </div>
                                        {% endif %}

                                        {% if data.applicationSystem == 'firstcome' %}
                                            <div class="space-y-3">
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1.5">Maximale Anmeldungen pro Tag</label>
                                                    <input type="number"
                                                           value="{{ data.maxApplicationsDay|default(99) }}"
                                                           data-model="on(change)|phases.{{ key }}.maxApplicationsDay"
                                                           class="w-28 text-gray-900 dark:text-gray-100">
                                                </div>
                                                <div>
                                                    <label class="block text-sm font-medium text-gray-900 dark:text-gray-100 mb-1.5">Warteliste Überbuchung</label>
                                                    <input type="number"
                                                           value="{{ data.maxWaitlist|default(0) }}"
                                                           data-model="on(change)|phases.{{ key }}.maxWaitlist"
                                                           class="w-28 text-gray-900 dark:text-gray-100">
                                                    <p class="mt-1 text-sm/6 text-gray-500 dark:text-gray-400">Wie viele dürfen auf der Warteliste stehen; »0« deaktiviert sie.</p>
                                                </div>
                                            </div>
                                        {% endif %}

                                        <div class="lg:col-span-2 grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-3">
                                            {{ ui.inlineCheckbox(
                                                'phase-' ~ key ~ '-allowAnon',
                                                'Anmeldungen ohne Benutzerkonto erlauben',
                                                'Eltern können sich ohne Registrierung anmelden.',
                                                'phases.' ~ key ~ '.allowAnonymous',
                                                data.allowAnonymous
                                            ) }}

                                            {% if data.allowAnonymous %}
                                                {{ ui.inlineCheckbox(
                                                    'phase-' ~ key ~ '-allowAnonFee',
                                                    'Auch kostenpflichtige Angebote ohne Konto',
                                                    'Erlauben Sie anonyme Anmeldungen auch bei Kosten.',
                                                    'phases.' ~ key ~ '.allowAnonymousFee',
                                                    data.allowAnonymousFee
                                                ) }}
                                            {% endif %}

                                            <div>
                                                <div class="text-sm font-medium text-gray-900 dark:text-gray-100">Anmeldung nur mit Zugangscode</div>
                                                <p class="text-sm/6 text-gray-500 dark:text-gray-400 mb-1.5">Wählen Sie eine Zugangscode-Strategie, oder leer lassen für freien Zugang.</p>
                                                <select data-model="phases.{{ key }}.accessCodeStrategyId"
                                                        class="text-gray-900 dark:text-gray-100 dark:bg-gray-800">
                                                    <option value="">— Kein Zugangscode —</option>
                                                    {% for strategy in this.accessCodeStrategies %}
                                                        <option value="{{ strategy.id }}" {{ data.accessCodeStrategyId == strategy.id ? 'selected' : '' }}>{{ strategy.name }}</option>
                                                    {% endfor %}
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}

                                {% if sectionType == 'holiday' %}
                                    <div class="mt-3 text-sm/6 text-gray-500 dark:text-gray-400">
                                        <strong class="font-medium text-gray-700 dark:text-gray-300">Hinweis:</strong>
                                        Die Termine einzelner Angebote dürfen sich nicht außerhalb dieses Zeitraums bewegen.
                                    </div>
                                {% endif %}
                            </div>
                        {% endfor %}
                    </div>
                {% endif %}
            </section>
        {% endfor %}
    </div>

    {# Sticky save bar — same component used by all other section components. #}
    <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>
