<x-layouts.app :title="__('Users')" :showSidebar={{ $showSidebar }}>

    <div class="flex justify-between items-center mb-6">
        <div class="flex items-center gap-4 mb-4">
            <flux:icon.user class="size-8" variant="solid" />
            <h1 class="text-3xl font-bold text-gray-800">Usuarios</h1>
        </div>
        <a href="{{ route('users.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
            Nuevo
        </a>
    </div>

    @livewire('user-table')

    <!-- Sidebar menu -->
    @push('sidebar-menu')
    <flux:navlist variant="outline">
        <!-- Sección de Usuarios -->
        <flux:navlist.group :heading="__('User')">
            <flux:navlist.item 
                icon="users" 
                :href="route('users.index')" 
                wire:navigate
            >
                {{ __('List Users') }}
            </flux:navlist.item>
            
            <flux:navlist.item 
                icon="user-plus" 
                :href="route('users.create')" 
                wire:navigate
            >
                {{ __('Create User') }}
            </flux:navlist.item>
        </flux:navlist.group>
        
        <flux:separator />
    </flux:navlist>

    @endpush

</x-layouts.app>