@props(['archiveUrl' => ''])

{{-- Dieselben sechs Schritte, für die Stelle, an der noch nichts angelegt ist:
     die Host-Liste. Dort ist es eine Auskunft und kein Ablauf — also Zeilen mit
     je einem Satz, nicht die Schiene mit Zustand.

     Eine Zeile je Schritt, nach dem Muster von `x-ui.row`: links wozu, rechts
     was. Die zwei Schritte beim Anbieter tragen eine Plakette, sonst liest sich
     die Liste, als könne man oben anfangen und sich durcharbeiten — und Schritt
     2 ist eine halbe Stunde Wartezeit. --}}

@php
    $steps = [
        1 => [__('hosts.takeover.s1_title'), __('hosts.takeover.s1_body'), true],
        2 => [__('hosts.takeover.s2_title'), __('hosts.takeover.s2_body'), true],
        3 => [__('hosts.takeover.s3_title'), __('hosts.takeover.s3_body'), false],
        4 => [__('hosts.takeover.s4_title'), __('hosts.takeover.s4_body'), false],
        5 => [__('hosts.takeover.s5_title'), __('hosts.takeover.s5_body'), false],
        6 => [__('hosts.takeover.s6_title'), __('hosts.takeover.s6_body'), false],
    ];
@endphp

<ol {{ $attributes->merge(['class' => 'divide-y divide-line']) }}>
    @foreach ($steps as $number => [$title, $body, $atProvider])
        <li class="grid gap-x-6 gap-y-1 px-6 py-3.5 sm:grid-cols-[minmax(0,220px)_minmax(0,1fr)] sm:items-baseline">
            <div class="flex items-center gap-2.5">
                <span class="flex size-5 shrink-0 items-center justify-center rounded-full border border-line text-[11px] font-bold tabular-nums text-muted">{{ $number }}</span>
                <span class="text-sm font-medium text-ink">{{ $title }}</span>
                @if ($atProvider)
                    <x-ui.badge status="warning">{{ __('hosts.takeover.badge_before') }}</x-ui.badge>
                @endif
            </div>
            <p class="text-sm leading-relaxed text-muted">
                {{ $body }}
                @if ($number === 5 && $archiveUrl)
                    <span class="block pt-0.5 text-xs">{{ __('hosts.takeover.s5_hint', ['url' => $archiveUrl]) }}</span>
                @endif
            </p>
        </li>
    @endforeach
</ol>