{{-- SLA Overview widget content — refocused (Phase 2B).

     The outer card, title and description are rendered by the
     dashboard frame. This view returns only the inner content
     (a compact table of per-store SLA configuration). --}}
<div data-test="widget-sla-overview" class="overflow-hidden">
    @if (empty($this->rows))
        <div class="p-6 text-center text-sm text-zinc-500 dark:text-zinc-400" data-test="widget-sla-overview-empty">
            {{ __('No stores yet. Create one from the Stores page.') }}
        </div>
    @else
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead class="bg-zinc-50 text-left text-xs uppercase tracking-wide text-zinc-500 dark:bg-zinc-900 dark:text-zinc-400">
                    <tr>
                        <th class="px-5 py-2.5">{{ __('Store') }}</th>
                        <th class="px-3 py-2.5">{{ __('SLA') }}</th>
                        <th class="px-3 py-2.5">{{ __('Warning threshold') }}</th>
                        <th class="px-3 py-2.5">{{ __('Flags') }}</th>
                        <th class="px-3 py-2.5">{{ __('SLA risk') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @foreach ($this->rows as $row)
                        @php
                            /** @var \App\Models\Store $store */
                            $store = $row['store'];
                        @endphp
                        <tr
                            class="hover:bg-zinc-50 dark:hover:bg-zinc-800/40"
                            data-test="widget-sla-overview-row"
                            data-store-id="{{ $store->id }}"
                        >
                            <td class="px-5 py-3">
                                <div class="font-medium text-zinc-900 dark:text-zinc-100" data-test="widget-sla-store-name">
                                    {{ $store->name }}
                                </div>
                                <div class="font-mono text-xs text-zinc-500 dark:text-zinc-400">{{ $store->slug }}</div>
                            </td>

                            <td class="px-3 py-3" data-test="widget-sla-days">
                                @if ($row['settings_present'])
                                    <span class="text-zinc-900 dark:text-zinc-100">
                                        {{ trans_choice('{1} :n working day|[2,*] :n working days', $row['sla_working_days'], ['n' => $row['sla_working_days']]) }}
                                    </span>
                                @else
                                    <flux:badge size="sm" color="amber" data-test="widget-sla-settings-missing">
                                        {{ __('Settings missing') }}
                                    </flux:badge>
                                @endif
                            </td>

                            <td class="px-3 py-3 text-xs text-zinc-700 dark:text-zinc-300" data-test="widget-sla-warning-threshold">
                                @if ($row['warning_threshold'])
                                    {{ trans_choice('{1} :n hour|[2,*] :n hours', $row['warning_threshold'], ['n' => $row['warning_threshold']]) }}
                                @else
                                    <span class="text-zinc-400 dark:text-zinc-500">—</span>
                                @endif
                            </td>

                            <td class="px-3 py-3">
                                <div class="flex flex-wrap items-center gap-1">
                                    @if ($row['high_volume'])
                                        <flux:badge size="sm" color="orange" data-test="widget-sla-flag-hv">
                                            {{ __('High volume') }}
                                        </flux:badge>
                                    @endif
                                    @if ($row['wismo_auto_close'])
                                        <flux:badge size="sm" color="sky" data-test="widget-sla-flag-wismo">
                                            {{ __('WISMO auto-close') }}
                                        </flux:badge>
                                    @endif
                                    @if (! $row['high_volume'] && ! $row['wismo_auto_close'])
                                        <span class="text-xs text-zinc-400 dark:text-zinc-500">—</span>
                                    @endif
                                </div>
                            </td>

                            <td class="px-3 py-3">
                                {{-- SLA risk placeholder. The future engine will compute
                                     a per-store risk band against working-day SLA math. --}}
                                <flux:badge size="sm" color="zinc" data-test="widget-sla-risk">
                                    {{ __('Unknown') }}
                                </flux:badge>
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>