<!doctype html>
<html lang='en' ng-app="bgApp">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title ng-bind="title"></title>

    <link href="vendor.css" rel="stylesheet">
    <link href="index.css" rel="stylesheet">
    <link ng-if="themes.slate" ng-href="dark.css" rel="stylesheet">

    <!-- Favicon -->
    <link ng-if="config.iconDefault"
          ng-href="image/{{config.iconDefault}}.png"
          rel="shortcut icon">
  </head>

  <body ng-cloak ng-controller="ApplicationController">
    <!-- Navbar Start -->
    <nav class="navbar navbar-default navbar-static-top"
         role="navigation"
         style="margin-bottom:0">

      <!-- Navbar Top Start -->
      <div class="navbar-header">
        <button type="button" class="navbar-toggle"
                data-toggle="collapse" data-target=".navbar-collapse">
          <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="#/">
          <i ng-class="getIcon(config.iconDefault)"></i>
          <span ng-cloak>{{config.applicationName}}</span>
        </a>
      </div>

      <ul class="nav navbar-nav navbar-top-links navbar-right">

        <li ng-show=!isUser(user)>
          <a href="" ng-click="doLogin()">Login</a>
        </li>

        <li ng-show="isUser(user)">
          <a href="">Hello, {{user.username}}!</a>
        </li>

        <li ng-show="isUser(user)">
          <a ng-click="doLogout()" href="">Logout</a>
        </li>

        <li class="dropdown">
          <a href="" class="dropdown-toggle" data-toggle="dropdown">
            <span>Themes</span>
            <span class="caret"></span>
          </a>
          <ul class="dropdown-menu">
            <li ng-repeat="(style, enabled) in themes">
              <div style="padding: 3px 15px; cursor: pointer;"
                    ng-click="changeTheme(style, true)">
                <span class="fa" ng-class="{'fa-check': enabled, 'fa-fw': !enabled}"></span>
                <span>{{style}}</span>
              </div>
            </li>
          </ul>
        </li>

        <li>
          <a ui-sref="about" ui-sref-active="active">About</a>
        </li>
      </ul>
      <!-- Navbar Top End -->

      <!-- Sidebar Start -->
      <div class="navbar-default sidebar" role="navigation">
        <div class="sidebar-nav navbar-collapse">
          <ul class="nav" id="side-menu">

            <li>
              <a>
                <i class="fa fa-cogs fa-fw"></i>
                <span>Systems</span>
                <span class="fa arrow"></span>
              </a>

              <ul class="nav nav-second-level">
                <li ng-repeat="(name, arr) in systems | groupBy:'name'" ng-init="collapsed=false">
                  <a ng-if="arr.length == 1" ui-sref="system({name: arr[0].name, version: getVersionForUrl(arr[0])})" ui-sref-active="active">
                    <i class="fa fa-cog"></i>
                    <span>{{arr[0].display_name || arr[0].name}}</span>
                  </a>
                  <a ng-if="arr.length > 1" ng-click="$parent.collapsed = !$parent.collapsed">
                    <i class="fa fa-cog"></i>
                    <span>{{arr[0].display_name || arr[0].name}}</span>
                    <span class="fa" ng-class="{'fa-angle-left': collapsed, 'fa-angle-down': !collapsed}" style="float: right;"></span>
                  </a>
                  <ul ng-if="arr.length > 1" ng-style="{'max-height': (!collapsed) ? (arr.length*40 + 'px') : '0px'}" class="nav nav-third-level show-more">
                    <li ng-repeat="system in arr">
                      <a ui-sref="system({name: system.name, version: getVersionForUrl(system)})" ui-sref-active="active">
                        <span>{{system.version}}</span>
                      </a>
                    </li>
                  </ul>
                </li>
              </ul>

            </li>
            <li ng-show="hasPermission(user, 'bg-command-read')">
              <a ui-sref="commands"
                 ng-class="{active: ($state.current.name.startsWith('command'))}">
                <i class="fa fa-fw fa-send-o"></i>
                <span>Commands</span>
              </a>
            </li>
            <li ng-show="hasPermission(user, 'bg-request-read')">
              <a ui-sref="requests"
                 ng-class="{active: ($state.current.name.startsWith('request'))}">
                <i class="fa fa-fw fa-tasks"></i>
                <span>Requests</span>
              </a>
            </li>
            <li ng-show="hasPermission(user, 'bg-job-read')">
              <a ui-sref="jobs"
                 ng-class="{active: ($state.current.name.startsWith('job'))}">
                <i class="fa fa-fw fa-calendar"></i>
                <span>Scheduler</span>
              </a>
            </li>
            <li>
              <a ui-sref-active="active">
                <i class="fa fa-wrench fa-fw"></i>
                <span>Administration</span>
                <span class="fa arrow"></span>
              </a>
              <ul class="nav nav-second-level" ng-cloak>
                <li>
                  <a ui-sref="system_admin" ui-sref-active="active">
                    <i class="fa fa-power-off"></i>
                    <span>Systems Management</span>
                  </a>
                </li>
                <li ng-show="hasPermission(user, 'bg-queue-read')">
                  <a ui-sref="queues" ui-sref-active="active">
                    <i class="fa fa-database"></i>
                    <span>Queue Management</span>
                  </a>
                </li>
                <li ng-show="hasPermission(user, 'bg-user-read')">
                  <a ui-sref="user_admin" ui-sref-active="active">
                    <i class="fa fa-user"></i>
                    <span>User Management</span>
                  </a>
                </li>
                <li ng-show="hasPermission(user, 'bg-role-read')">
                  <a ui-sref="role_admin" ui-sref-active="active">
                    <i class="fa fa-tag"></i>
                    <span>Role Management</span>
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
      <!-- Sidebar End -->

    </nav>
    <!-- Navbar End -->

    <div id="page-wrapper">
      <div class="row">
        <div ui-view></div>
      </div>
    </div>

    <script src="vendor.js"></script>
    <script src="index.js"></script>

  </body>
</html>
