<!DOCTYPE html>
<html lang="en">
    <head>
        {% block head %}
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>{% block title %}{% endblock %}</title>
        <!-- Dark mode -->
        <link rel="stylesheet" href="_static/dark-mode.css">
        <!-- Font Awesome -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
        <!-- Google Fonts Roboto -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
        <!-- Bootstrap core CSS -->
        <link rel="stylesheet" href="_static/MDB-Free_4.13.0/css/bootstrap.min.css">
        <!-- Material Design Bootstrap - TOGGLE THIS FOR ALTERNATE DESIGN!-->
        <link rel="stylesheet" href="_static/MDB-Free_4.13.0/css/mdb.min.css">
        <!-- Your custom styles (optional) -->
        <link rel="stylesheet" href="_static/dashboard.css">
        <link rel="stylesheet" href="_static/chats.css">
        <!-- MDBootstrap Datatables  -->
        <link rel="stylesheet" href="_static/MDB-Free_4.13.0/css/addons/datatables.min.css" rel="stylesheet">

        <!-- Icons -->
        <!--script src="https://unpkg.com/feather-icons/dist/feather.min.js"></script-->
        <script src="_static/feather.min.js"></script>
        {% endblock %}
    </head>
    <body>
    <!-- Start your project here-->
    <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
        <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="index.html">{{ g.project }} {{ g.version }}</a>
        <div class="custom-control custom-switch">
            <input type="checkbox" class="custom-control-input" id="darkSwitch" />
            <label class="custom-control-label mr-2" for="darkSwitch" style="color:white">Dark Switch</label>
        </div>
        <script src="_static/dark-mode-switch.js"></script>
    </nav>
    <div class="container-fluid">
        <div class="row">
                {% block navigation %}{% endblock %}
            <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
                {% block report_data %}{% endblock %}
            </main>
        </div>
    </div>
    <!-- End your project here-->
    <script type="text/javascript" src="_static/MDB-Free_4.13.0/js/jquery.min.js"></script>
    <!-- Bootstrap tooltips -->
    <script type="text/javascript" src="_static/MDB-Free_4.13.0/js/popper.min.js"></script>
    <!-- Bootstrap core JavaScript -->
    <script type="text/javascript" src="_static/MDB-Free_4.13.0/js/bootstrap.js"></script>
    <!-- MDB core JavaScript -->
    <script type="text/javascript" src="_static/MDB-Free_4.13.0/js/mdb.min.js"></script>
    <!-- Your custom scripts -->
    <!-- MDBootstrap Datatables  -->
    <script type="text/javascript" src="_static/MDB-Free_4.13.0/js/addons/datatables.min.js"></script>
    {% block script_block_end %}{% endblock %}
    <script>
        feather.replace()
    </script>
    </body>
</html>