<!doctype html>
<html lang="en">
    <head>
        <title>OctoBot</title>

        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

        <!-- Favicon -->
        <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">

        {% block additional_meta %}
        {% endblock additional_meta %}

        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

        <!-- Fontawesome CSS -->
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

        <!-- toaster -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" crossorigin="anonymous">

        <!-- mdb CSS -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.7/css/mdb.min.css" rel="stylesheet" crossorigin="anonymous">

        <!-- Datatables -->
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" crossorigin="anonymous">

        <!-- Select -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css" crossorigin="anonymous">

        <!-- Editable -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-editable.css') }}">
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" crossorigin="anonymous"/>

        <!-- Own -->
        <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
        <link rel="stylesheet" href="{{ url_for('static', filename='css/layout.css') }}">

        {% block additional_style %}
        {% endblock additional_style %}
    </head>
    <body class="bg-dark" style="{% block body_style %}{% endblock body_style %}">
        <!-- Scripts -->
        <!-- At the beginning of the page : be available for template scripts -->
        <script src="https://code.jquery.com/jquery-3.4.0.min.js" integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.7.7/js/mdb.min.js" crossorigin="anonymous"></script>
        <script src="https://cdn.plot.ly/plotly-1.47.4.min.js" crossorigin="anonymous"></script>

        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js" crossorigin="anonymous"></script>
        <script src="{{ url_for('static', filename='js/lib/bootstrap-editable.min.js') }}"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"  crossorigin="anonymous"></script>

        <script src="{{ url_for('static', filename='js/common/cst.js') }}"></script>
        <script src="{{ url_for('static', filename='js/common/util.js') }}"></script>
        <script src="{{ url_for('static', filename='js/common/bot_connection.js') }}"></script>
        <script src="{{ url_for('static', filename='js/common/dom_updater.js') }}"></script>

        {% set active_page = active_page|default('advanced.home') -%}

        <nav class="navbar navbar-expand-md navbar-dark bg-dark">
            <div class="navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
                <ul class="navbar-nav mr-auto">
                    <li class="nav-item mx-1 px-0 {% if 'advanced.home' == active_page %} active{% endif %}">
                        <a class="nav-link" href="{{ url_for('advanced.home') }}">Home</a>
                    </li>
                    <li class="nav-item mx-1 px-0 {% if 'advanced.strategy_optimizer' == active_page %} active{% endif %}">
                        <a class="nav-link" href="{{ url_for('advanced.strategy_optimizer') }}">Strategy optimizer</a>
                    </li>
                    <li class="nav-item mx-1 px-0 {% if 'advanced.matrix' == active_page %} active{% endif %}">
                        <a class="nav-link" href="{{ url_for('advanced.matrix') }}">Evaluation matrix</a>
                    </li>
                </ul>
            </div>
            <div class="mx-auto order-0">
                <a class="navbar-brand mx-auto" href="#">Advanced OctoBot <i id="navbar-bot-status" class="fa fa-check"  data-toggle="tooltip" data-placement="bottom" title="OctoBot operational"></i></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".dual-collapse2">
                    <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            <div class="navbar-collapse collapse w-100 order-3 dual-collapse2">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item mx-1 px-0 {% if 'advanced.evaluator_config' == active_page %} active{% endif %}">
                        <a class="nav-link" href="{{ url_for('advanced.evaluator_config') }}">Evaluator configuration</a>
                    </li>
                    <li class="nav-item mx-1 px-0">
                        <a class="btn btn-sm btn-outline-default waves-effect" href="{{ url_for('home') }}"><i class="fa fa-home"></i> Back to OctoBot</a>
                    </li>
                    <li class="nav-item mx-1 px-0">
                        <a class="nav-link" href="{{ url_for('commands') }}"><i id="navbar-bot-reboot" class="fa fa-sync"  data-toggle="tooltip" data-placement="top" title="Commands"></i></a>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="container-fluid">
            {% block body %}{% endblock %}
        </div>

        <!-- Artificial padding to separate footer from the rest of the page -->
        <div class="pb-5"></div>
        <div class="pb-5"></div>
        <!-- Artificial padding  -->

        {% include "footer.html" %}

        {% block additional_scripts %}
        {% endblock additional_scripts %}
    </body>
</html>
