{% load i18n %}
{% load dashboard_extras %}
{% 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>
          {% captureas course_home_url %}{% url 'courses:home' course_id=course_id %}{% endcaptureas %}
          <a href="{{ course_home_url }}" class="course-label link-label"
              data-track-type="click" data-track-event="edx.bi.ui.menu.navigated"
              data-track-text="Course Home" data-track-url="{{ course_home_url }}"
              data-track-target-scope="course" data-track-target-lens="home" data-track-menu-depth="home"
              data-track-link-name="course_home">
            {#  Translators: This refers to the homepage of a course. #}
            {% 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.translated_text }}
              {# 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>
                {% captureas lens_url %}{{ item.href }}{{ item.fragment }}{% endcaptureas %}
                <a href="{{ lens_url }}" data-track-type="click"
                    data-track-event="edx.bi.ui.menu.navigated"
                    data-track-text="{{ item.text }}" data-track-url="{{ lens_url }}"
                    data-track-target-scope="{{ item.scope }}" data-track-target-lens="{{ item.lens }}"
                    data-track-target-report="{{ item.report }}" data-track-target-depth="{{ item.depth }}"
                    data-track-menu-depth="lens" data-track-link-name="{{ item.lens }}">
                  <span class="link-label">
                    <span class="ico fa {{ item.icon }}" aria-hidden="true"></span> {{ item.translated_text }}
                  </span>
                </a>
              </li>
            {% endfor %}
          </ul>
        </li>

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