{% macro navlink(site, text) -%}
<li class="nav-item mx-2">
  <a class="nav-link {{ 'active' if filename == site else '' }}"
    href="{{ url_localized(site) }}">
    {{ text }}
  </a>
</li>
{%- endmacro %}
<div id="skip">
<a href="#maincontent" class="skip">{% trans %}Skip to main content{% endtrans %}</a>
</div>

<div class="container">
  <nav class="navbar navbar-expand-lg border-bottom">
    <div class="container-fluid">
      <a class="navbar-brand d-flex" href="{{ url_localized('index.html') }}">
        <img alt="Home" width="100.5" height="45" src="{{ url_static('images/logo-2021.svg') }}">
      </a>
      <button class="navbar-toggler"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#navbarNavAltMarkup"
              aria-controls="navbarNavAltMarkup"
              aria-expanded="false"
              aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
        <ul class="navbar-nav me-lg-auto">
          {{ navlink('features.html', _('Features')) }}
          {{ navlink('principles.html', _('Principles')) }}
          {{ navlink('docs.html', _('Docs')) }}
          {{ navlink('development.html', _('Development')) }}
          {{ navlink('ngi-taler.html', _('NGI TALER')) }}
          {# {{ navlink('comingsoon.html', _('Coming soon')) }} #}
          {{ navlink('news/index.html', _('News')) }}
          {# NOTE taler-systems.com deprecated in navigation bar -- Taler Systems is reachable via consortium page instead #}
          {# <li class="nav-item mx-2">
            <a class="nav-link" href="https://taler-systems.com/" target="_blank" rel="noopener noreferrer">{% trans %}Company{% endtrans %}</a>
          </li>
          #}
        </ul>
        <div class="nav-item dropdown">
          <button class="btn btn-dark dropdown-toggle"
                  type="button"
                  id="dropdownMenu1"
                  data-bs-toggle="dropdown"
                  data-bs-auto-close="true"
                  aria-haspopup="true"
                  aria-expanded="true">
                  <img src="{{ url_static('images/languageicon.svg') }}"
                        height="35"
                        alt="[{{lang}}]" />
                        {{ lang_full }} [{{ lang }}]
          </button>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
          {% if lang != 'en' %}
            <li><a class="dropdown-item" href="{{ self_localized('en') }}">English [en]</a></li>
          {% endif %}
          {% if lang != 'ar' %}
            <li><a class="dropdown-item" href="{{ self_localized('ar') }}">عربى [ar]</a></li>
          {% endif %}
    <!--  {% if lang != 'cs' %}
            <li><a class="dropdown-item" href="{{ self_localized('cs') }}">Česky [cs]</a></li>
          {% endif %} -->
          {% if lang != 'de' %}
            <li><a class="dropdown-item" href="{{ self_localized('de') }}">Deutsch [de]</a></li>
          {% endif %}
          {% if lang != 'es' %}
            <li><a class="dropdown-item" href="{{ self_localized('es') }}">Espa&ntilde;ol [es]</a></li>
          {% endif %}
          {% if lang != 'fi' %}
            <li><a class="dropdown-item" href="{{ self_localized('fi') }}">Suomen kieli [fi]</a></li>
          {% endif %}
          {% if lang != 'fr' %}
            <li><a class="dropdown-item" href="{{ self_localized('fr') }}">Fran&ccedil;ais [fr]</a></li>
          {% endif %}
          {% if lang != 'hu' %}
            <li><a class="dropdown-item" href="{{ self_localized('hu') }}">Magyar [hu]</a></li>
          {% endif %}
    <!--  {% if lang != 'hi' %}
            <li><a class="dropdown-item" href="{{ self_localized('hi') }}">हिंदी [hi]</a></li>
          {% endif %} -->
          {% if lang != 'it' %}
            <li><a class="dropdown-item" href="{{ self_localized('it') }}">Italiano [it]</a></li>
          {% endif %}
          {% if lang != 'ja' %}
            <li><a class="dropdown-item" href="{{ self_localized('ja') }}">日本語 [ja]</a></li>
          {% endif %}
          {% if lang != 'ko' %}
            <li><a class="dropdown-item" href="{{ self_localized('ko') }}">한국어 [ko]</a></li>
          {% endif %}
    <!--  {% if lang != 'pt' %}
            <li><a class="dropdown-item" href="{{ self_localized('pt') }}">Portugu&ecirc;s [pt]</a></li>
          {% endif %} -->
    <!--  {% if lang != 'pt_BR' %}
            <li><a class="dropdown-item" href="{{ self_localized('pt_BR') }}">Portugu&ecirc;s (Brazil) [pt_BR]</a></li>
          {% endif %} -->
          {% if lang != 'ru' %}
            <li><a class="dropdown-item" href="{{ self_localized('ru') }}">&#x420;&#x443;&#x301;&#x441;&#x441;&#x43A;&#x438;&#x439;&#x20;&#x44F;&#x437;&#x44B;&#x301;&#x43A; [ru]</a></li>
          {% endif %}
          {% if lang != 'sv' %}
            <li><a class="dropdown-item" href="{{ self_localized('sv') }}">Svenska [sv]</a></li>
          {% endif %}
          {% if lang != 'tr' %}
            <li><a class="dropdown-item" href="{{ self_localized('tr') }}">T&uuml;rk&ccedil;e [tr]</a></li>
          {% endif %}
          {% if lang != 'uk' %}
            <li><a class="dropdown-item" href="{{ self_localized('uk') }}">Українська [uk]</a></li>
          {% endif %}
          {% if lang != 'zh_Hant' %}
            <li><a class="dropdown-item" href="{{ self_localized('zh_Hant') }}">繁體中文 [zh]</a></li>
          {% endif %}
          {% if lang != 'zh_Hans' %}
            <li><a class="dropdown-item" href="{{ self_localized('zh_Hans') }}">简体中文 [zh_Hans]</a></li>
          {% endif %}
          </ul>
        </div>
      </div>
    </div>
  </nav>
</div>