@forelse($users ?? [] as $index => $user)
    <tr class="hover:bg-gray-50/50 transition-colors">
        <td class="px-6 py-4">
            <div class="flex items-center gap-3">
                @if($user->avatar && \Illuminate\Support\Facades\Storage::disk('public')->exists($user->avatar))
                    <img src="{{ \Illuminate\Support\Facades\Storage::url($user->avatar) }}" alt="{{ $user->name }}" class="h-10 w-10 rounded-full object-cover">
                @else
                    <div class="h-10 w-10 rounded-full bg-primary/20 flex items-center justify-center text-primary font-bold">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                @endif
                <div class="font-medium text-gray-900">{{ $user->name }}</div>
            </div>
        </td>
        <td class="px-6 py-4 text-sm text-gray-500">{{ $user->email }}</td>
        <td class="px-6 py-4">
            <span class="px-2 py-1 text-xs bg-gray-100 text-gray-800 rounded">{{ $user->role->name ?? 'No Role' }}</span>
        </td>
        <td class="px-6 py-4">
            <span class="px-2 py-1 text-xs bg-green-100 text-green-800 rounded">Active</span>
        </td>
        <td class="px-6 py-4 text-right">
            <div class="flex items-center justify-end gap-2">
                <button onclick="openEditUserModal({{ $user->id }}, '{{ addslashes($user->name) }}', '{{ addslashes($user->email) }}', {{ $user->role_id ?? 'null' }})" class="p-2 text-gray-500 hover:text-primary rounded-md hover:bg-primary/5 transition-colors" title="Edit user">
                    <span class="material-symbols-outlined text-sm">edit</span>
                </button>
                <button onclick="openDeleteUserModal({{ $user->id }}, '{{ addslashes($user->name) }}', '{{ addslashes($user->email) }}')" class="p-2 text-gray-500 hover:text-red-600 rounded-md hover:bg-red-50 transition-colors" title="Delete user">
                    <span class="material-symbols-outlined text-sm">delete</span>
                </button>
            </div>
        </td>
    </tr>
@empty
    <tr>
        <td colspan="5" class="px-6 py-8 text-center text-gray-500">
            <span class="material-symbols-outlined text-4xl mb-2 block text-gray-300">person</span>
            <p>No users found</p>
        </td>
    </tr>
@endforelse