<!doctype html>
<html lang="en" data-bs-theme="dark">
<head>
    <title>Meshview</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" 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" crossorigin="anonymous"></script>

    <!-- Stylesheets -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>

    {% block head %}{% endblock %}

    <style>
        body {
            opacity: 0;
            transition: opacity 0.3s ease-in-out;
        }
        body.ready {
            opacity: 1;
        }
        .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>
    <br>
    <div style="text-align:center" id="site-header"></div>
    <div style="text-align:center" id="site-message"></div>
    <div style="text-align:center" id="site-menu"></div>

    <!-- Search Form -->
    <form class="container p-2 sticky-top mx-auto" id="search_form" action="/node_search">
        <div class="row">
            <input
                class="col m-2"
                id="q"
                type="text"
                name="q"
                data-translate-lang="node id"
                placeholder="Node id"
                autocomplete="off"
                list="node_options"
                value="{{raw_node_id}}"
                hx-trigger="input delay:100ms"
                hx-get="/node_match"
                hx-target="#node_options"
            />
            <datalist id="node_options">
                {% for option in node_options %}
                <option value="{{option.id}}">{{option.id}} -- {{option.long_name}} ({{option.short_name}})</option>
                {% endfor %}
            </datalist>

            <select name="portnum" class="col-2 m-2" id="portnum_select"></select>
            <input type="submit" value="Go to Node" class="col-2 m-2" data-translate-lang="go to node" />
        </div>
    </form>

    {% block body %}{% endblock %}

    <br>
    <div style="text-align:center" id="footer" data-translate-lang="footer"></div>
    <div style="text-align:center"><small id="site-version">ver. unknown</small></div>
    <br>

    <!-- Shared Site Config & Language Loader -->
    <script>
    // --- Global Promises ---
    if (!window._langPromise) {
        window._langPromise = (async () => {
            try {
                const res = await fetch("/api/lang");
                const lang = await res.json();
                window._lang = lang;
                console.log("Loaded language from /api/lang:", lang);
                return lang;
            } catch (err) {
                console.error("Failed to load /api/lang:", err);
                return {};
            }
        })();
    }

    if (!window._siteConfigPromise) {
        window._siteConfigPromise = (async () => {
            try {
                const res = await fetch("/api/config");
                const config = await res.json();
                window._siteConfig = config;
                console.log("Loaded config from /api/config:", config);
                return config;
            } catch (err) {
                console.error("Failed to load /api/config:", err);
                return {};
            }
        })();
    }

    // --- Apply Translations ---
    function applyTranslations(lang) {
        if (!lang || !lang.base) return;
        const base = lang.base;

        document.querySelectorAll("[data-translate-lang]").forEach(el => {
            const key = el.dataset.translateLang;
            const translation = base[key];
            if (!translation) return;

            if (el.placeholder) {
                el.placeholder = translation;
            } else if (key === "footer") {
                el.innerHTML = translation; // allow HTML links in footer
            } else if (el.value && el.tagName === "INPUT") {
                el.value = translation;
            } else {
                el.textContent = translation;
            }
        });
    }

    async function initializePage() {
        try {
            const [lang, cfg] = await Promise.all([
                window._langPromise,
                window._siteConfigPromise
            ]);

            const site = cfg.site || {};
            const base = (lang && lang.base) || {};

            // --- Title ---
            document.title = "Meshview - " + (site.title || "");

            // --- Header ---
            const header = document.getElementById("site-header");
            if (header)
                header.innerHTML = `<strong>${site.title || ""} ${site.domain ? "(" + site.domain + ")" : ""}</strong>`;

            // --- Message ---
            const msg = document.getElementById("site-message");
            if (msg) msg.textContent = site.message || "";

            // --- Menu ---
            const menu = document.getElementById("site-menu");
            if (menu) {
                let html = "";
                if (site.nodes === "true") html += `<a href="/nodelist">${base.nodes || "Nodes"}</a>`;
                if (site.conversations === "true") html += `&nbsp;-&nbsp;<a href="/chat">${base.conversations || "Conversations"}</a>`;
                if (site.everything === "true") html += `&nbsp;-&nbsp;<a href="/firehose">${base.everything || "See Everything"}</a>`;
                if (site.graphs === "true") html += `&nbsp;-&nbsp;<a href="/nodegraph">${base.graph || "Mesh Graphs"}</a>`;
                if (site.net === "true") html += `&nbsp;-&nbsp;<a href="/net">${base.net || "Weekly Net"}</a>`;
                if (site.map === "true") html += `&nbsp;-&nbsp;<a href="/map">${base.map || "Live Map"}</a>`;
                if (site.stats === "true") html += `&nbsp;-&nbsp;<a href="/stats">${base.stats || "Stats"}</a>`;
                if (site.top === "true") html += `&nbsp;-&nbsp;<a href="/top">${base.top || "Top Traffic Nodes"}</a>`;
                menu.innerHTML = html;
            }

            // --- Version ---
            const verEl = document.getElementById("site-version");
            if (verEl) verEl.textContent = "ver. " + (site.version || "unknown");

            // --- Apply translations to placeholders and footer ---
            applyTranslations(lang);

            // --- Fade in ---
            document.body.classList.add("ready");
        } catch (err) {
            console.error("Failed to initialize page:", err);
            document.body.classList.add("ready");
        }
    }

    document.addEventListener("DOMContentLoaded", initializePage);
    </script>
</body>
</html>
