<!-- 
  O contêiner principal do Alpine.
  - 'showQuestion' controla a visibilidade.
  - '@sure.window' é o evento que dispara a abertura.
-->
<div x-data="{showQuestion: false, clientId: null, user: false}"
    @sure.window="showQuestion = true; clientId = $event.detail.id; user = $event.detail.isUser;" x-cloak {{-- x-cloak é
    bom para evitar "piscadas" na tela --}}>

    <!-- 
      1. O OVERLAY (Fundo)
      Copiado 1-para-1 do seu 'create-user'
    -->
    <div x-show="showQuestion" class="modal-overlay" x-transition:enter.duration.300ms
        x-transition:leave.duration.300ms>

        <!-- 
          2. O CONTAINER (Card)
          Copiado 1-para-1 do seu 'create-user'
        -->
        <div x-on:click.outside="showQuestion = false" x-show="showQuestion" 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" class="modal-container max-w-sm" {{-- Adicionei 'max-w-sm'
            para um modal de alerta menor --}}>

            <!-- 3. O NOVO CONTEÚDO (Confirmação) -->

            <!-- Ícone de Alerta -->
            <div
                class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
                <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
                    stroke-width="1.5" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
                </svg>
            </div>

            <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full p-1">
                <!-- Título (usando a classe do 'create-user') -->
                <h3 class="modal-title" id="modal-title">
                    Confirmar Exclusão
                </h3>

                <!-- Descrição -->
                <div class="mt-2">
                    <p class="text-sm text-gray-500">
                        Você tem certeza que deseja excluir este cliente?
                        Todos os seus dados serão removidos permanentemente.
                        Esta ação não pode ser desfeita.
                    </p>
                </div>
            </div>

            <!-- Botões (usando a estrutura do 'create-user') -->
            <div class="form-footer mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">

                <!-- 
                  O botão "Sim, Excluir" deve vir primeiro no HTML 
                  para o 'flex-row-reverse' funcionar.
                -->
                <button type="button"
                    @click="if(user){$dispatch('confirm-delete-user', [clientId]);}else{$dispatch('confirm-delete', [clientId]); } showQuestion = false"
                    class="btn-submit bg-red-600 hover:bg-red-700 focus:ring-red-500 w-full sm:w-auto cursor-pointer">
                    Sim, Excluir
                </button>

                <button type="button" @click="showQuestion = false"
                    class="btn-cancel mt-3 sm:mt-0 w-full sm:w-auto cursor-pointer">
                    Cancelar
                </button>
            </div>

        </div>
    </div>
</div>