<div x-data="{ showUsers: false}" x-cloak x-on:show-users.window="showUsers = true"
    x-on:close-users-modal.window="showUsers = false" class="relative z-50">
    <div x-show="showUsers" class="modal-overlay" x-transition:enter.duration.300ms x-transition:leave.duration.300ms>
        <div x-on:click.outside="showUsers = false" x-show="showUsers" x-transition:enter="transition-enter"
            x-transition:enter-start="transition-enter-start" x-transition:enter-end="transition-enter-end"
            x-transition:leave="transition-leave" x-transition:leave-start="transition-leave-start"
            x-transition:leave-end="transition-leave-end" x-on:keydown.escape.window="showUsers = false"
            class="modal-container w-full max-w-2xl">
            <h3 class="modal-title">Usuários Cadastrados no Nexus</h3>

            <div class="user-list-content">
                <div class="user-grid">
                    @forelse ($users as $user)
                    <div class="user-card-item">
                        <div class="user-info">
                            <span class="user-name">{{ $user->name }}</span>
                            <span class="user-email">{{ $user->email }}</span>
                        </div>
                        <div class="user-details">
                            {{-- <span class="user-permission">{{ $user->permissions }}</span> --}}
                            <span class="user-status">Ativo</span>

                            <div class="user-actions-group">

                                <button
                                    @click="$dispatch('update-user', { id: '{{ $user->id }}' }); showUsers = false"
                                    class="action-button text-blue-600 hover:text-blue-800 cursor-pointer"
                                    title="Editar Usuário">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
                                    </svg>
                                </button>

                                <button
                                    @click="$dispatch('sure', { id: '{{ $user->id }}', isUser: true }); showUsers = false"
                                    class="action-button text-red-600 hover:text-red-800 cursor-pointer"
                                    title="Excluir Usuário">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none"
                                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                        <path stroke-linecap="round" stroke-linejoin="round"
                                            d="M19 7l-.86 11.2a2 2 0 01-2 1.8H7.86a2 2 0 01-2-1.8L4.01 7h14.98zM9 5h6" />
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-gray-500 col-span-full p-4">Nenhum usuário cadastrado.</p>
                    @endforelse
                </div>
            </div>

            <div class="form-footer">
                <button type="button" @click="showUsers = false" class="btn-cancel cursor-pointer">
                    Fechar
                </button>
            </div>
        </div>
    </div>
</div>