{% load i18n %}
{% load static %}

{% get_current_language as LANGUAGE_CODE %}

<header class="flx flx-col spc-btwn">

  {% if settings.RECRUITMENT_BANNER_LINK and LANGUAGE_CODE|slice:"0:2" == "en" %}
    <div class="recruitment-banner">
      <a id="recruitment-banner" class="text-link" href="{{ settings.RECRUITMENT_BANNER_LINK }}" target="_blank" rel="noopener noreferrer" data-ga="send-ga-funnel-pings" data-event-category="Recruitment" data-event-label="{{ settings.RECRUITMENT_BANNER_TEXT }}">{{ settings.RECRUITMENT_BANNER_TEXT }}</a>
    </div>
  {% endif %}

  <div class="flx flx-row spc-btwn row-full-width header-top">
    <a href="/" class="flx flx-row logo-wrapper" aria-label="Firefox Relay">
      <div class="fx-private-relay-logomark"></div>
      <div class="fx-private-relay-logotype"></div>
    </a>
    <nav class="flx flx-row ff-Met al-cntr header-nav hide-mobile">
      <a class="{% if request.path == '/' or request.path == '/accounts/profile/' %} active-header-link {% endif %} header-link" href="/">Home</a>
      <a class="{% if request.path == '/faq' %} active-header-link {% endif %} header-link" href="/faq">FAQ</a>
    </nav>
    {% include "includes/login.html" %}
  </div>
  <nav class="flx flx-col ff-Met al-cntr mobile-menu show-mobile">
    <button class="mobile-menu-toggle full-width ff-Met" aria-label="Open mobile menu"><span class="mobile-menu-label">Menu</span></button>
    <div class="mobile-menu-links flx flx-col">
      <a class="{% if request.path == '/' or request.path == '/accounts/profile/' %} active-header-link {% endif %} mobile-menu-link mobile-home-link" href="/">Home</a>
      <a class="{% if request.path == '/faq' %} active-header-link {% endif %} mobile-menu-link" href="/faq">FAQ</a>
    </div>
    </nav>
</header>