@props(['name', 'message' => '', 'status' => ''])
<div 
    x-data="{ showModal: false, name: '{{ $name }}', message: '{{ $message }}', status: '{{ $status }}' }" 
    x-show="showModal" 
    x-on:open-modal.window="if ($event.detail.name === name) { showModal = true; message = $event.detail.message; status = $event.detail.status; }"
    x-on:close-modal.window="showModal = false" style="display: none">
    <div>
        <dialog class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5 w-full h-full bg-transparent"
            x-show="showModal" @keydown.window.escape="showModal = false">
            <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300" @click="showModal = false"
                x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0"></div>
            <div class="relative max-w-lg min-w-[500px] rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5"
                x-show="showModal" x-transition:enter="ease-out" x-transition:enter-start="opacity-0"
                x-transition:enter-end="opacity-100" x-transition:leave="ease-in" x-transition:leave-start="opacity-100"
                x-transition:leave-end="opacity-0">
                
                <!-- Conditional SVGs based on status -->
                <template x-if="status === 'success'">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-success" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </template>
                <template x-if="status === 'warning'">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-warning" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
                    </svg>
                </template>
                <template x-if="status === 'failed'">
                    <svg xmlns="http://www.w3.org/2000/svg" class="inline size-28 text-error" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd"
                            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
                    </svg>
                </template>
                
                <div class="mt-4">
                    <p class="mt-2" x-text="message"></p>
                    <button @click="showModal = false"
                        class="btn mt-6 bg-gray-200 font-medium text-gray-700 hover:bg-gray-200-focus focus:bg-gray-200-focus active:bg-gray-200-focus/90">
                        Close
                    </button>
                </div>
            </div>
        </dialog>
    </div>
</div>