{{-- Hospital overview table shared by admin, director and consultant dashboards. --}}
<section class="slmc-card overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slmc-line p-6">
        <div>
            <p class="mb-1 text-xs font-semibold tracking-widest text-slmc-600 uppercase">{{ $eyebrow ?? 'Access scope' }}</p>
            <h3 class="text-xl font-bold text-slmc">{{ $title ?? 'Hospital Overview' }}</h3>
        </div>
        <span class="bg-warm-gradient rounded-full px-3 py-1 text-xs font-semibold text-white">Phase 1</span>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left text-sm">
            <thead class="bg-slmc-tint text-[11px] tracking-wider text-slmc-500 uppercase">
                <tr>
                    <th class="px-6 py-3 font-bold">Hospital</th>
                    <th class="px-6 py-3 font-bold">Code</th>
                    <th class="px-6 py-3 font-bold">Consultants</th>
                    <th class="px-6 py-3 font-bold">Active intern allocations</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slmc-line">
                @forelse($items as $item)
                    <tr class="hover:bg-[#f7faff]">
                        <td class="px-6 py-4 font-semibold text-slmc">{{ $item->name }}</td>
                        <td class="px-6 py-4"><span class="rounded-md bg-slmc-tint px-2 py-0.5 font-mono text-xs text-slmc-500">{{ $item->code }}</span></td>
                        <td class="px-6 py-4">{{ $item->consultants_count }}</td>
                        <td class="px-6 py-4">{{ $item->active_intern_allocations_count }}</td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="4" class="px-6 py-12 text-center">
                            <i class="ri-inbox-line mb-2 block text-3xl text-slmc-sky"></i>
                            <span class="text-gray-500">No records available yet.</span>
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</section>