@if (!empty($modalButton))
    <div class="com-modal" x-data="{ {{ $modalName ?? 'isOpen' }}: false }">
    @else
        <div class="com-modal" x-data="{ {{ $modalName ?? 'isOpen' }}: true }">
@endif
@if (!empty($modalButton))
    <button class="com-modal-trigger" type="button" @click="{{ $modalName ?? 'isOpen' }} = true , zControl = true">
        {{ $modalButton }}
    </button>
@endif
<div class="com-modal-content-transition" role="dialog" aria-labelledby="modal-title" aria-modal="true" style="display:none" x-show="{{ $modalName ?? 'isOpen' }}" x-transition:enter="transition duration-300 ease-out" x-transition:enter-start="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95" x-transition:enter-end="translate-y-0 opacity-100 sm:scale-100" x-transition:leave="transition duration-150 ease-in" x-transition:leave-start="translate-y-0 opacity-100 sm:scale-100" x-transition:leave-end="translate-y-4 opacity-0 sm:translate-y-0 sm:scale-95" :class="{{ $modalName ?? 'isOpen' }} === true ? '' : 'opacity-0 invisible'">
    <div class="com-modal-content-wrapper">
        <div class="com-modal-content">
            <button class="absolute top-2 right-2" type="button" @click="{{ $modalName ?? 'isOpen' }} = false, zControl = false">
                <img class="w-5" src="{{ Module::asset('frontend:img/close-b.svg') }}" alt="Close">
            </button>
            <div>
                {{ $modalContent ?? 'Modal Content' }}
            </div>
        </div>
    </div>
    <div class="com-modal-backdrop" @click="{{ $modalName ?? 'isOpen' }} = false , zControl = false" :class="{{ $modalName ?? 'isOpen' }} === true ? '' : 'hidden'"></div>
</div>
</div>