{% macro language_button(code, label) -%}
  {% if context.current_language != code %}
    <a class="nav-bar--language-link" href="/{{code}}/" aria-label="{{label}}"
    >
      {{ code }}
    </a>
  {% endif %}
{%- endmacro %}

<nav-bar class="nav-bar" dock-logo-scroll-threshold="130">
  <div class="nav-bar--content">
    <img class="nav-bar--logo" src="/img/nav-logo.png"></img>
    <div class="nav-bar--menu">
      <a href="#" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
      <a href="#" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
      <a href="#" class="nav-bar--menu-link">{{ gettext('News') }}</a>
      <a href="#" class="nav-bar--menu-link">{{ gettext('Contact') }}</a>
    </div>
    <div class="nav-bar--separator"></div>
    <div class="nav-bar--languages">
      {{ language_button('fr', 'Version Française') }}
      {{ language_button('en', 'English version') }}
    </div>
    <toggle-nav-bar-button class="nav-bar--toggle-button">
      <s class="bar"></s>
      <s class="bar"></s>
      <s class="bar"></s>
    </toggle-nav-bar-button>
  </div>
</nav-bar>