{{--
| Confirmation dialog for the owner actions.
|
| One dialog, fed by the data-confirm-* attributes of whichever form asked for
| it. Revoke additionally demands an explicit acknowledgement checkbox — a red
| button alone is still one accidental click.
--}}

<div x-show="confirmOpen" x-cloak class="fixed inset-0 z-50 overflow-y-auto" role="dialog" aria-modal="true"
     aria-labelledby="confirm-title">

    <div x-show="confirmOpen"
         x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0"
         x-transition:leave="transition ease-in duration-100" x-transition:leave-end="opacity-0"
         @click="close()"
         class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm"></div>

    <div class="flex min-h-full items-end justify-center p-4 sm:items-center">
        <div x-show="confirmOpen"
             x-transition:enter="transition ease-out duration-150"
             x-transition:enter-start="translate-y-4 opacity-0 sm:scale-95"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-end="translate-y-4 opacity-0 sm:scale-95"
             class="surface relative w-full max-w-md overflow-hidden shadow-2xl">

            <div class="flex items-start gap-3.5 p-5">
                <span class="grid size-10 shrink-0 place-items-center rounded-xl"
                      :class="{
                          'bg-brand-50 text-brand-600 dark:bg-brand-500/10 dark:text-brand-400': confirmTone === 'brand',
                          'bg-amber-50 text-amber-600 dark:bg-amber-500/10 dark:text-amber-400': confirmTone === 'amber',
                          'bg-red-50 text-red-600 dark:bg-red-500/10 dark:text-red-400': confirmTone === 'red',
                      }" aria-hidden="true">
                    <x-icon name="alert" class="size-5" x-show="confirmTone !== 'brand'" />
                    <x-icon name="check-circle" class="size-5" x-show="confirmTone === 'brand'" />
                </span>

                <div class="min-w-0">
                    <h2 id="confirm-title" class="text-sm font-semibold text-slate-900 dark:text-white"
                        x-text="confirmTitle"></h2>
                    <p class="mt-1 text-sm leading-relaxed text-slate-600 dark:text-slate-300"
                       x-text="confirmMessage"></p>

                    <label x-show="confirmAck" x-cloak
                           class="mt-3 flex cursor-pointer items-start gap-2.5 rounded-xl border border-red-200 bg-red-50/60
                                  p-3 dark:border-red-500/25 dark:bg-red-500/[0.07]">
                        <input type="checkbox" x-model="acked" class="checkbox mt-0.5 !text-red-600 focus:!ring-red-500">
                        <span class="text-xs font-medium leading-snug text-red-700 dark:text-red-300">
                            I understand this is permanent and the key can never be used again.
                        </span>
                    </label>
                </div>
            </div>

            <div class="flex items-center justify-end gap-2 border-t border-slate-200/70 px-5 py-3.5 dark:border-white/[0.06]">
                <button type="button" @click="close()" x-ref="confirmCancel"
                        class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600
                               transition hover:bg-slate-50 dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5">
                    Cancel
                </button>

                <button type="button" @click="proceed()"
                        :disabled="confirmAck && ! acked"
                        :class="{
                            'bg-gradient-to-r from-brand-600 to-brand-500 hover:from-brand-500 hover:to-brand-400 shadow-brand-600/30': confirmTone === 'brand',
                            'bg-gradient-to-r from-amber-500 to-amber-400 hover:from-amber-400 hover:to-amber-300 shadow-amber-500/30': confirmTone === 'amber',
                            'bg-gradient-to-r from-red-600 to-red-500 hover:from-red-500 hover:to-red-400 shadow-red-600/30': confirmTone === 'red',
                        }"
                        class="rounded-xl px-4 py-2 text-sm font-semibold text-white shadow-lg transition
                               disabled:cursor-not-allowed disabled:opacity-40"
                        x-text="confirmVerb"></button>
            </div>
        </div>
    </div>
</div>