<div class="space-y-5">
    <x-panel :title="__('accounts.title')" :subtitle="__('accounts.subtitle')">
        <x-slot:actions>
            <x-modal-trigger variant="accent" action="create">
                <x-icon name="user-plus" class="h-3.5 w-3.5" /> {{ __('accounts.create') }}
            </x-modal-trigger>
        </x-slot:actions>

        <div class="divide-y divide-line">
            @forelse ($users as $user)
                @php $isSelf = $user->getKey() === $currentId; @endphp
                <div wire:key="user-{{ $user->getKey() }}" class="flex flex-col gap-3 py-3 sm:flex-row sm:items-center">
                    <span @class([
                        'grid h-9 w-9 shrink-0 place-items-center rounded-md border',
                        'border-accent/30 bg-accent/10 text-accent-text' => $isSelf,
                        'border-line bg-inset text-ink-3' => ! $isSelf,
                    ])>
                        <x-icon name="user-plus" class="h-4 w-4" />
                    </span>

                    <div class="min-w-0 flex-1">
                        <div class="flex flex-wrap items-center gap-2">
                            <p class="truncate text-sm text-ink">{{ $user->name }}</p>
                            @if ($isSelf)
                                <x-badge tone="accent">{{ __('accounts.you') }}</x-badge>
                            @endif
                            <x-badge :tone="$user->role === \App\Enums\Role::Admin ? 'accent' : 'neutral'">{{ $user->role->label() }}</x-badge>
                            <x-two-factor-badge :enabled="$user->hasTwoFactorEnabled()" />
                        </div>
                        <p class="truncate font-mono text-[11px] text-ink-3">{{ $user->email }}</p>
                    </div>

                    <div class="flex shrink-0 flex-wrap items-center gap-2">
                        @can('manage-users')
                            {{-- Role selector. For self it is disabled: you cannot change your own role
                                 (and the last-admin guard would refuse a self-demotion anyway). The
                                 server-side confirmRoleChange + last-admin guard is the real protection. --}}
                            <label class="sr-only" for="role-{{ $user->getKey() }}">{{ __('accounts.role_label') }}</label>
                            <select id="role-{{ $user->getKey() }}"
                                    @disabled($isSelf)
                                    wire:key="role-{{ $user->getKey() }}"
                                    wire:change="confirmRoleChange({{ $user->getKey() }}, $event.target.value)"
                                    class="h-8 rounded-md border border-line bg-inset px-2 font-mono text-[11px] text-ink focus:border-accent/40 focus:outline-none disabled:opacity-60">
                                @foreach (\App\Enums\Role::cases() as $role)
                                    <option value="{{ $role->value }}" @selected($user->role === $role)>{{ $role->label() }}</option>
                                @endforeach
                            </select>
                        @endcan

                        @unless ($isSelf)
                            <x-modal-trigger variant="secondary" action="confirmLogout({{ $user->getKey() }})">
                                <x-icon name="logout" class="h-3.5 w-3.5" /> {{ __('accounts.logout') }}
                            </x-modal-trigger>
                            <x-modal-trigger variant="danger-soft" action="confirmRemove({{ $user->getKey() }})">
                                <x-icon name="trash" class="h-3.5 w-3.5" /> {{ __('accounts.remove') }}
                            </x-modal-trigger>
                        @endunless
                    </div>
                </div>
            @empty
                <p class="py-3 font-mono text-[11px] text-ink-3">{{ __('accounts.none') }}</p>
            @endforelse
        </div>
    </x-panel>
</div>
