{{ define "nrgheader" }}
<nav class="navbar navbar-expand" id="nrgHeader" style="display:none">
    <div class="container-fluid">
        <ul class="navbar-nav me-auto">
            <li id="remoteIconLi" style="display:none">
                <span>
                    <i class="icon-remote-control icon-white"></i>
                </span>
            </li>
            <li id="controlModeLi" style="display:none">
                <label id="controlMode" class="form-control rounded-0 control-mode-size d-flex" readonly></label>
            </li>
        </ul>
    </div>
</nav>

<script type="text/javascript" charset="utf-8">
    async function updateRemoteControlLabel() {
        await fetch('/remotecontroller/active')
            .then((response) => response.json())
            .then((data) => {
                let remoteControlModeLabel = "Not controlled";
                if (data.ip !== "") {
                    $('#remoteIconLi').show();
                    $('#nrgHeader').show();
                    $('#controlModeLi').show();
                    remoteControlModeLabel = "";
                    remoteControlModeLabel = remoteControlModeLabel + data.ip;
                    if (data.name !== "") {
                        remoteControlModeLabel = remoteControlModeLabel + " | " + data.name;
                    }
                    if (data.type !== "") {
                        remoteControlModeLabel = remoteControlModeLabel + " | " + data.type;
                    }
                } else {
                    if (!window.location.pathname.includes("lcp")) {
                        $('#nrgHeader').hide();
                    }
                    $('#remoteIconLi').hide();
                    $('#controlModeLi').hide();
                }
                $('#controlMode').text(remoteControlModeLabel);
            })
    }

    function createLCPConfigurationLabel() {
        $('#nrgHeader').show();
        let li = document.createElement("li");
        let label = document.createElement("label");
        label.setAttribute("id", "currentConfiguration");
        label.setAttribute("class", "form-control rounded-0 configuration-size d-flex");
        label.textContent = "Factory default configuration"
        label.setAttribute("readOnly", true);
        li.appendChild(label);
        $(li).insertBefore('#remoteIconLi');
        li = document.createElement("li");
        let span = document.createElement("span");
        let i = document.createElement("i");
        i.setAttribute("class", "icon-separator");
        span.appendChild(i);
        li.appendChild(span);
        $(li).insertBefore('#remoteIconLi');
    }

    function addRemoteControllerWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };

        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case REMOTE_CONTROLLER_TABLE:
                    updateRemoteControlLabel();
                    break;
            }
        }
    }

    document.addEventListener('DOMContentLoaded', async function () {
        if (window.location.pathname.includes("lcp")) {
            createLCPConfigurationLabel()
        }
        await updateRemoteControlLabel();
        addRemoteControllerWSDBListener();
    })
</script>
{{ end }}