<div class="space-y-6">
    <header class="animate-rise">
        <p class="lbl">{{ __('mail_pace.eyebrow') }}</p>
        <h1 class="mt-[7px] text-[23px] font-bold leading-[1.12] tracking-[-0.03em] text-ink min-[901px]:text-[30px]">
            {{ __('mail_pace.title') }}
        </h1>
        <p class="mt-2 max-w-[76ch] text-sm leading-relaxed text-muted">{{ __('mail_pace.subtitle') }}</p>
    </header>

    {{-- Der Notschalter, ganz oben und in einem eigenen Panel: das ist der
         Griff, den jemand im Ernstfall zuerst sucht, nicht der letzte von
         mehreren. Kein Bestätigungsmodal (R23 verlangt eines nur dort, wo ein
         Vorgang Folgen hat, die man nicht zurückdrehen kann) — dieser Schalter
         ist umkehrbar, derselbe Klick legt ihn zurück, genau wie
         Admin\Plans::toggleSales(). --}}
    <x-ui.panel class="animate-rise [animation-delay:20ms]">
        <div class="px-6 py-4">
            <x-ui.switch name="pace_enabled" wire:click="togglePace" :checked="$enabled"
                         :label="__('mail_pace.enabled')"
                         :hint="__('mail_pace.enabled_hint')"
                         :on="__('mail_pace.enabled_on')"
                         :off="__('mail_pace.enabled_off')" />
        </div>
    </x-ui.panel>

    {{-- Die drei Spuren: Name, Takt, was gerade wartet. --}}
    <form wire:submit="savePace" class="animate-rise [animation-delay:40ms]">
        <h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('mail_pace.lanes_title') }}</h2>
        <p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('mail_pace.lanes_sub') }}</p>

        <x-ui.panel class="mt-4">
            @foreach ($lanes as $lane)
                {{-- Unter dem Spurnamen steht, was in ihr fährt. Dort stand
                     erst der Warteschlangenname mitten in der Wertspalte, dann
                     als Unterzeile — beides half niemandem: „Ruhig / mail-ruhig"
                     wiederholt die Überschrift in Kleinschrift. Der technische
                     Name gehört dorthin, wo er gebraucht wird (die --queue-Liste
                     in docker-compose.yml und MailLane), nicht auf die Seite,
                     auf der ein Betreiber entscheidet, was wie eilig ist. --}}
                <x-ui.row :label="__('mail_pace.lane.'.$lane['key'])"
                          :hint="__('mail_pace.lane_hint.'.$lane['key'])"
                          :for="$lane['throttled'] ? $lane['countField'] : null">
                    <div class="flex flex-wrap items-end gap-3">
                        @if ($lane['throttled'])
                            <div class="w-24">
                                <x-ui.input :name="$lane['countField']" type="number" min="1"
                                            wire:model="{{ $lane['countField'] }}"
                                            :label="__('mail_pace.count')" />
                            </div>
                            <div class="w-28">
                                <x-ui.input :name="$lane['minutesField']" type="number" min="1"
                                            wire:model="{{ $lane['minutesField'] }}"
                                            :label="__('mail_pace.minutes')" />
                            </div>
                        @else
                            <x-ui.badge status="info">{{ __('mail_pace.unthrottled') }}</x-ui.badge>
                        @endif

                        <x-ui.badge status="info">{{ __('mail_pace.waiting', ['count' => $lane['waiting']]) }}</x-ui.badge>
                    </div>
                    {{-- Kein eigenes @error hier: x-ui.input zeigt die Meldung
                         zum jeweiligen Feld schon selbst unter sich an. --}}
                </x-ui.row>
            @endforeach
        </x-ui.panel>

        <div class="mt-4 flex justify-end">
            <x-ui.button variant="primary" type="submit">{{ __('mail_pace.save') }}</x-ui.button>
        </div>
    </form>

    {{-- Die Zuordnung: welche Mailklasse in welcher Spur fährt. Ein <select>
         pro Zeile, R20's ausdrückliche Ausnahme — dieselbe Zeile, kein
         Höhensprung. Gesperrte Klassen zeigen ein Schloss statt der Auswahl:
         der Server lehnt sie ohnehin ab (Task 1, MailLane::assign()), das
         Schloss ist nur die Höflichkeit davor. --}}
    <section class="animate-rise [animation-delay:60ms]">
        <h2 class="text-md font-bold tracking-[-0.01em] text-ink">{{ __('mail_pace.assignments_title') }}</h2>
        <p class="mt-1 max-w-[70ch] text-sm leading-relaxed text-muted">{{ __('mail_pace.assignments_sub') }}</p>

        <x-ui.panel class="mt-4">
            @foreach ($assignments as $eintrag)
                <x-ui.row :label="$eintrag['label']" wire:key="lane-{{ $eintrag['class'] }}">
                    @if ($eintrag['locked'])
                        <span class="inline-flex items-center gap-1.5 text-sm text-muted">
                            <x-ui.icon name="lock" class="size-4" />{{ __('mail_pace.locked_hint') }}
                        </span>
                    @else
                        <select wire:change="move('{{ $eintrag['class'] }}', $event.target.value)"
                                aria-label="{{ $eintrag['label'] }}"
                                class="w-48 rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                            @foreach ($laneOptions as $option)
                                <option value="{{ $option }}" @selected($eintrag['lane'] === $option)>{{ __('mail_pace.lane.'.$option) }}</option>
                            @endforeach
                        </select>
                    @endif
                </x-ui.row>
            @endforeach
        </x-ui.panel>
    </section>
</div>
