@section('title', 'Pengguna')
<div class="py-12">
    <x-slot name="header">
        <h2 class="text-xl font-semibold leading-tight text-gray-800 dark:text-gray-200">
            Pengguna
        </h2>
    </x-slot>
    <div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="overflow-hidden bg-white shadow-sm dark:bg-gray-800 sm:rounded-lg">
            <div class="grid gap-3 p-6 text-gray-900 dark:text-gray-100">
                @forelse ($users as $user)
                    <x-card.base class="grid grid-cols-4">
                        <div class="text-lg font-medium">{{ $user->name }}</div>
                        <div class="flex gap-3">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"
                                stroke-linejoin="round" class="flex-none">
                                <rect width="20" height="16" x="2" y="4" rx="2" />
                                <path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7" />
                            </svg>
                            <div>{{ $user->email }}</div>
                        </div>
                        <div class="flex flex-wrap gap-2">
                            @foreach ($user->roles as $role)
                                <x-badge.base class="self-start" :label="$role->label" />
                            @endforeach
                        </div>
                        <div>
                            <x-button.outline class="bg-blue-500 text-gray-50" size="sm"
                                wire:click="edit('{{ $user->ulid }}')">
                                <x-slot:icon>
                                    <svg class="w-4 h-4 stroke-blue-800" viewBox="0 0 24 24"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path fill="none" stroke="currentColor" stroke-linecap="round"
                                            stroke-linejoin="round" stroke-width="1.5"
                                            d="m5 16l-1 4l4-1L19.586 7.414a2 2 0 0 0 0-2.828l-.172-.172a2 2 0 0 0-2.828 0L5 16ZM15 6l3 3m-5 11h8" />
                                    </svg>
                                </x-slot:icon>
                                <x-slot:label>
                                    <span class="normal-case">Ubah</span>
                                </x-slot:label>
                            </x-button.outline>
                        </div>
                    </x-card.base>
                @empty
                @endforelse
                <div class="mt-4">
                    <x-filament::pagination :paginator="$users" />
                </div>
            </div>
        </div>
    </div>
</div>