{{--
| Release details drawer.
|
| Built from the collection already on the page, so opening it costs nothing.
| The full release page (versions.show) stays the place for the complete
| activity log — this is the quick look that keeps you in the grid.
--}}

<div x-show="detailsId !== null" x-cloak @click="detailsId = null"
     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"
     class="fixed inset-0 z-40 bg-slate-900/50 backdrop-blur-sm"></div>

<aside x-show="detailsId !== null" x-cloak
       x-transition:enter="transition ease-out duration-200"
       x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
       x-transition:leave="transition ease-in duration-150"
       x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
       class="fixed inset-y-0 right-0 z-50 flex w-full max-w-lg flex-col bg-white shadow-2xl dark:bg-shell-card"
       role="dialog" aria-modal="true" aria-label="Release details">

    <template x-if="detailsVersion">
        <div class="flex min-h-0 flex-1 flex-col">
            <header class="flex h-16 shrink-0 items-center justify-between gap-3 border-b border-slate-200 px-5
                           dark:border-white/[0.06]">
                <div class="flex min-w-0 items-center gap-3">
                    <span class="grid size-9 shrink-0 place-items-center rounded-xl bg-brand-50 text-brand-600
                                 ring-1 ring-inset ring-brand-500/20 dark:bg-brand-500/10 dark:text-brand-400">
                        <x-icon name="package" class="size-4" />
                    </span>
                    <span class="min-w-0">
                        <span class="block truncate font-mono text-sm font-bold text-slate-900 dark:text-white"
                              x-text="`v${detailsVersion.version}`"></span>
                        <span class="block truncate text-[11px] text-slate-500 dark:text-slate-400"
                              x-text="detailsVersion.name || 'No release name'"></span>
                    </span>
                </div>

                <button type="button" @click="detailsId = null" 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="scroll-slim min-h-0 flex-1 overflow-y-auto p-5">

                {{-- Adoption. Four numbers reported by installations, plus the
                     ratio that actually matters. --}}
                <div class="grid grid-cols-2 gap-3">
                    <div class="rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Downloads</p>
                        <p class="mt-1 text-xl font-bold text-slate-900 dark:text-white" x-text="detailsVersion.downloads"></p>
                        <p class="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400"
                           x-text="`${detailsVersion.checks} update checks`"></p>
                    </div>

                    <div class="rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                        <p class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">Install success</p>
                        <p class="mt-1 text-xl font-bold"
                           :class="successRate(detailsVersion) === null
                               ? 'text-slate-400 dark:text-slate-500'
                               : (successRate(detailsVersion) >= 90 ? 'text-emerald-600 dark:text-emerald-400' : 'text-amber-600 dark:text-amber-400')"
                           x-text="successRate(detailsVersion) === null ? '—' : `${successRate(detailsVersion)}%`"></p>
                        <p class="mt-0.5 text-[11px] text-slate-500 dark:text-slate-400"
                           x-text="successRate(detailsVersion) === null
                               ? 'No install reported'
                               : `${detailsVersion.installed} installed · ${detailsVersion.failed} failed`"></p>
                    </div>
                </div>

                {{-- Package --}}
                <h3 class="profile-heading mt-5">Package</h3>
                <template x-if="detailsVersion.hasPackage">
                    <div class="rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]">
                        <p class="flex flex-wrap items-center gap-2 text-xs text-slate-700 dark:text-slate-200">
                            <x-icon name="package" class="size-3.5 shrink-0 text-slate-400" />
                            <span class="font-mono" x-text="detailsVersion.fileName"></span>
                            <span class="text-slate-400">·</span>
                            <span x-text="size(detailsVersion.size)"></span>
                            <span class="text-slate-400">·</span>
                            <span class="capitalize" x-text="detailsVersion.type"></span>
                        </p>

                        <div class="mt-2.5">
                            <p class="flex items-center justify-between gap-2">
                                <span class="text-[10px] font-semibold uppercase tracking-wider text-slate-500 dark:text-slate-400">
                                    SHA-256
                                </span>
                                <button type="button" @click="copy(detailsVersion.checksum, 'SHA-256 copied')"
                                        class="rounded-md p-1 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700
                                               dark:hover:bg-white/10 dark:hover:text-white" aria-label="Copy checksum">
                                    <x-icon name="copy" class="size-3.5" />
                                </button>
                            </p>
                            <code class="mt-1 block break-all rounded-lg bg-slate-50 p-2 font-mono text-[10px] leading-relaxed
                                         text-slate-600 dark:bg-white/[0.04] dark:text-slate-300"
                                  x-text="detailsVersion.checksum"></code>
                        </div>

                        {{-- The signature is what stands between a package and
                             every client refusing it, so its state is stated
                             plainly rather than left to be discovered on publish. --}}
                        <p class="mt-2.5 flex items-start gap-1.5 text-[11px] leading-relaxed"
                           :class="detailsVersion.signed
                               ? 'text-emerald-600 dark:text-emerald-400'
                               : 'text-amber-600 dark:text-amber-400'">
                            <x-icon name="lock" class="size-3.5 shrink-0 translate-y-px" />
                            <span x-text="detailsVersion.signed
                                ? 'Signed offline — this release can be published.'
                                : 'Not signed. Run updates:sign and attach the signature before publishing.'"></span>
                        </p>
                    </div>
                </template>
                <template x-if="! detailsVersion.hasPackage">
                    <p class="profile-empty">No package uploaded. Edit the release to attach one before publishing.</p>
                </template>

                {{-- Record --}}
                <h3 class="profile-heading mt-5">Release record</h3>
                <dl class="divide-y divide-slate-100 overflow-hidden rounded-xl border border-slate-200/80
                           dark:divide-white/[0.06] dark:border-white/[0.06]">
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Product</dt>
                        <dd class="text-xs font-semibold text-slate-800 dark:text-slate-100"
                            x-text="detailsVersion.product === 'ai' ? 'TaxPilot AI' : 'TaxPilot CMS'"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Channel</dt>
                        <dd class="text-xs font-semibold capitalize text-slate-800 dark:text-slate-100" x-text="detailsVersion.channel"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Status</dt>
                        <dd class="text-xs font-semibold capitalize text-slate-800 dark:text-slate-100" x-text="detailsVersion.status"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Minimum supported</dt>
                        <dd class="font-mono text-xs font-semibold text-slate-800 dark:text-slate-100"
                            x-text="detailsVersion.minSupported || '—'"></dd>
                    </div>
                    <div class="flex items-center justify-between gap-3 px-3 py-2.5">
                        <dt class="text-xs text-slate-500 dark:text-slate-400">Created by</dt>
                        <dd class="text-xs font-semibold text-slate-800 dark:text-slate-100" x-text="detailsVersion.author || '—'"></dd>
                    </div>
                </dl>

                {{-- Timeline: only the moments this record actually stores. --}}
                <h3 class="profile-heading mt-5">Timeline</h3>
                <ol class="relative space-y-3 border-l border-slate-200 pl-4 dark:border-white/10">
                    <template x-for="step in detailsVersion.timeline" :key="step.label">
                        <li class="relative">
                            <span class="absolute -left-[21px] top-1.5 size-2 rounded-full ring-4 ring-white dark:ring-shell-card"
                                  :class="step.done ? 'bg-brand-500' : 'bg-slate-300 dark:bg-slate-600'" aria-hidden="true"></span>
                            <p class="text-xs font-semibold"
                               :class="step.done ? 'text-slate-800 dark:text-slate-100' : 'text-slate-400 dark:text-slate-500'"
                               x-text="step.label"></p>
                            <p class="text-[11px] text-slate-500 dark:text-slate-400" x-text="step.at || 'Not yet'"></p>
                        </li>
                    </template>
                </ol>

                {{-- Notes --}}
                <h3 class="profile-heading mt-5">Release notes</h3>
                <template x-if="detailsVersion.notes">
                    <div class="release-notes rounded-xl border border-slate-200/80 p-3 dark:border-white/[0.06]"
                         x-html="notesHtml(detailsVersion.notes)"></div>
                </template>
                <template x-if="! detailsVersion.notes">
                    <p class="profile-empty">No release notes were written for this version.</p>
                </template>
            </div>

            <footer class="flex shrink-0 items-center gap-2 border-t border-slate-200 p-4 dark:border-white/[0.06]">
                <a :href="detailsVersion.showUrl" class="btn-primary flex-1">
                    <x-icon name="file-text" class="size-4" /> Open release page
                </a>
                <a :href="detailsVersion.editUrl" x-show="detailsVersion.editUrl"
                   class="rounded-xl border border-slate-200 px-3 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"
                   aria-label="Edit release">
                    <x-icon name="edit" class="size-4" />
                </a>
                <button type="button" x-show="detailsVersion.hasPackage"
                        @click="copy(detailsVersion.checksum, 'SHA-256 copied')"
                        class="rounded-xl border border-slate-200 px-3 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"
                        aria-label="Copy checksum">
                    <x-icon name="hash" class="size-4" />
                </button>
            </footer>
        </div>
    </template>
</aside>