@forelse($users as $user)
<tr class="border-t border-border bg-card transition-colors duration-150 hover:bg-muted/60 dark:hover:bg-muted/40">
    {{-- Checkbox --}}
    <td class="align-middle">
        <input
            type="checkbox"
            data-user-row-select
            class="h-4 w-4 rounded border-surface-300 text-primary-600 focus:ring-primary-500 dark:border-surface-600 dark:bg-surface-800"
            value="{{ $user->id }}"
            @change="toggleSelect($event)" />
    </td>

    {{-- User (avatar + name) --}}
    <td class="align-middle">
        <x-utility.tooltip text="{{ $user->full_name }}" position="top" class="max-w-full">
            <div class="flex items-center gap-3 max-w-full min-w-0">
                <div class="relative flex-shrink-0">
                    <x-utility.avatar :src="$user->profile_image" :name="$user->full_name" size="md" />
                </div>
                <p class="text-sm font-medium text-surface-900 dark:text-white truncate">
                    {{ $user->full_name }}
                </p>
                <input type="hidden" value="{{ $user->full_name }}" />
                <input type="hidden" value="{{ $user->id }}" />
            </div>
        </x-utility.tooltip>
    </td>

    {{-- Email --}}
    <td class="align-middle">
        <x-utility.tooltip text="{{ $user->email }}" position="top" class="max-w-full">
            <div class="min-w-0 max-w-full">
                <p class="truncate text-sm text-surface-700 dark:text-surface-300">{{ $user->email }}</p>
            </div>
        </x-utility.tooltip>
    </td>


    {{-- Status toggle --}}
    <td class="align-middle">
        @if($user->status == 'active')
        <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium bg-green-100 text-green-700 dark:bg-green-950 dark:text-green-300">{{ __('buttons.active') }}</span>
        @else
        <span class="inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium bg-amber-100 text-amber-700 dark:bg-amber-950 dark:text-amber-300">{{ __('buttons.inactive') }}</span>
        @endif
    </td>

    {{-- Last Login --}}
    <td class="align-middle">
        <div class="min-w-0">
            <p class="truncate text-sm text-surface-600 dark:text-surface-400">{{ $user->last_login_at ? $user->last_login_at->format('d M Y H:i:s') : '-' }}</p>
            @if($user->last_login_ip)
            <p class="text-xs text-surface-400">{{ $user->last_login_ip}}</p>
            @endif
        </div>
    </td>

    {{-- Joined --}}
    <td class="align-middle">
        <p class="text-sm text-surface-600 dark:text-surface-400">{{ $user->created_at ? format_date($user->created_at) : '-' }}</p>
    </td>

    {{-- Actions --}}
    <td class="text-right align-middle">
        <div class="flex items-center justify-end gap-1">
            {{-- View --}}
            <x-utility.tooltip text="{{ __('buttons.view') }}" position="top">
                <x-buttons.icon variant="secondary" size="sm" @click="openView('{{ route('admin.users.show', $user->id) }}')">
                    <x-heroicon-o-eye class="w-4 h-4" />
                </x-buttons.icon>
            </x-utility.tooltip>

            {{-- Edit --}}
            <x-utility.tooltip text="{{ __('buttons.edit') }}" position="top">
                <x-buttons.icon variant="primary" size="sm" @click="openEdit('{{ route('admin.users.edit', $user->id) }}')">
                    <x-heroicon-o-pencil class="w-4 h-4" />
                </x-buttons.icon>
            </x-utility.tooltip>

            <x-utility.tooltip text="{{ __('buttons.delete') }}" position="top">
                <x-buttons.icon variant="danger" size="sm"
                    @click="$store.confirmDialog.show({
                            title: '{{ __('pages/admin/users.deleteUser.title') }}',
                            description: '{{ __('pages/admin/users.deleteUser.description') }}',
                            confirmText: '{{ __('buttons.yes') }}',
                            cancelText: '{{ __('buttons.no') }}',
                            confirmButtonClass: 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-red-600 hover:bg-red-700 text-white',
                            heroicon: 'o-trash',
                            iconWrapperClass: 'bg-red-100 dark:bg-amber-950 flex h-14 items-center justify-center rounded-full shrink-0 w-14',
                            onConfirm: () => deleteUser('{{ route('admin.users.destroy', $user->id) }}')
                        })"
                    justify="left">
                    <x-heroicon-o-trash class="w-4 h-4" />
                </x-buttons.icon>
            </x-utility.tooltip>

            {{-- More Actions Dropdown --}}
            <div x-data="dropdown({ align: 'right', lockScroll: false })" class="relative">
                <x-utility.tooltip text="{{ __('buttons.more') }}" position="top">
                    <x-buttons.icon variant="ghost" size="sm"
                        data-dropdown-trigger
                        x-ref="trigger"
                        @click.stop="toggle()">
                        <x-heroicon-o-ellipsis-vertical class="w-4 h-4" />
                    </x-buttons.icon>
                </x-utility.tooltip>

                <div
                    x-ref="menu"
                    x-cloak
                    x-show="open"
                    x-transition:enter="transition-opacity ease-out duration-100"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="transition-opacity ease-in duration-75"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0"
                    :class="placement === 'top' ? 'origin-bottom-right' : 'origin-top-right'"
                    class="w-52 rounded-lg border border-surface-200 bg-white py-1 shadow-lg dark:border-surface-700 dark:bg-surface-800">
                    <x-buttons.icon
                        data-change-password-url="{{ route('admin.users.change-password', $user->id) }}"
                        data-user-full-name="{{ $user->full_name }}"
                        @click="close(); openPasswordChange($el.dataset.changePasswordUrl, $el.dataset.userFullName)"
                        class="w-full text-left px-4 py-2 flex items-center gap-2"
                        justify="left">
                        <x-heroicon-o-key class="w-4 h-4" />
                        {{ __('pages/admin/users.changePassword.title') }}
                    </x-buttons.icon>
                    @if(empty($user->last_login_at))
                    <x-buttons.icon
                        @click="close(); $store.confirmDialog.show({
                                title: '{{ __('pages/admin/users.sendInvitation.title') }}',
                                description: '{{ __('pages/admin/users.sendInvitation.description') }}',
                                confirmText: '{{ __('buttons.yes') }}',
                                cancelText: '{{ __('buttons.no') }}',
                                confirmButtonClass: 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-brand hover:bg-brand/90 text-white',
                                heroicon: 'o-envelope',
                                onConfirm: () => sendInvitation('{{ $user->id }}')
                            })"
                        class="w-full text-left px-4 py-2 flex items-center gap-2"
                        justify="left">
                        <x-heroicon-o-envelope class="w-4 h-4" />
                        {{ __('pages/admin/users.sendInvitation.title') }}
                    </x-buttons.icon>
                    @endif
                    @if($hasTwoFactorTable)
                    <x-buttons.icon
                        @click="close(); $store.confirmDialog.show({
                                title: '{{__('pages/admin/users.resetTwoFactor.title')}}',
                                description: '{{__('pages/admin/users.resetTwoFactor.description')}}',
                                confirmText: '{{ __('buttons.yes') }}',
                                cancelText: '{{ __('buttons.no') }}',
                                confirmButtonClass: 'inline-flex cursor-pointer select-none items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background disabled:pointer-events-none disabled:opacity-60 bg-brand hover:bg-brand/90 text-white',
                                heroicon: 'o-shield-exclamation',
                                onConfirm: () => resetTwoFactor('{{ $user->id }}')
                            })"
                        class="w-full text-left px-4 py-2 flex items-center gap-2"
                        justify="left">
                        <x-heroicon-o-shield-exclamation class="w-4 h-4" />
                        {{ __('pages/admin/users.resetTwoFactor.buttonText') }}
                    </x-buttons.icon>
                    @endif
                </div>
            </div>
        </div>
    </td>
</tr>
@empty
@include('pages.admin.users.partials.no-data-found')
@endforelse