<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <title>
        Meshview - {{ site_config.get("site", {}).get("title", "") }}
        {% if node and node.short_name %}-- {{ node.short_name }}{% endif %}
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Scripts -->
    <script src="https://unpkg.com/htmx.org@1.9.11" integrity="sha384-0gxUXCCR8yv9FM2b+U3FDbsKthCI66oH5IA9fHppQq9DDMHuMauqq1ZHBpJxQ0J0" crossorigin="anonymous"></script>
    <script src="https://unpkg.com/htmx.org@1.9.11/dist/ext/sse.js" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

    <!-- Stylesheets -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

    {% block head %}{% endblock %}

    <style>
        .htmx-indicator {
            opacity: 0;
            transition: opacity 500ms ease-in;
        }
        .htmx-request .htmx-indicator {
            opacity: 1;
        }
        #search_form {
            z-index: 4000;
        }
        #details_map {
            width: 100%;
            height: 500px;
        }
        {% block css %}{% endblock %}
    </style>
</head>
<body>
    {% set site = site_config.get("site", {}) %}

    <br>
    <div style="text-align:center">
        <strong>{{ site.get("title", "") }} {{ site.get("domain", "") }}</strong>
    </div>
    <div style="text-align: center;">
        {{ site.get("message", "") }}
    </div>

    <div style="text-align:center">
        {% if site.get("nodes") == "True" %}<a href="/nodelist">Nodes</a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("conversations") == "True" %}<a href="/chat">Conversations</a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("everything") == "True" %}<a href="/firehose">See <strong>everything</strong></a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("graphs") == "True" %}<a href="/nodegraph">Mesh Graphs</a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("net") == "True" %}<a href="/net">Weekly Net</a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("map") == "True" %}<a href="/map">Map</a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("stats") == "True" %}<a href="/stats">Stats</a>&nbsp;-&nbsp;{% endif %}
        {% if site.get("top") == "True" %}<a href="/top">Top Traffic</a>{% endif %}
    </div>

    {% include "search_form.html" %}

    {% block body %}{% endblock %}

    <br>
    <div style="text-align:center">
        Visit <strong><a href="https://github.com/pablorevilla-meshtastic/meshview">Meshview</a></strong> on Github.
        <small>ver. {{ SOFTWARE_RELEASE | default("unknown") }}</small>
    </div>
    <br>
</body>
</html>
