{% load i18n %}
{% comment %}
Partial for displaying the lens navigation and the sections within the lenses.
{% endcomment %}

{% if primary_nav_items %}
  {#  Translators: Application here refers to the web site/application being used (e.g. the dashboard). #}
  <nav class="navbar navbar-default lens-nav" role="navigation" aria-label="{% trans "Application" %}">
    <div class="container ">
      <ul class="nav navbar-nav">
        <li class="dropdown">
          <a href="#" class="dropdown-toggle navbar-link" data-toggle="dropdown" role="button" id="lensPrimaryMenu">
            <span class="link-label">
            <i class="ico fa {{ primary_nav_item.icon }}" aria-hidden="true"></i>
            {{ primary_nav_item.label }}
            {# Translators: This refers to the active tab/navigation item. #}
            <span class="sr-only">({% trans "Active" %})</span>
            <i class="ico ico-indicator fa fa-caret-down"></i></span>
          </a>

          <ul class="dropdown-menu" role="menu" aria-labelledby="lensPrimaryMenu">
            {% for item in primary_nav_items %}
              <li>
                <a href="{{ item.href }}">
                  <span class="link-label">
                    <i class="ico fa {{ item.icon }}" aria-hidden="true"></i> {{ item.label }}
                  </span>
                </a>
              </li>
            {% endfor %}
          </ul>
        </li>

        {% include "submenu_navigation.html" with nav_items=secondary_nav_items%}
      </ul>
    </div>
  </nav>
{% endif %}
