@props([
    // Der Schritt, an dem der Betreiber gerade steht: 3 solange das Formular
    // offen ist, 4 sobald die Befehlszeile da ist.
    'current' => 3,
])

{{-- Der Ablauf als schmale Schiene, nicht als Textwand.

     Die erste Fassung war sechs Absätze übereinander, oberhalb des Formulars.
     Sie beantwortete alles und zeigte nichts: der eigentliche Auftrag dieser
     Seite — vier Felder ausfüllen — verschwand unter der Anleitung dazu.

     Sechs Wortpaare untereinander beantworten die Frage, die man hier wirklich
     hat („wo stehe ich, wie viel kommt noch"), auf einen Blick. Was ein Schritt
     inhaltlich bedeutet, steht in der Zeile, in der er dran ist — nicht sechsmal
     im Voraus.

     Dieselbe Form wie die Seitennavigation der Einstellungsseite: 232 px, ab
     `lg` klebend, darunter waagerecht scrollbar. Ein zweites Muster für
     dasselbe Problem wäre eine zweite Sprache. --}}

@php
    $steps = [
        1 => __('hosts.takeover.s1_label'),
        2 => __('hosts.takeover.s2_label'),
        3 => __('hosts.takeover.s3_label'),
        4 => __('hosts.takeover.s4_label'),
        5 => __('hosts.takeover.s5_label'),
        6 => __('hosts.takeover.s6_label'),
    ];
@endphp

<nav {{ $attributes->merge(['class' => '-mx-4 shrink-0 overflow-x-auto px-4 lg:mx-0 lg:w-[232px] lg:overflow-visible lg:px-0 lg:sticky lg:top-8']) }}
     aria-label="{{ __('hosts.takeover.rail_title') }}">
    <p class="lbl hidden lg:block">{{ __('hosts.takeover.rail_title') }}</p>

    <ol class="mt-2 flex gap-1.5 lg:flex-col lg:gap-0.5">
        @foreach ($steps as $number => $label)
            @php
                $isCurrent = $number === $current;
                $isPast = $number < $current;
            @endphp
            <li class="shrink-0">
                <div @class([
                    'flex items-center gap-2.5 rounded px-2.5 py-2 text-sm whitespace-nowrap lg:whitespace-normal',
                    'bg-surface-2 font-semibold text-ink' => $isCurrent,
                    'text-muted' => ! $isCurrent,
                ])>
                    {{-- Die Ziffer trägt den Zustand. Ein Häkchen daneben wäre
                         ein zweites Zeichen für dieselbe Aussage, und die
                         Nummer kann man abzählen. --}}
                    <span @class([
                        'flex size-5 shrink-0 items-center justify-center rounded-full border text-[11px] font-bold tabular-nums',
                        'border-transparent bg-success text-on-accent' => $isPast,
                        'border-accent text-accent-text' => $isCurrent,
                        'border-line text-muted' => ! $isPast && ! $isCurrent,
                    ])>{{ $number }}</span>
                    <span class="min-w-0">{{ $label }}</span>
                </div>
            </li>
        @endforeach
    </ol>

    <p class="mt-4 hidden max-w-[232px] text-xs leading-relaxed text-muted lg:block">
        {{ __('hosts.takeover.how_sub') }}
    </p>
</nav>