<div x-data="{ showModal: @entangle('showModal') }">
    <template x-if="showModal">
        <div class="fixed inset-0 z-[100] flex flex-col items-center justify-center overflow-hidden px-4 py-6 sm:px-5"
             @keydown.window.escape="showModal = false">
            <div class="absolute inset-0 bg-slate-900/60 transition-opacity duration-300"
                 @click="showModal = false"></div>
            <div class="relative p-4 max-w-lg rounded-lg bg-white px-4 py-10 text-center transition-opacity duration-300 dark:bg-navy-700 sm:px-5">
                <svg xmlns="http://www.w3.org/2000/svg"
                     class="inline h-28 w-28 text-error" 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>
                <div class="mt-4 mx-5">
                    <h2 class="text-2xl text-slate-700 dark:text-navy-100">
                        Are you sure <br> you want to delete this item?
                    </h2>
                    <p class="mt-2"></p>
                    <button @click="showModal = false"
                            class="btn mt-6 bg-[#6a6e69] font-medium text-white hover:bg-[#313430] focus:bg-[#313430]-focus active:bg-[#313430]-focus/90">
                        Close
                    </button>
                    <button @click="$wire.emit('deleteSubItem', {{ $deleteId }}) ; showModal = false"
                            class="btn mt-6 bg-error font-medium text-white hover:bg-error-focus focus:bg-error-focus active:bg-error-focus/90">
                        Confirm
                    </button>
                </div>
            </div>
        </div>
    </template>
</div>
