<div>
    <div class="w-full flex justify-between items-start">
        <livewire:components.section-header title="Usuarios"
            description="Consulta el listado de usuarios de la plataforma." />
        @can('admin.users.create')
        <a href="{{ route('users.create') }}"
            class="rounded bg-3ip px-4 py-2 text-white hover:bg-3ip-light flex items-center">
            <img src="{{ asset('vendor/blade-untitledui-icons/plus.svg') }}" alt="Logo"
                class="w-6 h-6 mr-2 svg-fill-white">
            Nuevo usuario
        </a>
        @endcan
    </div>

    <div class="flex flex-wrap w-full">

        @if (session()->has('success'))
            <div class="mb-4 rounded bg-green-100 px-4 py-2 text-green-700">
                {{ session('success') }}
            </div>
        @endif
        @if (session()->has('error'))
            <div class="mb-4 rounded bg-red-100 px-4 py-2 text-red-700">
                {{ session('error') }}
            </div>
        @endif

        {{-- Search --}}
        <div class="flex items-center justify-between w-full">
            <div class="w-1/3">
                <input type="text" wire:model.live.debounce.500ms="search" placeholder="Buscar"
                    class="w-full rounded-lg border-2 border-gray-200 px-4 py-2">
            </div>
        </div>

        {{-- Table --}}
        <div class="overflow-hidden rounded bg-white w-full mt-4">
            <table class="w-full rounded-xl border-separate border">
                <thead class="text-xs text-gray-600">
                    <tr>
                        <th class="border-b px-4 py-3">ID</th>
                        <th class="border-b px-4 py-3 text-left">Nombre</th>
                        <th class="border-b px-4 py-3 text-left">Email</th>
                        <th class="border-b px-4 py-3 text-left">Rol</th>
                        <th class="border-b px-4 py-3">Última actividad</th>
                        <th class="border-b px-4 py-3">Creado</th>
                        <th class="border-b px-4 py-3">Modificado</th>
                        <th class="border-b px-4 py-3"></th>
                    </tr>
                </thead>

                <tbody class="divide-y">
                    @forelse ($users as $user)
                        <tr wire:key="user-{{ $user->id }}">
                            <td class="px-4 py-3 {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $user->id }}</td>
                            <td class="px-4 py-3 {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $user->name }}</td>
                            <td class="px-4 py-3 {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $user->email }}</td>

                            <td class="px-4 py-3 {{ !$loop->last ? 'border-b' : '' }}">
                                @foreach ($user->roles as $role)
                                    <span class="rounded bg-gray-200 px-2 py-1 text-xs">
                                        {{ $role->name }}
                                    </span>
                                @endforeach
                            </td>

                            <td
                                class="px-4 py-3 text-center {{ !$loop->last ? 'border-b' : '' }} text-gray-600 text-sm">
                                {{ $user->last_access_at?->format('d/m/Y H:i') ?? '—' }}
                            </td>

                            <td
                                class="px-4 py-3 text-center {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $user->created_at->format('Y-m-d') }}</td>
                            <td
                                class="px-4 py-3 text-center {{ !$loop->last ? 'border-b' : '' }}">
                                {{ $user->updated_at->format('Y-m-d') }}</td>

                            <td
                                class="px-4 py-3 flex items-center justify-end {{ !$loop->last ? 'border-b' : '' }}">
                                @can('admin.users.edit')
                                <a href="{{ route('users.edit', $user) }}"
                                    class="mr-2 text-blue-600 hover:text-blue-800">
                                    <img src="{{ asset('vendor/blade-untitledui-icons/settings.svg') }}" alt="Editar"
                                        class="w-6 h-6">
                                </a>
                                @endcan

                                @can('admin.users.destroy')
                                @if ($user->is_deletable())
                                    <button wire:click="delete({{ $user->id }})"
                                        wire:confirm="¿Seguro que deseas borrar este usuario?"
                                        class="text-red-600 hover:text-red-800">
                                        <img src="{{ asset('vendor/blade-untitledui-icons/trash.svg') }}"
                                            alt="Borrar" class="w-6 h-6 svg-fill-red">
                                    </button>
                                @endif
                                @endcan
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-4 py-3 text-center text-gray-500">
                                No hay usuarios.
                            </td>
                        </tr>
                    @endforelse
                    <tr>
                        <td colspan="8" class="px-4 py-3 text-center text-gray-500">
                            {{ $users->links('livewire.components.table-pagination') }}
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
