{{-- resources/views/vendor/livewire-ui-modal/modal.blade.php --}}
<div>
    @isset($jsPath)<script>{!! file_get_contents($jsPath) !!}</script>@endisset

    <span class="hidden sm:max-w-md md:max-w-xl lg:max-w-3xl xl:max-w-5xl 2xl:max-w-7xl"></span>

    <div x-data="LivewireUIModal()"
         x-on:close.stop="setShowPropertyTo(false)"
         x-on:keydown.escape.window="show && closeModalOnEscape()"
         x-show="show"
         class="fixed inset-0 z-50"
         style="display:none;">

        <div class="flex min-h-dvh items-center justify-center px-4 py-10">

            {{-- Backdrop --}}
            <div x-show="show"
                 x-on:click="closeModalOnClickAway()"
                 x-transition:enter="ease-out duration-200"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="ease-in duration-150"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0">
                <div class="absolute inset-0" style="background:rgba(0,0,0,.15);"></div>
            </div>

            <span class="hidden"></span>

{{--            <div x-show="show && showActiveComponent"--}}
{{--                 x-bind:class="modalWidth"--}}
{{--                 id="modal-container"--}}
{{--                 x-trap.noscroll.inert="show && showActiveComponent"--}}
{{--                 aria-modal="true"--}}
{{--                 class="mw-modal-box inline-block w-full sm:max-w-md relative z-10">--}}

            <span class="hidden"></span>

            <div
                x-show="show && showActiveComponent"
                x-transition:enter="ease-out duration-300"
                x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave="ease-in duration-200"
                x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                x-bind:class="modalWidth"
                class="mw-modal-box relative inline-block w-full align-bottom rounded-lg text-left shadow-xl transform transition-all sm:my-8 sm:align-middle sm:w-full"
                id="modal-container"
                x-trap.inert="show && showActiveComponent"
                aria-modal="true"
            >

            <div class="mw-modal-inner">
                    @forelse($components as $id => $component)
                        <div x-show.immediate="activeComponent == '{{ $id }}'"
                             x-ref="{{ $id }}"
                             wire:key="{{ $id }}"
                             class="mw-modal-frame">
                            @livewire($component['name'], $component['arguments'], key($id))
                        </div>
                    @empty @endforelse
                </div>
            </div>
        </div>
    </div>
</div>