@php
    // State is provided by the ViewEntry (computed checklist sections).
    $sections = $getState() ?? [];
@endphp

<div class="space-y-5">
    @foreach($sections as $section)
        @php $done = collect($section['items'])->where('status','done')->count(); $total = count($section['items']); @endphp
        <div>
            <div class="flex items-center justify-between mb-2">
                <div class="font-semibold text-sm">{{ $section['title'] }}</div>
                <div class="text-xs text-gray-500">{{ $done }} / {{ $total }}</div>
            </div>
            <div class="rounded-lg border border-gray-200 dark:border-white/10 divide-y divide-gray-100 dark:divide-white/5">
                @foreach($section['items'] as $it)
                    @php
                        $icon = $it['status'] === 'done' ? '✓' : ($it['status'] === 'pending' ? '○' : '–');
                        $iconColor = $it['status'] === 'done' ? 'text-green-600 dark:text-green-400' : 'text-gray-400';
                        $kindClass = $it['kind'] === 'auto'
                            ? 'bg-blue-100 text-blue-700 dark:bg-blue-500/20 dark:text-blue-300'
                            : 'bg-amber-100 text-amber-700 dark:bg-amber-500/20 dark:text-amber-300';
                    @endphp
                    <div class="flex items-center gap-3 px-3 py-2 text-sm">
                        <span class="{{ $iconColor }} w-4 text-center font-semibold">{{ $icon }}</span>
                        <span class="flex-1 text-gray-800 dark:text-gray-100">{{ $it['label'] }}</span>
                        <span class="text-[10px] uppercase tracking-wide px-1.5 py-0.5 rounded {{ $kindClass }}">{{ $it['kind'] }}</span>
                        <span class="text-xs text-gray-500 w-28 text-right truncate">{{ $it['detail'] }}</span>
                    </div>
                @endforeach
            </div>
        </div>
    @endforeach
</div>