<!doctype html>
<html lang="en">
<head>
    {% block head %}
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="generator" content="Bypass Censorship Portal">

        {% block styles %}
            <!-- Bootstrap CSS -->
            {{ bootstrap.load_css() }}
        {% endblock %}

        <title>Bypass Censorship Portal</title>

        <style>
            .bd-placeholder-img {
                font-size: 1.125rem;
                text-anchor: middle;
                -webkit-user-select: none;
                -moz-user-select: none;
                user-select: none;
            }

            @media (min-width: 768px) {
                .bd-placeholder-img-lg {
                    font-size: 3.5rem;
                }
            }
        </style>

        <!-- Custom styles for this template -->
        <link href="/portal/static/portal.css" rel="stylesheet">
    {% endblock %}
</head>
<body>

<header class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0 shadow">
    <a class="navbar-brand col-md-3 col-lg-2 me-0 px-3" href="#">Bypass Censorship</a>
    <button class="navbar-toggler position-absolute d-md-none collapsed" type="button" data-bs-toggle="collapse"
            data-bs-target="#sidebarMenu" aria-controls="sidebarMenu" aria-expanded="false"
            aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
    <form class="w-100" action="{{ url_for("portal.search") }}">
        <input class="form-control form-control-dark w-100" type="text" name="query" placeholder="Search"
               aria-label="Search">
    </form>
    <div class="navbar-nav">
        <div class="nav-item text-nowrap">
            <a class="nav-link px-3" href="#">{{ request.headers.get('X-User-Name', 'Default User') }}</a>
        </div>
    </div>
</header>

<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link{% if section == "home" %} active{% endif %}"
                           href="{{ url_for("portal.portal_home") }}">
                            Home
                        </a>
                    </li>
                </ul>
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Configuration</span>
                </h6>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link{% if section == "group" %} active{% endif %}"
                           href="{{ url_for("portal.view_groups") }}">
                            Groups
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if section == "origin" %} active{% endif %}"
                           href="{{ url_for("portal.view_origins") }}">
                            Origins
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if section == "list" %} active{% endif %}"
                           href="{{ url_for("portal.view_mirror_lists") }}">
                            Mirror Lists
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if section == "bridgeconf" %} active{% endif %}"
                           href="{{ url_for("portal.view_bridgeconfs") }}">
                            Tor Bridges
                        </a>
                    </li>
                </ul>
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Infrastructure</span>
                </h6>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="disabled nav-link{% if section == "eotk" %} active{% endif %}"
                           href="#">
                            EOTK Instances
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if section == "proxy" %} active{% endif %}"
                           href="{{ url_for("portal.view_proxies") }}">
                            Proxies
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link{% if section == "bridge" %} active{% endif %}"
                           href="{{ url_for("portal.view_bridges") }}">
                            Tor Bridges
                        </a>
                    </li>
                </ul>
                <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
                    <span>Monitoring</span>
                </h6>
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link{% if section == "alarm" %} active{% endif %}"
                           href="{{ url_for("portal.view_alarms") }}">
                            Alarms
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">

            {% with messages = get_flashed_messages(with_categories=true) %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} mt-2">
                        {{ message }}
                    </div>
                {% endfor %}
            {% endwith %}

            {% block content %}

            {% endblock %}
        </main>
    </div>
</div>


{% block scripts %}
    <!-- Optional JavaScript -->
    {{ bootstrap.load_js() }}
{% endblock %}

<script src="https://cdn.jsdelivr.net/npm/feather-icons@4.28.0/dist/feather.min.js"
        integrity="sha384-uO3SXW5IuS1ZpFPKugNNWqTZRRglnUJK6UAZ/gxOX80nxEkN9NcGZTftn6RzhGWE"
        crossorigin="anonymous"></script>
</body>
</html>
