{% extends 'blank.html' %}


{% block body %}
<div id="wrapper">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="margin-bottom: 0">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".sidebar-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="#">pyspectator</a>
        </div>
        <!-- /.navbar-header -->

        <ul class="nav navbar-top-links navbar-right">
            <li class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-user fa-fw"></i>  <i class="fa fa-caret-down"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="/user/profile/username"><i class="fa fa-user fa-fw"></i> User Profile</a>
                    </li>
                    <li class="divider"></li>
                    <li><a href="/auth/login"><i class="fa fa-sign-out fa-fw"></i> Logout</a>
                    </li>
                </ul>
                <!-- /.dropdown-user -->
            </li>
            <!-- /.dropdown -->
        </ul>
        <!-- /.navbar-top-links -->

        <div class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav" id="side-menu">
                    <li>
                        <a href="/monitor/general"><i class="fa fa-desktop fa-fw"></i> General</a>
                    </li>
                    <li>
                        <a href="/monitor/cpu"><i class="fa fa-tachometer fa-fw"></i> CPU</a>
                    </li>
                    <li>
                        <a href="/monitor/memory"><i class="fa fa-bar-chart-o fa-fw"></i> Memory</a>
                    </li>
                    <li>
                        <a href="/monitor/disk"><i class="fa fa-inbox fa-fw"></i> Disk</a>
                    </li>
                    <li>
                        <a href="/monitor/network"><i class="fa fa-sitemap fa-fw"></i> Network</a>
                    </li>
                    <li>
                        <a href="/about"><i class="fa fa-info-circle fa-fw"></i> About</a>
                    </li>
                </ul>
                <!-- /#side-menu -->
            </div>
            <!-- /.sidebar-collapse -->
        </div>
        <!-- /.navbar-static-side -->
    </nav>

    <div id="page-wrapper">
        <div class="row">
            <div class="col-sm-12 col-md-12 col-lg-12">
                <h1 class="page-header">
                    {% block title %}{% end %}
                </h1>
                {% block content %}{% end %}
            </div>
        </div>
        <!-- /.row -->
    </div>
    <!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->
{% end %}


{% block top_js %}
<script src="{{ static_url('js/plugins/metisMenu/jquery.metisMenu.js') }}"></script>
{% end %}