{{-- resources/views/livewire/permissions-list.blade.php --}}
<div>
    <div class="space-y-6">
        {{-- Listado de Usuarios --}}
        @foreach($users as $user)
            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-medium text-gray-800 dark:text-gray-200">{{ $user->name }}</p>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ $user->email }}</p>
                    </div>
                    <div class="flex space-x-2">
                        @foreach($permissions as $type => $perms)
                            @if($user->hasAnyPermission($perms))
                                <span class="px-2 py-1 text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full">
                                    {{ __("permissions.$type") }}
                                </span>
                            @endif
                        @endforeach
                        <button 
                            wire:click="revokePermission('{{ $perms->first()->id }}', 'user', '{{ $user->id }}')"
                            class="text-red-500 hover:text-red-700">
                            <x-heroicon-o-trash class="w-5 h-5"/>
                        </button>
                    </div>
                </div>
            </div>
        @endforeach

        {{-- Listado de Grupos --}}
        @foreach($groups as $group)
            <div class="bg-gray-50 dark:bg-gray-800 rounded-lg p-4">
                <div class="flex justify-between items-center">
                    <div>
                        <p class="font-medium text-gray-800 dark:text-gray-200">{{ $group->name }}</p>
                        <p class="text-sm text-gray-600 dark:text-gray-400">{{ $group->description }}</p>
                    </div>
                    <div class="flex space-x-2">
                        @foreach($permissions as $type => $perms)
                            @if($group->hasAnyPermission($perms))
                                <span class="px-2 py-1 text-xs bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200 rounded-full">
                                    {{ __("permissions.$type") }}
                                </span>
                            @endif
                        @endforeach
                        <button 
                            wire:click="revokePermission('{{ $perms->first()->id }}', 'group', '{{ $group->id }}')"
                            class="text-red-500 hover:text-red-700">
                            <x-heroicon-o-trash class="w-5 h-5"/>
                        </button>
                    </div>
                </div>
            </div>
        @endforeach
    </div>
</div>