{% load i18n %}
{% load firstof from future %}

{% comment %}
Partial: App-wide header element
{% endcomment %}

<header class="navbar navbar-default" role="banner" aria-label="main" id="nav">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-nav">
        <span class="sr-only">{% trans 'Toggle navigation' %}</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      {% include 'brand.html' with class_prefix='navbar' %}
      {% if course_id %}
      <ul class="nav navbar-nav">
        <li>
          <a href="{% url 'courses:home' course_id=course_id %}" class="navbar-link active-course-name">{% firstof course_name course_id %}</a>
        </li>
      </ul>
      {% endif %}
    </div>

    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav navbar-right">
        {% if help_url %}
          <li>
            <a id="help" class="navbar-link " data-track-type="click" data-track-event="edx.bi.help.clicked"
               href="{{ help_url }}" target="_blank">{% trans "Help" %}</a>
          </li>
        {% endif %}
        <li class="dropdown">
          <a href="#" class="dropdown-toggle active-user navbar-link" data-toggle="dropdown" role="button"
             id="userMenu">
            <i class="ico-user fa fa-graduation-cap" aria-hidden="true"></i>
            <span class="active-user-name">{{ request.user.username }}</span>
            <i class="ico ico-indicator fa fa-caret-down"></i>
          </a>

          <ul class="dropdown-menu active-user-nav" role="menu" aria-labelledby="userMenu">
            <li>
              <a class="active-user-nav-logout" href="{% url 'logout' %}">{% trans "Logout" %}</a>
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <!-- / navbar-collapse -->
  </div>
  <!-- / container -->
</header>
<!-- / navbar -->