{#- Language switcher for the i18n plugin. URLs are locale-agnostic; the service worker serves the correct locale sibling based on the user's preferred locale stored in IndexedDB. Clicking a language option only updates the stored preference and reloads the same URL, so the switcher never needs to know the current path. -#} {% if config.extra.i18n_languages %}
<div class="md-header__option" data-md-component="i18n">
<div class="md-select">
{% set icon = (config.theme.icon.i18n or "material/translate") | validate_icon_name %}
<button class="md-header__button md-icon" aria-label="{{ lang.t('select.language') }}">
{% if icon %} {% include ".icons/" ~ icon ~ ".svg" %} {% endif %}
</button>
<div class="md-select__inner">
<ul class="md-select__list">
{% for lang in config.extra.i18n_languages %}
<li class="md-select__item">
<a href="#" hreflang="{{ lang.locale }}" class="md-select__link{% if lang.locale == page.i18n_locale %} md-select__link--active{% endif %}">
{{ lang.name }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
<script>!function(){var e=document.querySelector('[data-md-component="i18n"]');e&&e.querySelectorAll(".md-select__link").forEach(function(e){e.addEventListener("click",function(o){o.preventDefault(),o.stopPropagation();var n=e.getAttribute("hreflang")||"";n!==(document.documentElement.lang||"")&&(window.docsforge&&window.docsforge.setLocale?window.docsforge.setLocale(n).then(function(){location.reload()}):location.reload())})})}()</script>
</div>
{% endif %}