<div class="container grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
    @foreach ($clients as $client)
    <div class="client-card">
        <div class="client-card-header">
            <div class="client-avatar">
                <img src="{{ asset('storage/' . $client->profile_image_path) }}" alt="Avatar do Cliente"
                    class="w-32 h-32 rounded-full object-cover">
            </div>
            <div x-data="{ open: false }" @click.outside="open = false" class="client-options-menu">
                <button @click="open = !open" class="client-options-button">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 hover:text-gray-700"
                        viewBox="0 0 20 20" fill="currentColor">
                        <path
                            d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
                    </svg>
                </button>

                <ul x-show="open" class="client-options-list" x-transition>
                    <li><a href="#" class="client-option-item"
                            x-on:click.prevent="$dispatch('client-detail', { id: '{{ $client->id }}' })">Ver Detalhes</a>
                    </li>
                    <li><a href="#" class="client-option-item"
                            x-on:click.prevent="$dispatch('update-client', { id: '{{ $client->id }}' })">Editar
                            Cliente</a></li>
                    <li><a href="#" class="client-option-item text-red-600"
                            x-on:click.prevent="$dispatch('sure', { id: '{{ $client->id }}' })"> Excluir Cliente</a>
                    </li>
                </ul>

            </div>
        </div>
        <div class="client-card-name">
            {{ $client->name }}
        </div>
    </div>
    @endforeach
</div>