<div tabindex="-1" role="dialog" data-modal="{{ $key }}" class="fixed top-0 left-0 w-full h-full hidden z-10 items-center justify-center">
    <div class="fixed top-0 left-0 w-full h-full bg-black/25 dark:bg-black/50" data-close-modal></div>
    <div class="relative bg-white dark:bg-gray-800 rounded-md max-w-screen-sm w-full m-2 transition-colors" role="document">
        <div class="">
            <div class="border-b dark:border-gray-700 px-6 py-4 flex justify-between">
                <h5 class="text-xl font-medium flex items-center gap-1 text-gray-900 dark:text-gray-100">{!!$title !!}</h5>
                <button type="button" aria-label="Close" data-close-modal class="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
                    </svg>
                </button>
            </div>
            <form action="{{ $route }}" method="POST">
                @csrf
                @if (isset($method))
                    @method($method)
                @endif

                <div class="p-6">
                    {{ $slot }}
                </div>

                <div class="border-t dark:border-gray-700 px-6 py-4 flex justify-end gap-4">
                    <x-forum::button-secondary type="button" class="btn btn-secondary" data-close-modal>{{ trans('forum::general.cancel') }}</x-forum::button-secondary>
                    {{ $actions }}
                </div>
            </form>
        </div>
    </div>
</div>
