uktrade/directory-components

{% load i18n %}

<div class="main-nav-container {{ device_type }}">
  {% if sso_is_logged_in and request.user.first_name and device_type == 'mobile' %}
  <div class="user-greeting">Hi {{ request.user.first_name }}</div>
  {% endif %}
  <nav id="{{ id }}" class="main-nav {{ device_type }} {% if sso_is_logged_in %}signed-in{% endif %}" aria-label="{% trans 'Main menu' %}">
    <ul class="grid-row nav-list">
      {% if sso_is_logged_in %}
      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_home }}" class="link-heading {% if device_type != 'mobile' %}mobile-only{% endif %}" id="header-learn-{{ device_type }}" {% if js_tag %}data-js-menu-index=0{% endif %}>Home</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_learn_to_export }}" class="link-heading new" id="header-learn-{{ device_type }}" {% if js_tag %}data-js-menu-index=0{% endif %}>Learn to export</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_where_to_export }}" class="link-heading new" id="header-where-{{ device_type }}" {% if js_tag %}data-js-menu-index=1{% endif %}>Where to export</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_exportplan_dashboard }}" class="link-heading new" id="header-make-{{ device_type }}" {% if js_tag %}data-js-menu-index=2{% endif %}>Make an export plan</a>
      </li>

      {% if device_type == 'mobile' %}
      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_account }}" class="link-heading" id="header-home-{{ device_type }}" {% if js_tag %}data-js-menu-index=0{% endif %}>Account</a>
      </li>
      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_advice }}" class="link-heading" id="header-advice-{{ device_type }}" {% if js_tag %}data-js-menu-index=0{% endif %}>Advice</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_markets }}" class="link-heading" id="header-markets-{{ device_type }}" {% if js_tag %}data-js-menu-index=1{% endif %}>Markets</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_services }}" class="link-heading" id="header-services-{{ device_type }}" {% if js_tag %}data-js-menu-index=2{% endif %}>Services</a>
      </li>
      {% endif %}
      
      {% else %}
      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_advice }}" class="link-heading" id="header-advice-{{ device_type }}" {% if js_tag %}data-js-menu-index=0{% endif %}>Advice</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_markets }}" class="link-heading" id="header-markets-{{ device_type }}" {% if js_tag %}data-js-menu-index=1{% endif %}>Markets</a>
      </li>

      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ header_footer_urls.magna_services }}" class="link-heading" id="header-services-{{ device_type }}" {% if js_tag %}data-js-menu-index=2{% endif %}>Services</a>
      </li>
      {% endif %}

      {% if features.NEWS_SECTION_ON %}
        <li class="menu-item" data-js-menu-item-container>
          <a href="{{ header_footer_urls.domestic_news }}" class="link-heading" id="header-news-{{ device_type }}" {% if js_tag %}data-js-menu-index=3{% endif %}>News and events</a>
        </li>
      {% endif %}

      {% if sso_is_logged_in %}
      <li class="menu-item" data-js-menu-item-container>
        <a href="{{ sso_logout_url }}" class="link-heading {% if device_type != 'mobile' %}mobile-only{% endif %} margin-bottom-15" id="sign_out_button_{{ device_type }}">Sign out</a>
      </li>
      {% endif %}
    </ul>

    {% if not sso_is_logged_in %}
    <a href="/login" class="button button-blue margin-top-15 mobile-only">Sign in</a>
    {% endif %}
  </nav>
</div>