<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/resources/stylesheet.css"/>
    <meta charset="UTF-8">
    <title>{{device}} WebUI Config</title>

    <script>
        function clearHelpModal() {
            const modal = document.getElementById("help-modal-overlay");
            const content = document.getElementById("helpText");
            modal.style.display = "none";
            content.innerHTML = "Loading..";
        }

        function showHelpModal(param) {
            const modal = document.getElementById("help-modal-overlay");
            const content = document.getElementById("helpText");

            const span = document.getElementsByClassName("close")[0];
            span.onclick = function () { clearHelpModal(); }

            // get config doc from API
            fetch(`/config/documentation?param=${param}`).then(function (response) {
                return response.text();
            }).then(function (html) {
                content.innerHTML = html;
            }).catch(function (err) {
                console.warn('error on getting config doc:', err);
            });

            modal.style.display = "block";

            // click anywhere outside the modal will close it too
            window.onclick = function (event) {
                if (event.target === modal) { clearHelpModal(); }
            }
        }
        addEventListener("DOMContentLoaded", (event) => {clearHelpModal();});
    </script>
</head>
<body>

<div id="help-modal-overlay" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <div id="helpText"></div>
    </div>

</div>

    <div class="config">
    {{config}}
    <div class="footerButtons">
    <form action="/config" method="post" style="text-align: right;">
        {{buttons}}
    </form>
    {{extendedbuttons}}
    </div>

</div>
</body>
</html>
