<!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='/" + base + "/' />");
        }
    </script>

    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>hawtio</title>
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/bootstrap/docs/assets/css/bootstrap.css" />
    <link rel="stylesheet" href="bower_components/Font-Awesome/css/font-awesome.css" />
    <!-- endbower -->

    <!-- build:css css/hawtio-base.css -->
    <link rel="stylesheet" href="css/bootstrap-responsive.css" type="text/css"/>
    <link rel="stylesheet" href="css/ui.dynatree.css" type="text/css"/>
    <link rel="stylesheet" href="css/dynatree-icons.css" type="text/css"/>
    <link rel="stylesheet" href="css/datatable.bootstrap.css" type="text/css"/>
    <link rel="stylesheet" href="css/ColReorder.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/codemirror.css" type="text/css"/>
    <link rel="stylesheet" href="css/angular-ui.css" type="text/css"/>
    <link rel="stylesheet" href="css/ng-grid.css" type="text/css"/>
    <link rel="stylesheet" href="css/jquery.gridster.css" type="text/css"/>
    <link rel="stylesheet" href="css/twilight.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/ambiance.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/blackboard.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/cobalt.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/eclipse.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/monokai.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/neat.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/twilight.css" type="text/css"/>
    <link rel="stylesheet" href="css/codemirror/themes/vibrant-ink.css" type="text/css"/>
    <link rel="stylesheet" href="css/toastr.css" type="text/css"/>
    <link rel="stylesheet" href="css/dangle.css" type="text/css"/>
    <link rel="stylesheet" href="css/toggle-switch.css" type="text/css"/>
    <link rel="stylesheet" href="css/metrics-watcher-style.css" type="text/css"/>
    <link rel="stylesheet" href="css/site-base.css" type="text/css"/>
    <!-- endbuild -->

    <!--
    <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>
                      <a href="" ng-click="showPreferences()" 
                         title="Edit your preferences" 
                         data-placement="bottom">
                        <i class="icon-cogs fixme"></i> Preferences
                      </a>
                    </li>

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

    <!-- build:js app/app.js -->

    <!-- bower:js -->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/js-logger/src/logger.js"></script>
    <script src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
    <script src="bower_components/d3/d3.min.js"></script>
    <script src="bower_components/elastic.js/dist/elastic.min.js"></script>
    <script src="bower_components/underscore/underscore.js"></script>
    <!-- endbower -->

    <!--
    TODO add patch for dashboard until angular supports nested custom injections
    -->
    <script type="text/javascript" src="lib/angular.js"></script>
    <script type="text/javascript" src="lib/angular-bootstrap.min.js"></script>
    <script type="text/javascript" src="lib/angular-resource.min.js"></script>
    <!-- enable if sanitize becomes needed
    <script type="text/javascript" src="lib/angular-sanitize.min.js"></script-->

    <!--
      Configure logging first thing...
    -->
    <script type="text/javascript" src="lib/loggingInit.js"></script>

    <script src="lib/elastic-angular-client.min.js"></script>

    <!-- Now load and set up the plugin loader -->
    <script type="text/javascript" src="lib/hawtio-plugin-loader.js"></script>

    <!-- charts and jolokia for jmx -->
    <script type="text/javascript" src="lib/jolokia-min.js"></script>
    <script type="text/javascript" src="lib/cubism.v1.min.js"></script>
    <script type="text/javascript" src="lib/jolokia-cubism-min.js"></script>
    <script type="text/javascript" src="lib/jolokia-simple-min.js"></script>

    <!-- ng-grid -->
    <script type="text/javascript" src="lib/ng-grid.min.js"></script>

    <!-- dyna tree -->
    <script type="text/javascript" src="lib/jquery-ui.custom.min.js"></script>
    <script type="text/javascript" src="lib/jquery.cookie.js"></script>
    <script type="text/javascript" src="lib/jquery.dynatree.min.js"></script>

    <!-- dashboard -->
    <script type="text/javascript" src="lib/jquery.gridster.min.js "></script>

    <!-- data tables -->
    <script type="text/javascript" src="lib/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="lib/jquery.datatable-bootstrap.js"></script>
    <script type="text/javascript" src="lib/ColReorder.min.js"></script>
    <script type="text/javascript" src="lib/KeyTable.js"></script>

    <!-- XML 2 json -->
    <script type="text/javascript" src="lib/jquery.xml2json.js"></script>

    <!-- jquery form -->
    <script type="text/javascript" src="lib/jquery.form.min.js"></script>

    <!-- backstretch -->
    <script type="text/javascript" src="lib/jquery.backstretch.min.js"></script>

    <!-- toastr notifications -->
    <script type="text/javascript" src="lib/toastr.js"></script>

    <!-- buildGraph layout -->
    <script type="text/javascript" src="lib/dagre.min.js"></script>

    <!-- draggy droppy diagrams -->
    <script type="text/javascript" src="lib/jquery.jsPlumb-1.6.4-min.js"></script>

    <!-- Dangle -->
    <script type="text/javascript" src="lib/dangle.min.js"></script>

    <!-- Gantt -->
    <script type="text/javascript" src="lib/gantt-chart-d3.js"></script>

    <!-- source format -->
    <script type="text/javascript" src="lib/codemirror/codemirror.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/edit/closetag.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/edit/continuecomment.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/edit/continuelist.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/edit/matchbrackets.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/fold/foldcode.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/fold/brace-fold.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/fold/xml-fold.js"></script>
    <script type="text/javascript" src="lib/codemirror/addon/format/formatting.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/javascript/javascript.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/xml/xml.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/css/css.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/htmlmixed/htmlmixed.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/markdown/markdown.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/diff/diff.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/properties/properties.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/clike/clike.js"></script>
    <script type="text/javascript" src="lib/codemirror/mode/yaml/yaml.js"></script>

    <!-- AngularUI -->
    <script type="text/javascript" src="lib/angular-ui.js"></script>
    <script type="text/javascript" src="lib/ui-bootstrap-0.4.0.min.js"></script>
    <script type="text/javascript" src="lib/ui-bootstrap-tpls-0.4.0.min.js"></script>

    <!-- helper libraries -->
    <script type="text/javascript" src="lib/sugar-1.4.1-custom.min.js"></script>
    <script type="text/javascript" src="lib/URI.js"></script>

    <!-- camel model definition -->
    <script type="text/javascript" src="lib/camelModel.js"></script>

    <!-- json schema definition -->
    <script type="text/javascript" src="lib/jsonschema.js"></script>

    <!-- Dozer schemas, generated during build -->
    <script type="text/javascript" src="lib/dozerMapping.js"></script>
    <script type="text/javascript" src="lib/dozerField.js"></script>
    <script type="text/javascript" src="lib/dozerMappings.js"></script>
    <script type="text/javascript" src="lib/dozerFieldExclude.js"></script>

    <!-- markdown renderer -->
    <script type="text/javascript" src="lib/marked.js"></script>

    <!-- JBoss DMR -->
    <script type="text/javascript" src="lib/dmr.js.nocache.js"></script>

    <!-- zeroclipboard -->
    <script type="text/javascript" src="lib/ZeroClipboard.min.js"></script>
    <script type="text/javascript" src="lib/angular-file-upload.min.js"></script>

    <!-- Codehale metrics ui -->
    <script type="text/javascript" src="lib/metrics-watcher.js"></script>

    <!-- And finally the main app -->
    <script type="text/javascript" src="app/app.js"></script>
    <!-- endbuild -->

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

</html>
