{{-- 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])
        {{-- `bg-danger-bg` und `border-danger-border`, nicht `bg-danger/5`:
             dieses Haus hat für gedämpfte Töne eigene Tokens
             (resources/css/portal-tokens.css). Die Deckkraft-Schreibweise ergab
             hier gar keinen sichtbaren Hintergrund — der Kasten stand
             durchsichtig da, nur mit Rahmen. --}}
        <div class="flex items-center gap-3 rounded-lg border p-5 shadow-xs animate-rise
                    {{ $worst === App\Support\OpenWork::SOLD ? 'border-danger-border bg-danger-bg' : '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>

                                {{-- Zwei Spalten, sobald Platz da ist.

                                     Beide Absätze standen untereinander mit
                                     `max-w-[76ch]`. Das Layout erlaubt aber
                                     1320 px, die Karte ist also über 1200 px
                                     breit — der Text endete in der Mitte und
                                     rechts blieb die halbe Karte leer.

                                     Die Grenze ganz wegzunehmen wäre die
                                     falsche Antwort: über die volle Breite
                                     wären es rund 165 Zeichen je Zeile, und
                                     eine Zeile, deren Anfang man beim Umbruch
                                     nicht mehr findet, liest niemand. Zwei
                                     Spalten füllen die Breite UND halten jede
                                     Spalte in der lesbaren Länge.

                                     Und sie passen inhaltlich: „was fehlt" ist
                                     eine Beschreibung, „wenn es so bleibt"
                                     eine Folge. Nebeneinander sieht man den
                                     Unterschied. --}}
                                <div class="mt-1 grid gap-x-10 gap-y-1 lg:grid-cols-2">
                                    <p class="text-sm text-muted">{{ $item['missing'] }}</p>
                                    <p class="text-sm {{ $state === App\Support\OpenWork::SOLD ? 'text-danger' : 'text-body' }}">
                                        <span class="text-muted">{{ __('open_work.risk') }}:</span> {{ $item['risk'] }}
                                    </p>
                                </div>

                                <p class="mt-1.5 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>