{{--
| New release modal.
|
| Create only. Editing an existing release — including replacing its package —
| goes to the full page, because a re-upload clears the signature and returns
| the release to draft, and that is not a decision to make inside a dialog.
|
| Submitted by XHR so the upload has a real progress bar; the controller returns
| its normal redirect either way, which the handler follows.
|
| Requires in scope: $version (a blank UpdateVersion for the field defaults).
--}}

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

    <div x-show="uploadOpen"
         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="uploading || (uploadOpen = 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="uploadOpen"
             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 x-ref="uploadForm" method="POST" action="{{ route('versions.store') }}"
                  enctype="multipart/form-data" @submit.prevent="submitUpload()">
                @csrf

                <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="cloud-upload" class="size-5" />
                        </span>
                        <div class="min-w-0">
                            <h2 id="version-upload-title" class="text-sm font-semibold text-slate-900 dark:text-white">
                                New release
                            </h2>
                            <p class="text-xs text-slate-500 dark:text-slate-400">
                                Saved as a draft. Sign the package, then publish it when you are ready.
                            </p>
                        </div>
                    </div>

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

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

                <footer class="border-t border-slate-200/70 px-5 py-3.5 dark:border-white/[0.06]">
                    {{-- A real percentage from the XHR upload. A package can be
                         hundreds of megabytes; an indeterminate spinner would
                         say nothing about whether it is nearly done. --}}
                    <div x-show="uploading" x-cloak class="mb-3">
                        <div class="flex items-center justify-between gap-2 text-xs">
                            <span class="font-semibold text-slate-700 dark:text-slate-200">Uploading package…</span>
                            <span class="tabular-nums text-slate-500 dark:text-slate-400" x-text="`${uploadPercent}%`"></span>
                        </div>
                        <div class="mt-1.5 h-1.5 overflow-hidden rounded-full bg-slate-200 dark:bg-white/10">
                            <div class="h-full rounded-full bg-gradient-to-r from-brand-600 to-brand-400 transition-all duration-200"
                                 :style="`width: ${uploadPercent}%`"></div>
                        </div>
                        <p x-show="uploadPercent >= 100" class="mt-1.5 text-[11px] text-slate-500 dark:text-slate-400">
                            Upload complete — the server is checksumming and reading the archive.
                        </p>
                    </div>

                    <div class="flex items-center justify-end gap-2">
                        <button type="button" @click="uploadOpen = false" :disabled="uploading"
                                class="rounded-xl border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-600
                                       transition hover:bg-slate-50 disabled:opacity-40
                                       dark:border-white/10 dark:text-slate-300 dark:hover:bg-white/5">
                            Cancel
                        </button>
                        <button type="submit" :disabled="uploading" class="btn-primary disabled:opacity-60">
                            <x-icon name="check" class="size-4" />
                            <span x-text="uploading ? 'Uploading…' : 'Create draft'"></span>
                        </button>
                    </div>
                </footer>
            </form>
        </div>
    </div>
</div>