{% extends "templates/page.html" %}

<!-- let's add some button at navi bar -->
{% block nav_bar %}
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        {% block logo %}
        <span id="jupyterhub-logo" class="pull-left">
            <a href="{{logo_url or base_url}}"><img src='{{base_url}}logo' alt='JupyterHub' class='jpy-logo' title='Home'/></a>
        </span>
        {% endblock %}
        {% if user %}
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#thenavbar" aria-expanded="false">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        {% endif %}
      </div>

      <div class="collapse navbar-collapse" id="thenavbar">
        {% if user %}
        <ul class="nav navbar-nav">
          {% block nav_bar_left_items %}
            <li><a href="{{base_url}}home"><i class="fa fa-server" aria-hidden="true"></i> Server</a></li>
            <li><a href="{{base_url}}token"><i class="fa fa-key" aria-hidden="true"></i> Token</a></li>
            {% if 'admin:users' in parsed_scopes and 'admin:servers' in parsed_scopes %}
            <li><a href="{{base_url}}admin"><i class="fa fa-user-secret" aria-hidden="true"></i> Admin</a></li>
            {% endif %}
            {% if services %}
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Services<span class="caret"></span></a>
              <ul class="dropdown-menu">
              {% for service in services %}
              {% block service scoped %}
                <li><a class="dropdown-item" href="{{service.prefix}}">{{service.name}}</a></li>
              {% endblock %}
              {% endfor %}
              </ul>
            </li>
            {% endif %}
          {% endblock %}
        </ul>
        {% endif %}
        <ul class="nav navbar-nav navbar-right">
          {% block nav_bar_right_items %}
            <li>
              {% block login_widget %}
                <span id="login_widget">
                  <a role="button" class="btn-sm btn navbar-btn btn-default" href="/"><i class="fa fa-home" aria-hidden="true"></i> Home</a>
                  <a role="button" class="btn-sm btn navbar-btn btn-default" href="/auth/" target="_blank" rel="noopener noreferrer"><i class="fa fa-shield" aria-hidden="true"></i> Auth</a>
                  {% if user %}
                    <p class="navbar-text">{{user.name}}</p>
                    <a id="logout" role="button" class="navbar-btn btn-sm btn btn-default" href="/auth/logout"> <i class="fa fa-power-off" aria-hidden="true"></i> Logout</a>
                  {% else %}
                    <a id="login" role="button" class="btn-sm btn navbar-btn btn-default" href="{{login_url}}">Login</a>
                  {% endif %}
                </span>
              {% endblock %}
            </li>
          {% endblock %}
        </ul>
      </div>

      {% block header %}
      {% endblock %}
    </div>
  </nav>
{% endblock %}