{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    {% block head %}
        {% block meta %}
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <!-- Meta, title, CSS, favicons, etc. -->
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
        {% endblock meta %}

        <title>设备状态监控系统 | {% block title %}{% endblock %}</title>

        {% block stylesheets %}
            <!-- Bootstrap -->
            <link href="{% static 'vendors/bootstrap/dist/css/bootstrap.min.css' %}" rel="stylesheet">
            <!-- Font Awesome -->
            <link href="{% static 'vendors/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet">
            <!-- NProgress -->
            <link href="{% static 'vendors/nprogress/nprogress.css' %}" rel="stylesheet">
            <!-- bootstrap-daterangepicker -->
            <link href="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.css' %}" rel="stylesheet">
            <!-- iCheck -->
            <link href="{% static 'vendors/iCheck/skins/flat/green.css' %}" rel="stylesheet">
            <!-- bootstrap-progressbar -->
            <link href="{% static 'vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css' %}"
                  rel="stylesheet">
            <!-- JQVMap -->
            <link href="{% static 'vendors/jqvmap/dist/jqvmap.min.css' %}" rel="stylesheet"/>
        {% endblock stylesheets %}
        <!-- Custom Theme Style -->
        <link href="{% static 'css/custom.css' %}" rel="stylesheet">
    {% endblock head %}
</head>

<body class="{% block body_class %}nav-md {% endblock body_class %}">
{% block body %}
    <div class="container body">
        <div class="main_container">

            {% block sidebar %}
                <div class="col-md-3 left_col {% block sidebar_class %} {% endblock sidebar_class %}">
                    {% include 'sidebar.html' %}
                </div>
            {% endblock sidebar %}

            {% block top_navigation %}
                <div class="top_nav">
                    {% include 'top_navigation.html' %}
                </div>
            {% endblock top_navigation %}

            {% block content %}
                <!-- {{ content }} -->
            {% endblock content %}

            {% block footer %}
                <footer>
                    {% include 'footer.html' %}
                </footer>
            {% endblock footer %}
        </div>
    </div>

    {% block javascripts %}
        <!-- jQuery -->
        <script src="{% static 'vendors/jquery/dist/jquery.min.js' %}"></script>
        <!-- Bootstrap -->
        <script src="{% static 'vendors/bootstrap/dist/js/bootstrap.min.js' %}"></script>
        <!-- FastClick -->
        <script src="{% static 'vendors/fastclick/lib/fastclick.js' %}"></script>
        <!-- NProgress -->
        <script src="{% static 'vendors/nprogress/nprogress.js' %}"></script>
        <!-- bootstrap-progressbar -->
        <script src="{% static 'vendors/bootstrap-progressbar/bootstrap-progressbar.min.js' %}"></script>
        <!-- iCheck -->
        <script src="{% static 'vendors/iCheck/icheck.min.js' %}"></script>
        <!-- bootstrap-daterangepicker -->
        <script src="{% static 'vendors/moment/min/moment.min.js' %}"></script>
        <script src="{% static 'vendors/bootstrap-daterangepicker/daterangepicker.js' %}"></script>
        <!-- bootstrap-wysiwyg -->
        <script src="{% static 'vendors/bootstrap-wysiwyg/js/bootstrap-wysiwyg.min.js' %}"></script>
        <script src="{% static 'vendors/jquery.hotkeys/jquery.hotkeys.js' %}"></script>
        <script src="{% static 'vendors/google-code-prettify/src/prettify.js' %}"></script>
        <!-- jQuery Tags Input -->
        <script src="{% static 'vendors/jquery.tagsinput/src/jquery.tagsinput.js' %}"></script>
        <!-- Switchery -->
        <script src="{% static 'vendors/switchery/dist/switchery.min.js' %}"></script>
        <!-- Select2 -->
        <script src="{% static 'vendors/select2/dist/js/select2.full.min.js' %}"></script>
        <!-- Parsley -->
        <script src="{% static 'vendors/parsleyjs/dist/parsley.min.js' %}"></script>
        <!-- Autosize -->
        <script src="{% static 'vendors/autosize/dist/autosize.min.js' %}"></script>
        <!-- jQuery autocomplete -->
        <script src="{% static 'vendors/devbridge-autocomplete/dist/jquery.autocomplete.min.js' %}"></script>
        <!-- starrr -->
        <script src="{% static 'vendors/starrr/dist/starrr.js' %}"></script>
    {% endblock %}
    <!-- Custom Theme Scripts -->
    <script src="{% static 'js/custom.js' %}"></script>
{% endblock body %}
</body>
</html>
