{% 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="grid-container">
      <ul class="nav navbar-nav">
        <li>
          {#  Translators: This refers to the homepage of a course. #}
          <a href="{% url 'courses:home' course_id=course_id %}" class="course-label link-label">{% trans "Course Home" %}</a>
        </li>
        <li class="dropdown">
          <button class="dropdown-toggle navbar-link" data-toggle="dropdown" id="lensPrimaryMenu"
              aria-controls="lensDropdownMenu">
            <span class="link-label">
              <span class="sr-only">{% trans "Navigation Menu." %}</span>
              <span class="ico fa {{ primary_nav_item.icon }}" aria-hidden="true"></span>
              {{ primary_nav_item.label }}
              {# Translators: This refers to the active tab/navigation item. #}
              <span class="sr-only">({% trans "Active" %})</span>
              <span class="ico ico-indicator fa fa-caret-down" aria-hidden="true"></span>
            </span>
          </button>

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

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