{% if lumina_version_json is defined and lumina_version_json %}
    <div id="lumina-version-switcher"
         x-data="versionSwitcher()"
         data-json-url="{{ lumina_version_json }}"
         data-version-match="{{ lumina_version_match }}"
         class="relative"
         @keydown.escape="open = false">
        <button @click="toggle()"
                :aria-expanded="open"
                aria-haspopup="true"
                aria-label="Select documentation version"
                class="flex items-center gap-1 rounded-md border border-lumina-border bg-lumina-bg-secondary px-2 py-1 text-xs font-medium text-lumina-text-muted hover:text-lumina-text hover:border-lumina-accent transition-colors cursor-pointer"
                type="button">
            <span x-text="currentLabel || '{{ lumina_version_match }}'">{{ lumina_version_match }}</span>
            <svg class="h-3 w-3 transition-transform duration-200"
                 :class="open && 'rotate-180'"
                 fill="none"
                 stroke="currentColor"
                 stroke-width="2"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 viewBox="0 0 24 24"
                 aria-hidden="true">
                {{ lumina_icon_inner("chevron-down") }}
            </svg>
        </button>
        <div x-show="open"
             x-cloak
             @click.away="open = false"
             x-transition:enter="transition ease-out duration-150"
             x-transition:enter-start="opacity-0 -translate-y-1"
             x-transition:enter-end="opacity-100 translate-y-0"
             x-transition:leave="transition ease-in duration-100"
             x-transition:leave-start="opacity-100"
             x-transition:leave-end="opacity-0"
             class="absolute left-0 top-full mt-1 min-w-[10rem] rounded-lg border border-lumina-border bg-lumina-bg py-1 shadow-lg"
             role="menu">
            <template x-for="v in versions" :key="v.version">
                <a :href="_versionUrl(v)"
                   class="flex items-center gap-2 px-3 py-1.5 text-[0.8125rem] text-lumina-text-muted hover:text-lumina-text hover:bg-lumina-bg-secondary transition-colors no-underline"
                   :class="v.version === match && 'font-medium text-lumina-accent'"
                   role="menuitem">
                    <span x-text="v.name || v.version"></span>
                    <span x-show="v.version === match"
                          class="ml-auto text-[0.6875rem] text-lumina-accent">(current)</span>
                </a>
            </template>
            <div x-show="error"
                 class="px-3 py-1.5 text-[0.8125rem] text-lumina-text-muted italic">Failed to load versions</div>
        </div>
    </div>
{% endif %}