<!DOCTYPE html>
<html ng-csp>

  <head>
    <script type="text/javascript">
        var base = window.location.pathname.split('/', 2)[1];
        if (base == "") {
          document.write("<base href='/'/>");
        } else {
          document.write("<base href='" + window.location.pathname + "' />");
        }
    </script>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>hawtio</title>

    <link rel="stylesheet" href="css/datatable.bootstrap.css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" />

    <link rel="stylesheet" href="css/hawtio-base.css">

    <!--
    <link rel="stylesheet" media="screen and (min-width: 980px)" href="css/site-wide.css" type="text/css"/>
    <link rel="stylesheet" media="screen and (max-width: 979px)" href="css/site-narrow.css" type="text/css"/>
    -->
    <link id="theme" rel="stylesheet" href="" type="text/css"/>
    <link id="branding" rel="stylesheet" href="" type="text/css"/>
    <link id="favicon" rel="icon" type="image/ico" href="favicon.ico"/>

    <!-- Distro customisations -->
    <link rel="stylesheet" href="css/vendor.css" type="text/css"/>

    <script type="text/ng-template" id="logClipboardTemplate">
<!--
<style type="text/css">
* {
  font-family: monospace;
}
ul li {
  list-style-type: none;
}
ul li:nth-child(odd) {
  background: #f3f3f3;
}
span.green {
  color: green;
}
div.log-stack-trace p {
  line-height: 14px;
  margin-bottom: 2px;
}
div.log-stack-trace p:nth-child(even) {
  background: white;
}
div.log-stack-trace p:nth-child(odd) {
  background: #f3f3f3;
}
</style>
-->
    </script>
  </head>

  <body>
    <div id="log-panel" style="bottom: 110%" ng-controller="Core.ConsoleController">
      <div>
        <ul id="log-panel-statements"></ul>
        <div id="close" log-toggler>
          <i class="icon-chevron-up"></i>
        </div>
        <div id="copy">
          <i class="span2 icon-copy" title="Click to copy log to clipboard"
             zero-clipboard
             use-callback="setHandler(clip)"></i>
          <i class="span3 icon-trash" title="Click to clear log"
             zero-clipboard
             use-callback="setHandler(clip)"></i>
        </div>
      </div>
    </div>

    <div id="main-body" ng-controller="Core.AppController" style="display: none;">
      <!--  navbar-inverse -->
      <div id="main-nav" class="navbar navbar-fixed-top" ng-show="!fullScreen()" ng-controller="Core.NavBarController">

        <div class="navbar-inner main-nav-upper">

          <div class="container">
            <div class="pull-left">
              <a ng-href="#"
                 title="Go to home"
                 class="brand"
                 data-placement="bottom"
                 ng-include="'app/core/html/branding.html'">
              </a>
            </div>

            <div class="pull-right">
              <ul class="nav nav-tabs pull-right">
                <!-- dynamic links, hook for plugins-->
                <li ng-show="loggedIn() && isCustomLinkSet() > 0 " class="dropdown">
                  <a ng-href="#"
                     title="{{navBarViewCustomLinks.dropDownLabel}}"
                     data-placement="bottom"
                     class="dropdown-toggle"
                     data-toggle="dropdown">
                    <i class="icon-user fixme"></i>&nbsp;&nbsp;<span>{{navBarViewCustomLinks.dropDownLabel}}</span>&nbsp;<span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu right">
                    <li ng-repeat="entry in navBarViewCustomLinks.list">
                      <a ng-href="{{entry.href}}"
                         ng-click="entry.action()"
                         title="{{entry.title}}">
                        <i class="{{entry.icon}}"></i>&nbsp;&nbsp;{{entry.title}}
                      </a>
                    </li>
                  </ul>
                </li>

                <li ng-show="loggedIn()">
                  <a ng-href=""
                     title="Show the logging console"
                     data-placement="bottom"
                     log-toggler>
                    <i class="icon-desktop"></i>
                  </a>
                </li>
                <li ng-show="loggedIn()" ng-class="{active : isActive('#/help')}">
                  <a ng-href="{{link('#/help', true)}}"
                     title="Read the help about how to use this console"
                     data-placement="bottom">
                    <i class="icon-question-sign"></i>
                  </a>
                </li>

                <li ng-show="loggedIn() && hasMBeans()" class="dropdown">
                  <a ng-href="#"
                     title="Preferences {{showLogout() ? 'and log out' : ''}}"
                     data-placement="bottom"
                     class="dropdown-toggle"
                     data-toggle="dropdown">
                    <i class="icon-user fixme"></i>&nbsp;&nbsp;<span>{{getUsername()}}</span>&nbsp;<span class="caret"></span>
                  </a>
                  <ul class="dropdown-menu right">
                    <li class="item">
                      <a href="" ng-click="showPreferences()" 
                         title="Edit your preferences" 
                         data-placement="bottom">
                        <i class="icon-cogs fixme"></i> Preferences
                      </a>
                    </li>

                    <li class="item" ng-show="showLogout()">
                      <a href="" title="Log out" data-placement="bottom" ng-click="logout()">
                        <i class="icon-signout fixme"></i> Log out
                      </a>
                    </li>

                    <li class="item">
                      <a ng-href="{{link('#/about', true)}}" title="About" data-placement="bottom">
                        <i class="icon-info"></i> About {{branding.name}}
                      </a>
                    </li>

                    <li ng-show="keycloakEnabled">
                      <a href="" title="Manage my account" data-placement="bottom" ng-click="redirectToKeycloakAccountMgmt()">
                        <i class="fixme"></i> Manage my account
                      </a>
                    </li>

                    <li ng-show="keycloakEnabled">
                      <a href="" title="Keycloak admin console" data-placement="bottom" ng-click="redirectToKeycloakAdminConsole()">
                        <i class="fixme"></i> Keycloak admin console
                      </a>
                    </li>

                  </ul>
                </li>

                <li ng-hide="loggedIn()" ng-class="{active : isActive('#/login')}">
                  <a ng-href="{{link('#/login', true)}}" title="Log in" data-placement="bottom">
                    <i class="icon-user"></i>
                  </a>
                </li>
              </ul>
            </div>

          </div>

        </div>

        <div class="navbar-inner main-nav-lower" ng-show="!login()">
          <div class="container">
            <ul ng-show="loggedIn()" class="nav" hawtio-auto-dropdown>
              <li ng-show="loggedIn() && (perspectives.length > 1 || recentConnections.length)"
                  class="dropdown perspective-selector">
                <a href="#" class="dropdown-toggle">
                  <hawtio-icon config="perspectiveDetails.perspective.icon"></hawtio-icon>
                  <span ng-bind="perspectiveDetails.perspective.label || 'Perspective'"></span>
                  <span ng-show="perspectives.length > 1" class="caret"></span>
                </a>
                <div class="dropdown-menu">
                  <div ng-show="perspectives.length > 1">
                    <p>Perspectives</p>
                    <ul class="unstyled">
                      <li ng-repeat="perspective in perspectives track by $index">
                        <a href=""
                           ng-click="switchPerspective(perspective)"
                           ng-hide="perspectiveDetails.perspective.id === perspective.id"
                           data-placement="bottom">
                          <hawtio-icon config="perspective.icon"></hawtio-icon>
                          {{perspective.label}}</a>
                      </li>
                    </ul>
                  </div>
                  <div ng-show="recentConnections.length">
                    <p>Recent Connections</p>
                    <ul class="unstyled">
                      <li>
                        <a href=""
                           ng-click="goHome()">Console</a>
                     </li>
                      <li ng-repeat="connection in recentConnections track by $index">
                        <a href=""
                           ng-click="openConnection(connection)">{{connection}}</a>
                      </li>
                      <li class="clear-recent">
                        <a href=""
                           ng-click="clearConnections()">Clear Recent</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </li>

              <li ng-repeat="nav in topLevelTabs track by $index"
                  ng-class="{active : isActive(nav)}"
                  ng-show="isValid(nav)">
                <a ng-href="{{link(nav)}}" title="{{nav.title}}" data-placement="bottom" ng-bind="nav.content">
                </a>
              </li>
              <li class="dropdown overflow" style="float: right !important; visibility: hidden;">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-chevron-down"></i></a>
                <ul class="dropdown-menu right"></ul>
              </li>
            </ul>

          </div>
        </div>
      </div>

      <div class="pref-slideout" hawtio-slideout="showPrefs" title="{{branding.appName}} Preferences">
        <div class="dialog-body">
          <div ng-include="'app/core/html/preferences.html'">
          </div>
        </div>
      </div>

      <div id="main" class="container-fluid ng-cloak" ng-controller="Core.ViewController">
        <div ng-include src="viewPartial"></div>
      </div>

      <div class="ng-cloak">
        <div modal="confirmLogout">

          <form class="form-horizontal no-bottom-margin" ng-submit="doLogout()">
            <div class="modal-header">Log out</div>
            <div class="modal-body">
              <p>Are you sure you want to log out?</p>
            </div>
            <div class="modal-footer">
              <input class="btn btn-success" type="submit" value="Yes">
              <input class="btn btn-primary" ng-click="confirmLogout = false" value="No">
            </div>
          </form>

        </div>
      </div>

      <div class="ng-cloak">
        <div modal="connectionFailed">
          <form class="form-horizontal no-bottom-margin" ng-submit="confirmConnectionFailed()">
            <div class="modal-header">
              <h2 title="Status Code: {{connectFailure.status}}">Cannot Connect: {{connectFailure.statusText}}</h2>
            </div>

            <div class="modal-body">
              <p>Cannot connect to Jolokia to access this Java process</p>

              <div class="expandable closed">
                <div title="Headers" class="title">
                  <i class="expandable-indicator"></i> Error Details
                </div>
                <div class="expandable-body well">
                  <div class="ajaxError" ng-bind-html-unsafe="connectFailure.summaryMessage"></div>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <input class="btn btn-success" type="submit" value="Close This Window">
            </div>
          </form>

        </div>
      </div>
    </div>

    <!--[if lt IE 9]>
    <script type="text/javascript" src="lib/html5shiv.js"></script>
    <![endif]-->

    <script src="app/app.js"></script>

    <!-- Distro customisations -->
    <script type="text/javascript" src="vendor.js"></script>
  </body>

</html>
