<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title data-template="config:app-title">App Title</title>
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
        <meta data-template="config:app-meta"/>
        <link rel="shortcut icon" href="$shared/resources/images/exist_icon_16x16.ico"/>
        <link rel="stylesheet" type="text/css" href="$shared/resources/css/bootstrap-3.0.3.min.css"/>
        <link href="resources/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
        <link href="resources/css/ionicons.min.css" rel="stylesheet" type="text/css"/>
        <link href="resources/css/ion.rangeSlider.css" rel="stylesheet" type="text/css"/>
        <link href="resources/css/ion.rangeSlider.skinFlat.css" rel="stylesheet" type="text/css"/>
        <link href="resources/css/AdminLTE.css" rel="stylesheet" type="text/css"/>
        <link href="resources/css/skin-black.min.css" rel="stylesheet" type="text/css"/>
        <link rel="stylesheet" type="text/css" href="resources/css/style.css"/>
        <script type="text/javascript" data-template="app:instances-data"/>
        <script type="text/javascript" src="resources/scripts/jquery-1.9.1.min.js"/>
        <script type="text/javascript" src="resources/scripts/fastclick.min.js"/>
        <script type="text/javascript" src="resources/scripts/app.js"/>
        <script type="text/javascript" src="resources/scripts/d3.v3.min.js"/>
        <script type="text/javascript" src="$shared/resources/scripts/bootstrap-3.0.3.min.js"/>
        <script type="text/javascript" src="$shared/resources/scripts/loadsource.js"/>
    </head>
    <body id="body" class="skin-black">
        <div class="wrapper">
            <header class="main-header">
                <a href="index.html" class="logo">
                    <!-- Add the class icon to your logo image or logo icon to add the margining -->
                    <img src="$shared/resources/images/existdb.png" height="40"/>
                </a>
                <!-- Header Navbar: style can be found in header.less -->
                <nav class="navbar navbar-static-top" role="navigation">
                    <!-- Sidebar toggle button-->
                    <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                        <span class="sr-only">Toggle navigation</span>
                    </a>
                    <div class="navbar-custom-menu">
                        <ul class="nav navbar-nav">
                            <li id="notifications" class="dropdown notifications-menu" data-bind="visible: $data.instances().length &gt; 0">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="fa" data-bind="css: { 'fa-warning': $data.warnings() &gt; 0, 'fa-check': $data.warnings() == 0}"/>
                                    <span data-bind="text: warnings" class="label label-warning"/>
                                </a>
                                <ul class="dropdown-menu">
                                    <li>
                                        <ul class="menu" data-bind="foreach: instances">
                                            <li>
                                                <a href="remotes.html">
                                                    <i data-bind="attr: {class: $data.icon() }"/>
                                                    <span data-bind="text: name"/>
                                                </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <!-- User Account: style can be found in dropdown.less -->
                            <li class="dropdown user user-menu">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                    <i class="glyphicon glyphicon-user"/>
                                    <span>
                                        <span data-template="app:current-user">Jane Doe</span>
                                        <i class="caret"/>
                                    </span>
                                </a>
                                <ul class="dropdown-menu">
                                    <!-- User image -->
                                    <li class="user-header bg-light-blue">
                                        <img src="resources/img/avatar3.png" class="img-circle" alt="User Image"/>
                                        <p data-template="app:user-info"> Jane Doe - Web Developer
                                                <small>Member since Nov. 2012</small>
                                        </p>
                                    </li>
                                    <!-- Menu Footer-->
                                    <li class="user-footer">
                                        <div class="pull-right">
                                            <a href="?logout=true" class="btn btn-default btn-flat">Sign out</a>
                                        </div>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </nav>
            </header>
            <!-- Left side column. contains the logo and sidebar -->
            <aside class="main-sidebar">
                <!-- sidebar: style can be found in sidebar.less -->
                <section class="sidebar">
                    <!-- sidebar menu: style can be found in sidebar.less -->
                    <ul class="sidebar-menu" data-template="app:active-panel">
                        <li>
                            <a href="index.html">
                                <i class="fa fa-dashboard"/>
                                <span>Monitoring (local)</span>
                            </a>
                        </li>
                        <li>
                            <a href="profiling.html">
                                <i class="fa fa-clock-o"/>
                                <span>Profiling</span>
                            </a>
                        </li>
                        <li>
                            <a href="indexes.html">
                                <i class="fa fa-sort-alpha-desc"/>
                                <span>Indexes</span>
                            </a>
                        </li>
                        <li>
                            <a href="console.html">
                                <i class="fa fa-terminal"/>
                                <span>Remote Console</span>
                            </a>
                        </li>
                        <li>
                            <a href="visualizer.html">
                                <i class="fa fa-desktop"/>
                                <span>Data Visualizer</span>
                            </a>
                        </li>
                        <li class="treeview">
                            <a href="remotes.html">
                                <i class="fa fa-cloud"/>
                                <span>Remote Monitoring</span>
                            </a>
                            <ul class="treeview-menu">
                                <li data-template="app:instances"/>
                            </ul>
                        </li>
                    </ul>
                    <div class="powered-by">
                        <img src="resources/img/powered-by-whiteglass.svg"/>
                    </div>
                </section>
                <!-- /.sidebar -->
            </aside>
            <!-- Right side column. Contains the navbar and content of the page -->
            <div class="content-wrapper" id="content"/>
        </div>
    </body>
</html>