<!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">
            {% block styles %}
                {{ bootstrap.load_css() }}
                <link rel="stylesheet"
                      href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/7.1.96/css/materialdesignicons.css"
                      integrity="sha512-lD1LHcZ8tFHvMFNeo6qOLY/HjzSPCasPJOAoir22byDxlZI1R71S5lZel8zRL2TZ+Dut1wOHfYgSU2lHXuL00w=="
                      crossorigin="anonymous"
                      referrerpolicy="no-referrer" />
                <link rel="stylesheet"
                      href="{{ url_for('static', filename='css/main.css') }}">
            {% endblock %}
            <title>Benchmark</title>
        {% endblock %}
    </head>
    <body>
        <div class="container-fluid">{% include "_header.html" %}</div>
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="col-md-4">
                    {% for category, message in messages %}
                        {% if category == 'message' %}
                            {% set category = "info" %}
                        {% endif %}
                        <div class="alert alert-{{ category }} alert-dismissible fade show"
                             role="alert">{{ message }}</div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        <div class="container-fluid">
            {% block content %}{% endblock %}
        </div>
        {% include "status.html" %}
    </body>
    {% block jscript %}
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        {{ bootstrap.load_js() }}
    {% endblock %}
</html>
