{{-- Edit FAQ Modal --}}
<div
    x-show="showEdit"
    x-transition:enter="transition ease-out duration-200"
    x-transition:enter-start="opacity-0"
    x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-150"
    x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0"
    class="fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm"
    x-cloak
    @keydown.escape.window="showEdit = false"
    role="dialog"
    aria-modal="true"
    aria-labelledby="edit-faq-title">
    <div
        @click.outside="showEdit = false"
        x-transition:enter="transition ease-out duration-200"
        x-transition:enter-start="opacity-0 scale-95"
        x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-150"
        x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="flex max-h-[min(90dvh,calc(100dvh-2rem))] w-full max-w-2xl flex-col overflow-hidden animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl">
        <div class="flex items-center justify-between border-b border-border px-6 py-4">
            <h3 id="edit-faq-title" class="text-base font-semibold text-surface-900 dark:text-surface-100">
                {{ __('buttons.edit') }} {{ __('pages/admin/faq.heading.singular') }}
            </h3>
            <button
                @click="showEdit = false"
                type="button"
                class="rounded-lg p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:ring-offset-background"
                aria-label="Close">
                <x-heroicon-o-x-mark class="w-5 h-5" />
            </button>
        </div>

        <div x-show="loadingEdit" class="px-6 py-6">
            <div class="space-y-3">
                <div class="h-5 w-1/3 animate-pulse rounded bg-surface-100 dark:bg-surface-700"></div>
                <div class="h-10 w-full animate-pulse rounded bg-surface-100 dark:bg-surface-700"></div>
                <div class="h-24 w-full animate-pulse rounded bg-surface-100 dark:bg-surface-700"></div>
            </div>
        </div>
        <div id="edit-faq-modal-body" x-show="!loadingEdit" class="flex min-h-0 flex-1 flex-col overflow-hidden"></div>
    </div>
</div>