{{--
| Create / edit modal.
|
| A normal HTML form posting to the normal resource routes — no fetch, no JSON.
| That is deliberate: validation errors, the flash message and the redirect all
| behave exactly as they do on the standalone form page, and the two editors can
| never drift because they render the same field partial.
|
| Requires in scope: $package (a blank LicensePackage, for the field defaults).
--}}

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

    <div x-show="modalOpen"
         x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0"
         x-transition:leave="transition ease-in duration-150" x-transition:leave-end="opacity-0"
         @click="modalOpen = false"
         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="modalOpen"
             x-transition:enter="transition ease-out duration-200"
             x-transition:enter-start="translate-y-4 opacity-0 sm:scale-95"
             x-transition:leave="transition ease-in duration-150"
             x-transition:leave-end="translate-y-4 opacity-0 sm:scale-95"
             class="surface relative w-full max-w-2xl overflow-hidden shadow-2xl">

            <form method="POST" :action="formAction" @submit="busy = true">
                @csrf
                <template x-if="modalMode === 'edit'">
                    <input type="hidden" name="_method" value="PUT">
                </template>

                {{-- Not validated, and not persisted — these two ride along only
                     so a rejected save can reopen this modal where it was. --}}
                <input type="hidden" name="_modal" :value="modalMode">
                <input type="hidden" name="_pid" :value="form.id ?? ''">

                <header class="flex items-start justify-between gap-4 border-b border-slate-200/70 px-5 py-4 dark:border-white/[0.06]">
                    <div class="flex items-center gap-3">
                        <span class="grid size-10 shrink-0 place-items-center rounded-xl bg-gradient-to-br from-brand-500
                                     to-brand-700 text-white shadow-lg shadow-brand-600/30" aria-hidden="true">
                            <x-icon name="package" class="size-5" />
                        </span>
                        <div class="min-w-0">
                            <h2 id="package-editor-title" class="text-sm font-semibold text-slate-900 dark:text-white"
                                x-text="modalMode === 'edit' ? 'Edit package' : 'New package'"></h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                Sets the term, cycle and price every license generated from it inherits.
                            </p>
                        </div>
                    </div>

                    <button type="button" @click="modalOpen = false" aria-label="Close"
                            class="rounded-lg p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                                   dark:hover:bg-white/10 dark:hover:text-white">
                        <x-icon name="x" class="size-5" />
                    </button>
                </header>

                <div class="max-h-[65vh] overflow-y-auto scroll-slim px-5 py-4">
                    @include('packages.partials.fields', ['package' => $package])
                </div>

                <footer 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="modalOpen = false"
                            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="submit" class="btn-primary">
                        <x-icon name="check" class="size-4" />
                        <span x-text="modalMode === 'edit' ? 'Save changes' : 'Create package'"></span>
                    </button>
                </footer>
            </form>
        </div>
    </div>
</div>