{% set localeData = aa_site_locales() %}
{% if localeData.alternates|default([])|length %}
  <nav class="navbar navbar-expand-lg locale-switcher">
    <div class="container-fluid">
      <div class="collapse navbar-collapse" id="navbarNavDarkDropdown">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" href="#">
              <span class="mr-2 d-inline text-gray-600 small"><i class="fa fa-chevron-down"></i></span>
              <img class="img-profile rounded-circle"
                   src="{{ asset('/assets/images/locales/' ~ localeData.current.code|lower ~ '.png')|webp() }}"
                   alt="{{ localeData.current.code|upper }}"
                   style="width: 25px;height: 25px;"
              >
            </a>
            <div class="dropdown-menu">
              {% for locale in localeData.alternates %}
                <a class="dropdown-item"
                    {% set alternate = aa_content_path_safe(content, {'_locale': locale.code}, 'chain', {'locale': locale.code}) %}
                    {# here, we should also handle multi domain localization #}
                    {# /!\ if we cant generate alternate content url, at least redirect to locale index #}
                    {% if alternate is empty %}{% set alternate = '/' ~ locale %}{% endif %}
                   href="{{ app.request.scheme ~ '://' ~ app.request.host }}{{ alternate }}">
                  <span class="text-gray-600 mr-2">{{ locale|upper }}</span>
                  <img class="img-profile rounded-circle"
                       src="{{ asset('/assets/images/locales/' ~ locale|lower ~ '.png')|webp() }}"
                       alt="locale image"
                       style="width: 25px;height: 25px;"
                  >
                </a>
              {% endfor %}
            </div>
          </li>
        </ul>
      </div>
    </div>
  </nav>
{% endif %}

