juanatsap
45 lines
1.8 KiB
HTML
45 lines
1.8 KiB
HTML
{{define "language-selector"}}
|
|
<!-- Language selector with atomic updates via out-of-band swaps -->
|
|
<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}}
|