{{define "language-selector"}}
<!-- Language selector with atomic updates via out-of-band swaps -->
<!-- Skeleton loading handled by global body-level hyperscript listener -->
<div class="language-selector-wrapper">
    <!-- Loading indicators placed outside swap target so they persist -->
    <!-- Using span wrapper to avoid shadow DOM issues with iconify-icon -->
    <span id="lang-indicator-en" class="htmx-indicator small">
        <iconify-icon icon="mdi:loading"
                      class="spinning light"
                      width="14"
                      height="14"
                      aria-label="Loading"></iconify-icon>
    </span>
    <span id="lang-indicator-es" class="htmx-indicator small">
        <iconify-icon icon="mdi:loading"
                      class="spinning light"
                      width="14"
                      height="14"
                      aria-label="Loading"></iconify-icon>
    </span>

    <div class="language-selector" id="language-selector">
        <button class="selector-btn {{if eq .Lang "en"}}active{{end}}"
                data-short="EN"
                hx-get="/switch-language?lang=en"
                hx-target="#language-selector"
                hx-swap="outerHTML swap:250ms settle:250ms"
                hx-indicator="#lang-indicator-en"
                hx-push-url="/?lang=en"
                aria-label="English">
            <span>English</span>
        </button>
        <button class="selector-btn {{if eq .Lang "es"}}active{{end}}"
                data-short="ES"
                hx-get="/switch-language?lang=es"
                hx-target="#language-selector"
                hx-swap="outerHTML swap:250ms settle:250ms"
                hx-indicator="#lang-indicator-es"
                hx-push-url="/?lang=es"
                aria-label="Español">
            <span>Español</span>
        </button>
    </div>
</div>
{{end}}