{% macro nav_logo() %}
<div class="p-navigation__tagged-logo">
  <a class="p-navigation__link" href="{{ logo_link_URL }}">
    <div class="p-navigation__logo-tag">
      <img class="p-navigation__logo-icon" src="{{ logo_img_URL }}" alt="">
    </div>
  <span class="p-navigation__logo-title">{{ logo_title }}</span>
  </a>
</div>
<a href="#navigation" class="p-navigation__toggle--open" title="menu">Menu</a>
<a href="#navigation-closed" class="p-navigation__toggle--close" title="close menu">Close menu</a>
{% endmacro %}

{% macro nav_items() %}
  <ul class="p-navigation__items">
    <li class="p-navigation__item">
      <a class="p-navigation__link" href="https://{{ product_page }}">{{ project }}</a>
    </li>

    {% if link1_name and link1_URL %}
    <li class="p-navigation__item">
      <a class="p-navigation__link" href="{{ link1_URL }}">{{ link1_name }}</a>
    </li>
    {% endif %}

    {% if link2_name and link2_URL %}
    <li class="p-navigation__item">
      <a class="p-navigation__link" href="{{ link2_URL }}">{{ link2_name }}</a>
    </li>
    {% endif %}
    <li class="p-navigation__item--dropdown-toggle" id="link-2">
      <a href="#link-2-menu" aria-controls="link-2-menu" class="p-navigation__link">Resources</a>
      <ul class="p-navigation__dropdown" id="link-2-menu" aria-hidden="true">
        {% if discourse %}
        <li>
          <a href="{{ discourse }}" class="p-navigation__dropdown-item">Discourse</a>
        </li>
        {% endif %}

        {% if mattermost %}
        <li>
          <a href="{{ mattermost }}" class="p-navigation__dropdown-item">Mattermost</a>
        </li>
        {% endif %}

        {% if matrix %}
        <li>
          <a href="{{ matrix }}" class="p-navigation__dropdown-item">Matrix</a>
        </li>
        {% endif %}

        {% if github_url %}
        <li>
          <a href="{{ github_url }}" class="p-navigation__dropdown-item">GitHub</a>
        </li>
        {% endif %}
      </ul>
    </li>
  </ul>
{% endmacro %}

<header id="navigation" class="p-navigation is-dark">
  <a href="#content" class="p-link--skip">Jump to main content</a>
  <div class="l-docs__subgrid">
    <div class="l-docs__sidebar">
      <div class="p-navigation__banner">
        {{ nav_logo() }}
      </div>
    </div>
    <div class="l-docs__main">
      <div class="p-navigation__row u-fixed-width">
        <nav class="p-navigation__nav" aria-label="Main">
          {{ nav_items() }}
        </nav>
      </div>
    </div>
  </div>
</header>