<!DOCTYPE html>
<html lang="en">
    <head>
        <script>const PERMISSIONS = {{request.user.get_json_permissions() | safe}};</script>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>{{ title }}</title>
        <!--bootstrap-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
              rel="stylesheet"
              integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
              crossorigin="anonymous" />
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
                integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
                crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
                integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
                crossorigin="anonymous"></script>
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
        <!--data tables-->
        <link href="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.1/b-3.0.0/r-3.0.0/sl-2.0.0/datatables.min.css"
              rel="stylesheet" />
        <script src="https://cdn.datatables.net/v/bs5/jq-3.7.0/dt-2.0.1/b-3.0.0/r-3.0.0/sl-2.0.0/datatables.min.js"></script>
        <!--favicon-->
        <link rel="icon" href="{{ url_for('static', path='favicon.svg') }}" />
        <!-- SweetAlert2 CSS -->
        <link href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bootstrap-4/bootstrap-4.css"
              rel="stylesheet" />
        <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"
              rel="stylesheet" />
        <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.all.min.js"></script>
        <!-- Bootstrap select (searchable select) -->
        <link rel="stylesheet"
              href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/css/bootstrap-select.min.css">
        <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.14.0-beta3/dist/js/bootstrap-select.min.js"></script>
        <!--data tables alignment fix-->
        <style>
            th.dt-type-numeric {
                text-align: left !important;
            }
            td.dt-type-numeric {
                text-align: left !important;
            }
            .active {
                color: var(--bs-nav-pills-link-active-color);
                background-color: transparent;
            }
        </style>
        <!--select search fix-->
        <style>
            .no-results {
                background-color: var(--bs-body-bg)!important;
            }
            .bs-searchbox input {
                border: var(--bs-border-width) solid var(--bs-border-color)!important;
            }
            .was-validated .bs-searchbox input {
                background-image: none!important;
                box-shadow: none!important;
            }
        </style>
        <script>
            const TABLE_UPDATE_TIME = 3000;
            DataTable.ext.errMode = function ( e, settings, helpPage, message ) {
                if (e.jqXHR.status == 401) {
                    window.location.reload();
                } else if (e.jqXHR.status >= 200 && e.jqXHR.status < 300) {
                    console.error("AJAX query error when reloading datatable");
                }
                console.error("Unknown error when reloading datatable");
            };

        </script>
        <script src="{{ url_for('static', path='js/util.js') }}"></script>
    </head>
    <body data-bs-theme="dark">
        <nav class="navbar navbar-expand-lg bg-body-tertiary">
            <div class="container-fluid">
                <a class="navbar-brand" href="{{ request.url_for('devices_ui') }}">
                    <img src="{{ request.url_for('static', path='svg/goosebit-logo.svg') }}"
                         class="me-2"
                         height="30px"
                         width="30px"
                         alt="gooseBit logo" />
                    gooseBit
                </a>
                <button class="navbar-toggler"
                        type="button"
                        data-bs-toggle="collapse"
                        data-bs-target="#navbar"
                        aria-controls="navbar"
                        aria-expanded="false"
                        aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbar">
                    <div class="navbar-nav">
                        {% for nav_item in request.nav %}
                            {% if compare_permissions(nav_item.permissions, request.user.permissions) %}
                                <a class="nav-link{% if request.url == request.url_for(nav_item.function) %} active{% endif %}"
                                   href="{{ request.url_for(nav_item.function) }}">{{ nav_item.text }}</a>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <div class="navbar-nav d-flex flex-fill justify-content-end">
                        <a class="nav-link" href="{{ request.url_for('logout') }}">Logout<i class="bi bi-box-arrow-right ps-2"></i></a>
                    </div>
                </div>
            </div>
        </nav>
        {% block content %}
        {% endblock content %}
    </body>
</html>
