{% load opalplugins %}
{% load static %}
<nav class="navbar navbar-default navbar-primary navbar-fixed-top screen-only top-navbar" role="navigation">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main-navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

	  <a class="navbar-brand" href="/#/">
        <img src="{% static 'img/ohc-trans.png' %}" />
        {{OPAL_BRAND_NAME}}
        <small><small>
          {{ VERSION_NUMBER }}
        </small></small>
      </a>
    </div>



    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="main-navbar">
      <ul class="nav navbar-nav navbar-right">
        {% if request.user.is_authenticated %}
	    <li ng-class="{active: $location.path().indexOf('/list/') == 0}">
          <a href="/#/">
            <i class="fa fa-table"></i> Lists
          </a>
        </li>

        {% application_menuitems %}
        {% if not user.profile.explicit_access_only %}
          {% plugin_menuitems %}
        {% endif %}
        {% if request.user.is_staff %}
	    <li><a href="/admin"><i class="fa fa-cogs"></i> Admin</a></li>
        {% endif %}

        <li >
          <a href="#/account" title="Your Account">
            <i class="fa fa-user"></i>
          </a>
        </li>
	    <li><a href="{% url 'django.contrib.auth.views.logout' %}" title="Log out">
            <i class="fa fa-sign-out"></i>
        </a></li>

        {% endif %}

      </ul>
      {% if user.profile.can_see_pid %}
        <div ng-show="$location.path().indexOf('/search')">
          <div ng-controller="SearchCtrl">
            <form class="navbar-form navbar-right" ng-submit="search()" role="search">
              <div class="form-group nav-bar-search">
                <input
                        slash-key-focus="!state || state==='normal'"
                        ng-blur="enableShortcuts()"
                        ng-focus="disableShortcuts()"
                        ng-model="searchTerm"
                        type="text" class="form-control" placeholder="Search">
              </div>
            </form>
          </div>
        </div>
      {% endif %}
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="modal" id="changelog">
  <div class="modal-dialog">
    <div class="modal-content">
	  <div class="modal-header">
		<button type="button" class="close" data-dismiss="modal">×</button>
		<h3>Changelog</h3>
	  </div>
	  <div class="modal-body">
        {% include 'changelog.html' %}
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
