{{-- Gebaut wie die Bereitschaftsseite, und das mit Absicht.

     Die erste Fassung nahm das Muster der Host-Anlegen-Seite: `lbl`-Etikett,
     große Kopfzeile, pro Punkt eine fette Karte mit einer Beschreibungsliste
     darin. Das ist die Sprache einer Formularseite, nicht die einer Liste mit
     Zuständen — und für dieselbe Aufgabe gibt es in dieser Konsole längst eine:
     Bereitschaft. Zwei Muster für ein Problem sind zwei Sprachen.

     Also: schlichte Kopfzeile, ein Sammelbanner mit dem dringendsten Zustand,
     danach je Zustand eine Karte mit einer `divide-y`-Liste. Ein Punkt ist eine
     Zeile mit Symbol, Titel und drei kleinen Angaben darunter — nicht
     ein eigener Kasten. --}}

@php
    // Ton je Zustand, an einer Stelle. Nur „verkauft, nicht geliefert" ist rot:
    // wenn alles auffällt, fällt nichts auf.
    $tone = [
        App\Support\OpenWork::SOLD => ['alert-triangle', 'text-danger'],
        App\Support\OpenWork::PARTIAL => ['alert-triangle', 'text-warning'],
        App\Support\OpenWork::UNPROVEN => ['shield-check', 'text-muted'],
        App\Support\OpenWork::PLANNED => ['bell', 'text-muted'],
    ];
@endphp

<div class="space-y-5">
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('open_work.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('open_work.subtitle') }}</p>
    </div>

    @if ($groups)
        {{-- Ein Satz, der die Frage vor der Liste beantwortet: ist etwas dabei,
             das gerade Geld kostet? Der Ton kommt vom dringendsten Zustand, der
             wirklich vorkommt — nicht von einer festen Farbe. --}}
        @php([$worstIcon, $worstText] = $tone[$worst])
        <div class="flex items-center gap-3 rounded-lg border p-5 shadow-xs animate-rise
                    {{ $worst === App\Support\OpenWork::SOLD ? 'border-danger/30 bg-danger/5' : 'border-line bg-surface' }}">
            <x-ui.icon :name="$worstIcon" class="{{ $worstText }}" />
            <p class="text-lg font-semibold {{ $worstText }}">
                {{ trans_choice('open_work.summary', $total, ['n' => $total]) }}
            </p>
        </div>

        @foreach ($groups as $state => $items)
            @php([$icon, $text] = $tone[$state])
            <div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
                <div class="flex flex-wrap items-baseline justify-between gap-x-3 gap-y-1">
                    <h2 class="font-semibold text-ink">{{ __('open_work.state.'.$state) }}</h2>
                    <span class="text-xs tabular-nums text-muted">{{ count($items) }}</span>
                </div>
                <p class="mt-1 text-sm text-muted">{{ __('open_work.state_hint.'.$state) }}</p>

                <ul class="mt-3 divide-y divide-line">
                    @foreach ($items as $item)
                        <li class="flex flex-wrap items-start gap-3 py-3">
                            <x-ui.icon :name="$icon" class="mt-0.5 size-4 shrink-0 {{ $text }}" />

                            <div class="min-w-0 flex-1">
                                {{-- Keine Zustands-Plakette an der Zeile: die
                                     Karte darüber sagt den Zustand schon, und
                                     alle Zeilen darin teilen ihn. Sie stand
                                     hier und wiederholte dasselbe Wort dreimal
                                     pro Bildschirm, ohne eine Frage zu
                                     beantworten. --}}
                                <p class="font-medium text-ink">{{ $item['title'] }}</p>

                                {{-- Was fehlt, dann die Folge. Die Folge zuletzt,
                                     weil sie den Satz ist, der über die
                                     Reihenfolge entscheidet — und der letzte
                                     bleibt hängen. --}}
                                <p class="mt-1 max-w-[76ch] text-sm text-muted">{{ $item['missing'] }}</p>
                                <p class="mt-1 max-w-[76ch] text-sm {{ $state === App\Support\OpenWork::SOLD ? 'text-danger' : 'text-body' }}">
                                    <span class="text-muted">{{ __('open_work.risk') }}:</span> {{ $item['risk'] }}
                                </p>
                                <p class="mt-1 font-mono text-xs text-faint break-all">{{ $item['where'] }}</p>
                            </div>
                        </li>
                    @endforeach
                </ul>
            </div>
        @endforeach
    @else
        <div class="rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise">
            <p class="text-sm text-muted">{{ __('open_work.empty') }}</p>
        </div>
    @endif
</div>