{% load i18n wagtailsettings_tags wagtailcore_tags %}
{% get_settings use_default_site=True %}
{% if page %}
<nav role="navigation" class="design-system-translate design-system-nav">
  {% get_current_language as LANGUAGE_CODE %}
  {% get_available_languages as LANGUAGES %}
  {% get_language_info_list for LANGUAGES as languages %}
  <div class="design-system-nav__item">
    <button class="design-system-translate__btn design-system-btn design-system-btn--tertiary"
            aria-controls="translate-menu"
            aria-expanded="false"
            title="{% translate 'Select language' %}">
      {% get_language_info for LANGUAGE_CODE as current_lang %}{{ current_lang.code|upper }}
      <span class="design-system-hidden-lg"> - {{ current_lang.name_local |title }}</span>
    </button>
    <div class="design-system-collapse design-system-translate__menu design-system-menu" id="translate-menu">
      <ul class="design-system-menu__list">
        {% for translation in page.get_translations.live %}
          <li>
            <a class="design-system-translate__language design-system-nav__link"
               hreflang="{{ translation.locale.language_code|lower }}"
               lang="{{ translation.locale.language_code|lower }}"
               href="{% pageurl translation %}"
               {% if translation.locale.language_code == LANGUAGE_CODE %}aria-current="true"{% endif %}>{{ translation.locale.language_code|upper }} - {{ translation.locale.language_name_local }}</a>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>
</nav>
{% endif %}