@php
    $backdrop = 'fixed inset-0 z-50 flex animate-fade-in items-center justify-center bg-black/50 p-4 backdrop-blur-sm';
    $panel = 'w-full max-w-lg animate-slide-up rounded-2xl border border-border bg-card text-card-foreground shadow-2xl';
    $hdr = 'flex items-center justify-between border-b border-border px-6 py-4';
    $body = 'px-6 py-5';
    $ftr = 'flex items-center justify-end gap-3 border-t border-border px-6 py-4';
@endphp

<div
    x-cloak
    x-show="deleteState.open"
    class="{{ $backdrop }}"
    role="dialog"
    aria-modal="true"
    aria-labelledby="delete-category-title"
    @keydown.escape.window.prevent
>
    <!-- Overlay click should NOT close -->
    <div
        class="{{ $panel }}"
        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"
        @click.stop
    >
        <div class="{{ $hdr }}">
            <div class="min-w-0">
                <h3 id="delete-category-title" class="text-base font-semibold text-foreground">
                    {{ __('buttons.delete') }} {{ __('pages/admin/category.heading.singular') }}
                </h3>
                <p class="mt-0.5 truncate text-sm text-muted-foreground">
                    <span class="font-medium" x-text="deleteState.name"></span>
                </p>
            </div>
            <button
                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"
                @click="closeDeleteDialog()"
            >
                <x-heroicon-o-x-mark class="w-5 h-5" />
            </button>
        </div>

        <div class="{{ $body }}">
            <div class="rounded-xl border border-border bg-muted/40 p-4 text-sm text-foreground/80">
                <!-- Skeleton while loading delete info -->
                <div x-show="deleteState.loading" class="space-y-3 animate-pulse">
                    <div class="h-4 w-3/4 rounded bg-surface-200/80 dark:bg-surface-700"></div>
                    <div class="h-4 w-full rounded bg-surface-200/80 dark:bg-surface-700"></div>
                    <div class="h-10 w-full rounded bg-surface-200/80 dark:bg-surface-700"></div>
                    <div class="h-4 w-2/3 rounded bg-surface-200/80 dark:bg-surface-700"></div>
                </div>

                <!-- Loaded content (children case only) -->
                <div x-show="!deleteState.loading" class="space-y-3">
                    <p>
                        This parent has <span class="font-semibold" x-text="deleteState.childCount"></span> child categories.
                        Choose what to do with them before deleting the parent.
                    </p>

                    <div class="space-y-2">
                        <label class="flex items-start gap-2">
                            <input type="radio" class="mt-1" value="shift" x-model="deleteState.mode" @change="setDeleteMode('shift')" />
                            <span>
                                <span class="font-medium">Shift children</span>
                                <span class="block text-xs text-muted-foreground">Allowed only within the same type.</span>
                            </span>
                        </label>

                        <div class="ps-6">
                            <x-forms.label class="mb-1.5 block text-xs font-medium">Shift to</x-forms.label>
                            <x-forms.select
                                x-model="deleteState.shiftToId"
                                x-bind:disabled="deleteState.mode !== 'shift'"
                                x-bind:class="deleteState.mode !== 'shift' ? 'opacity-60 cursor-not-allowed' : ''"
                            >
                                <option value="">Select parent category</option>
                                <template x-for="p in deleteState.shiftCandidates" :key="p.id">
                                    <option :value="p.id" x-text="p.name"></option>
                                </template>
                            </x-forms.select>
                        </div>
                    </div>

                    <label class="flex items-start gap-2">
                        <input type="radio" class="mt-1" value="cascade" x-model="deleteState.mode" @change="setDeleteMode('cascade')" />
                        <span>
                            <span class="font-medium">Delete children too</span>
                            <span class="block text-xs text-muted-foreground">This will delete all child categories under this parent.</span>
                        </span>
                    </label>
                </div>
            </div>
        </div>

        <div class="{{ $ftr }}">
            <x-buttons.secondary type="button" @click="closeDeleteDialog()" x-bind:disabled="deleteState.submitting || deleteState.loading">
                {{ __('buttons.cancel') }}
            </x-buttons.secondary>
            <x-buttons.danger type="button" @click="confirmDelete()" x-bind:disabled="deleteState.submitting || deleteState.loading">
                <span x-show="!deleteState.submitting">{{ __('buttons.delete') }}</span>
                <span x-show="deleteState.submitting">Deleting...</span>
            </x-buttons.danger>
        </div>
    </div>
</div>