{% 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="#collective" class="nav-bar--menu-link">{{ gettext('Collective') }}</a>
      <a href="#games" class="nav-bar--menu-link">{{ gettext('Games') }}</a>
      <a href="#news" 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--links">
      <a class="nav-bar--link" href="mailto:contact@frog-collective.com">
          <img class="nav-bar--link-icon" src="/img/mail-fill.svg" alt-text="{{ gettext('Mail') }}"></img>
      </a>
      <a class="nav-bar--link" href="https://www.youtube.com/@FrogCoGames" target="_blank">
          <img class="nav-bar--link-icon" src="/img/youtube-fill.svg" alt-text="Youtube"></img>
      </a>
      <a class="nav-bar--link" href="https://www.twitch.tv/frogcollective" target="_blank">
          <img class="nav-bar--link-icon" src="/img/twitch-fill.svg" alt-text="Twitch"></img>
      </a>
      <a class="nav-bar--link" href="https://mastodon.social/@frogcollective" target="_blank">
          <img class="nav-bar--link-icon" src="/img/mastodon-fill.svg" alt-text="Mastodon"></img>
      </a>
      <a class="nav-bar--link" href="https://x.com/FrogCoGames" target="_blank">
          <img class="nav-bar--link-icon" src="/img/twitter-x-line.svg" alt-text="Twitter - X"></img>
      </a>
      <a class="nav-bar--link" href="https://www.facebook.com/profile.php?id=61560180067337" target="_blank">
          <img class="nav-bar--link-icon" src="/img/facebook-circle-fill.svg" alt-text="Facebook"></img>
      </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>

