{% load i18n %}
{% load static %}

<header class="navbar navbar-default">
  <div class="container">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button id="hamburger-button" class="navbar-toggle collapsed" data-toggle="collapse"
              data-target="#main-navbar-collapse" type="button" aria-expanded="false">
        <span class="sr-only">{% trans "Toggle navigation" %}</span>
        <span aria-hidden="true" class="icon-bar"></span>
        <span aria-hidden="true" class="icon-bar"></span>
        <span aria-hidden="true" class="icon-bar"></span>
      </button>
      {% block navbar_brand %}{% endblock navbar_brand %}
    </div>

    <div class="collapse navbar-collapse" id="main-navbar-collapse">
      <ul class="nav navbar-nav navbar-right">
        {% if user.is_authenticated %}
          <li class="btn-group user-menu">
            <button type="button" class="btn btn-default hidden-xs main-btn nav-button"
                    onclick="window.open('{{ lms_dashboard_url }}');">
              <i class="icon fa fa-home" aria-hidden="true"></i>
              <span class="sr-only">{% trans "Dashboard for:" %}</span>
              {{ user.username }}
            </button>
            <button type="button" class="btn btn-default dropdown-toggle hidden-xs nav-button"
                    data-toggle="dropdown"
                    aria-haspopup="true">
              <span class="caret"></span>
              <span class="sr-only">{% trans "Toggle Dropdown" %}</span>
            </button>
            <ul class="dropdown-menu" aria-expanded="false">
              {% block dropdown_menu %}{% endblock dropdown_menu %}
            </ul>
              {% block small_dropdown_menu %}{% endblock small_dropdown_menu %}
          </li>
        {% else %}
          <a class="btn btn-primary navbar-btn hidden-xs" href="{% url 'login' %}">{% trans "Login" %}</a>
          <li class="visible-xs"><a class="nav-link" href="{% url 'login' %}">{% trans "Login" %}</a></li>
          </a>
        {% endif %}
      </ul>
    </div>
  </div>
</header>
