@php use App\Models\User; @endphp
<div>
    <div class="flex flex-col sm:flex-row gap-2 justify-between items-baseline mb-4">
        <x-title>Usuarios</x-title>
        @can('create', User::class)
            <x-button :href="route('usuarios.create')" wire:navigate icon="plus">Registrar Usuario</x-button>
        @endcan
    </div>

    <div class="mt-4">
        <x-table striped :headers="$this->headers" :rows="$this->rows" paginate>
            @interact('column_roles', $row)
            {{$row->roles->pluck('title')->join(', ')}}
            @endinteract
            @interact('column_action', $row)
            @can('update', $row)
                <x-button sm :href="route('usuarios.edit', $row->id)" wire:navigate :key="uniqid()">
                    Editar
                </x-button>
            @endcan
            @can('delete', $row)
                <x-button sm color="red" wire:click="confirmDelete('{{$row->id}}')" :key="uniqid()">
                    Eliminar
                </x-button>
            @endcan
            @endinteract
        </x-table>
    </div>
</div>