@use(App\Models\User)

<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)
            <button class="btn" href="{{route('usuarios.create')}}" wire:navigate>
                <x-icons.plus/>
                Registrar Usuario
            </button>
        @endcan
    </div>


    <div class="overflox-x-auto">
        <table class="table">
            <thead>
            <tr>
                <th>Nombre</th>
                <th>Email</th>
                <th class="text-end">Acciones</th>
            </tr>
            </thead>
            <tbody>
            @foreach($this->rows as $row)
                <tr>
                    <td>{{$row->name}}</td>
                    <td>{{$row->email}}</td>
                    <td class="w-0 whitespace-nowrap">
                        <a class="btn btn-circle btn-sm" wire:navigate href="{{route('usuarios.edit', $row->id)}}">
                            <x-icons.edit class="w-5 h-5"/>
                        </a>
                        <button class="btn btn-circle btn-error btn-sm" wire:click="confirmDelete('{{$row->id}}')">
                            <x-icons.trash class="w-5 h-5"/>
                        </button>
                    </td>
                </tr>
            @endforeach
            </tbody>
        </table>
    </div>
</div>