<x-filament-panels::page>
    @php
        $tabs = [
            'databases' => ['label' => __('Databases'), 'icon' => 'heroicon-o-circle-stack'],
            'users' => ['label' => __('Users'), 'icon' => 'heroicon-o-users'],
        ];
    @endphp

    <nav class="fi-tabs flex max-w-full gap-x-1 overflow-x-auto mx-auto rounded-xl bg-white p-2 shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10" role="tablist">
        @foreach($tabs as $key => $tab)
            <button
                type="button"
                role="tab"
                aria-selected="{{ $activeTab === $key ? 'true' : 'false' }}"
                wire:click="$set('activeTab', '{{ $key }}')"
                @class([
                    'fi-tabs-item group flex items-center gap-x-2 rounded-lg px-3 py-2 text-sm font-medium outline-none transition duration-75',
                    'fi-active bg-gray-50 dark:bg-white/5' => $activeTab === $key,
                    'hover:bg-gray-50 focus-visible:bg-gray-50 dark:hover:bg-white/5 dark:focus-visible:bg-white/5' => $activeTab !== $key,
                ])
            >
                <x-filament::icon
                    :icon="$tab['icon']"
                    @class([
                        'fi-tabs-item-icon h-5 w-5 shrink-0 transition duration-75',
                        'text-primary-600 dark:text-primary-400' => $activeTab === $key,
                        'text-gray-400 group-hover:text-gray-500 group-focus-visible:text-gray-500 dark:text-gray-500 dark:group-hover:text-gray-400 dark:group-focus-visible:text-gray-400' => $activeTab !== $key,
                    ])
                />
                <span @class([
                    'fi-tabs-item-label transition duration-75',
                    'text-primary-600 dark:text-primary-400' => $activeTab === $key,
                    'text-gray-500 group-hover:text-gray-700 group-focus-visible:text-gray-700 dark:text-gray-400 dark:group-hover:text-gray-200 dark:group-focus-visible:text-gray-200' => $activeTab !== $key,
                ])>
                    {{ $tab['label'] }}
                </span>
            </button>
        @endforeach
    </nav>

    <div class="mt-4">
        {{ $this->table }}
    </div>

    <x-filament-actions::modals />
</x-filament-panels::page>
