{{-- Ticket Queue by Store — per-store rows + synthetic
     "Unassigned store" row for tickets with store_id IS NULL.
     Frame chrome lives in the dashboard view. --}}
<div data-test="widget-ticket-queue-by-store" 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-ticket-queue-by-store-empty">
            {{ __('No stores or tickets in this account yet.') }}
        </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 text-right">{{ __('Open') }}</th>
                        <th class="px-3 py-2.5 text-right">{{ __('Pending') }}</th>
                        <th class="px-3 py-2.5 text-right">{{ __('Unassigned') }}</th>
                        <th class="px-3 py-2.5">{{ __('Oldest open') }}</th>
                        <th class="px-3 py-2.5">{{ __('SLA') }}</th>
                        <th class="px-3 py-2.5">{{ __('Flags') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-zinc-100 dark:divide-zinc-800">
                    @foreach ($this->rows as $row)
                        @php $isUnassignedStore = $row['store_id'] === null; @endphp
                        <tr
                            class="hover:bg-zinc-50 dark:hover:bg-zinc-800/40"
                            data-test="widget-tqbs-row"
                            data-store-id="{{ $row['store_id'] ?? '' }}"
                        >
                            <td class="px-5 py-3">
                                <div class="font-medium text-zinc-900 dark:text-zinc-100" data-test="widget-tqbs-store-name">
                                    {{ $row['store_name'] }}
                                </div>
                                @if ($row['store_slug'])
                                    <div class="font-mono text-xs text-zinc-500 dark:text-zinc-400">{{ $row['store_slug'] }}</div>
                                @elseif ($isUnassignedStore)
                                    <div class="text-xs text-zinc-500 dark:text-zinc-400" data-test="widget-tqbs-unassigned-store-note">
                                        {{ __('Tickets not yet matched to a store') }}
                                    </div>
                                @endif
                            </td>

                            <td class="px-3 py-3 text-right font-medium text-zinc-900 dark:text-zinc-100" data-test="widget-tqbs-open">
                                {{ $row['open'] }}
                            </td>
                            <td class="px-3 py-3 text-right text-zinc-700 dark:text-zinc-300" data-test="widget-tqbs-pending">
                                {{ $row['pending'] }}
                            </td>
                            <td class="px-3 py-3 text-right text-zinc-700 dark:text-zinc-300" data-test="widget-tqbs-unassigned">
                                {{ $row['unassigned'] }}
                            </td>

                            <td class="px-3 py-3 text-xs text-zinc-600 dark:text-zinc-400" data-test="widget-tqbs-oldest">
                                @if ($row['oldest_open_at'])
                                    {{ $row['oldest_open_at']->diffForHumans(short: true) }}
                                @else
                                    <span class="text-zinc-400 dark:text-zinc-500">—</span>
                                @endif
                            </td>

                            <td class="px-3 py-3" data-test="widget-tqbs-sla">
                                @if ($isUnassignedStore)
                                    <span class="text-zinc-400 dark:text-zinc-500">—</span>
                                @else
                                    <span class="text-zinc-900 dark:text-zinc-100">
                                        {{ trans_choice('{1} :n day|[2,*] :n days', $row['sla_days'], ['n' => $row['sla_days']]) }}
                                    </span>
                                @endif
                            </td>

                            <td class="px-3 py-3">
                                @if ($row['high_volume'])
                                    <flux:badge size="sm" color="orange" data-test="widget-tqbs-flag-hv">
                                        {{ __('High volume') }}
                                    </flux:badge>
                                @else
                                    <span class="text-xs text-zinc-400 dark:text-zinc-500">—</span>
                                @endif
                            </td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
    @endif
</div>