{{ define "panelsettings" }}
<link href="/static/css/pages/panel.css" rel="stylesheet">

    <nav class="header">
      <div>Panel</div>
    </nav>
    <table class="container-data">
        <tr class="row-data">
            <td class="col-data-label-panel">Protect Operation:</td>
            <td class="col-data-input">
                <div class="select-wrapper">
                    <select class="custom-select" name="OpProtection" id="OpProtection" value="{{ .OpProtection }}" onchange="handlePanelSettingChanged()">
                        <option value="0" {{if eq .OpProtection 0}}selected{{end}}>Disable</option>
                        <option value="1" {{if eq .OpProtection 1}}selected{{end}}>Enable</option>
                        <option value="2" {{if eq .OpProtection 2}}selected{{end}}>Enable w/ Override</option>
                    </select>
                </div>
            </td>
        </tr>
        <tr class="row-data">
            <td class="col-data-label-panel">Take Operation:</td>
            <td class="col-data-input">
                <div class="select-wrapper">
                    <select class="custom-select" name="OpTake" id="OpTake" value="{{ .OpTake }}" onchange="handlePanelSettingChanged()">
                        {{if eq .OpTake 0}}
                        <option value="0" selected>Confirm</option>
                        <option value="1">Direct</option>
                        {{else}}
                        <option value="0">Confirm</option>
                        <option value="1" selected>Direct</option>
                        {{end}}
                    </select>
                </div>
            </td>
        </tr>
        <tr class="row-data">
            <td class="col-data-label-panel">Machine Control:</td>
            <td class="col-data-input">
                <div class="select-wrapper">
                    <select class="custom-select" name="OpMCtrl" id="OpMCtrl" value="{{ .OpMCtrl }}" onchange="handlePanelSettingChanged()">
                        {{if eq .OpMCtrl 0}}
                        <option value="0" selected>Disable</option>
                        <option value="1">Enable</option>
                        {{else}}
                        <option value="0">Disable</option>
                        <option value="1" selected>Enable</option>
                        {{end}}
                    </select>
                </div>
            </td>
        </tr>

        {{ template "opSelect" . }}

        {{ template "opUngroup" . }}
    </table>

    <nav class="header">
      <div>Window</div>
    </nav>
    <table class="container-data">
        <tr class="row-data">
            <td class="col-data-label-panel">Vertical Scrollbar Width:</td>
            <td class="col-data-input">
                <div class="select-wrapper">
                    <select class="custom-select" name="VerticalScrollBarWidth" id="VerticalScrollBarWidth" value="{{ .VerticalScrollBarWidth }}" onchange="handlePanelSettingChanged()">
                        {{if eq .VerticalScrollBarWidth 25}}
                        <option value="25" selected>Small</option>
                        <option value="35">Medium</option>
                        <option value="45">Large</option>
                        {{else if eq .VerticalScrollBarWidth 35}}
                        <option value="25">Small</option>
                        <option value="35" selected>Medium</option>
                        <option value="45">Large</option>
                        {{else}}
                        <option value="25">Small</option>
                        <option value="35">Medium</option>
                        <option value="45" selected>Large</option>
                        {{end}}
                    </select>
                </div>
            </td>
        </tr>

        {{ template "horizontalScrollBarHeight" . }}

        {{ template "displayIcon" . }}

        {{ template "orientation" . }}

        {{ template "sideDrawerWidth" . }}

        {{ template "opTakeSize" . }}

        {{ template "editTitles" . }}

        {{ template "outputMonitorSource" . }}

        {{ template "outputMonitorDestination" . }}
    </table>

    <nav class="header">
      <div>Viewable Data</div>
    </nav>
    <table class="container-data" id="viewableTable">

        {{ template "viewableLevels" . }}

        {{ template "viewableSources" . }}

        {{ template "viewableDestinations" . }}

        {{ template "viewableSalvos" . }}
    </table>

    <script type="text/javascript" charset="utf-8">
        function handlePanelSettingChanged(){
            let panelId = sessionStorage.getItem("panelEditorId");
            const opTake = document.getElementById("OpTake").value;
            const opProtection = document.getElementById("OpProtection").value;
            const opMCtrl = document.getElementById("OpMCtrl").value;
            const verticalBarWidth = document.getElementById("VerticalScrollBarWidth").value;

            let panelSettingURL = "/panel/settings/update?panelId=" + panelId + "&opTake=" + opTake + "&opProtection=" + opProtection + "&opMCtrl=" + opMCtrl + "&verticalBarWidth=" + verticalBarWidth;
            let opSelectionCheck = document.getElementById("OpSelection");
            if(opSelectionCheck){
                panelSettingURL = panelSettingURL + "&opSelection=" + opSelectionCheck.value;
            }
            let opUngroupCheck = document.getElementById("OpUngroup");
            if(opUngroupCheck){
                panelSettingURL = panelSettingURL + "&opUngroup=" + opUngroupCheck.value;
            }
            let horizontalScrollBarHeightCheck = document.getElementById("HorizontalScrollBarHeight");
            if(horizontalScrollBarHeightCheck){
                panelSettingURL = panelSettingURL + "&horizontalScrollBarHeight=" + horizontalScrollBarHeightCheck.value;
            }
            let displayIconCheck = document.getElementById("DisplayIcon");
            if(displayIconCheck){
                panelSettingURL = panelSettingURL + "&displayIcon=" + displayIconCheck.value;
            }
            let orientationCheck = document.getElementById("Orientation");
            if(orientationCheck){
                panelSettingURL = panelSettingURL + "&orientation=" + orientationCheck.value;
            }
            let sideDrawerWidthCheck = document.getElementById("SideDrawerWidth");
            if(sideDrawerWidthCheck){
                panelSettingURL = panelSettingURL + "&sideDrawerWidth=" + sideDrawerWidthCheck.value;
            }
            let opTakeSizeCheck = document.getElementById("OpTakeSize");
            if(opTakeSizeCheck){
                panelSettingURL = panelSettingURL + "&opTakeSize=" + opTakeSizeCheck.value;
            }
            let editTitlesCheck = document.getElementById("EditTitles");
            if(editTitlesCheck){
                panelSettingURL = panelSettingURL + "&editTitles=" + editTitlesCheck.value;
            }
            let outputMonitorSourceCheck = document.getElementById("outputMonitorSource");
            if(outputMonitorSourceCheck){
                panelSettingURL = panelSettingURL + "&outputMonitorSource=" + outputMonitorSourceCheck.value;
            }
            let outputMonitorDestinationCheck = document.getElementById("outputMonitorDestination");
            if(outputMonitorDestinationCheck){
                panelSettingURL = panelSettingURL + "&outputMonitorDestination=" + outputMonitorDestinationCheck.value;
            }
            let viewableLevelsCheck = document.getElementById("viewableLevels");
            if(viewableLevelsCheck){
                panelSettingURL = panelSettingURL + "&viewableLevels=" + viewableLevelsCheck.value;
            }
            let viewableSourcesCheck = document.getElementById("viewableSources");
            if(viewableLevelsCheck){
                panelSettingURL = panelSettingURL + "&viewableSources=" + viewableSourcesCheck.value;
            }
            let viewableDestinationsCheck = document.getElementById("viewableDestinations");
            if(viewableDestinationsCheck){
                panelSettingURL = panelSettingURL + "&viewableDestinations=" + viewableDestinationsCheck.value;
            }
            let viewableSalvosCheck = document.getElementById("viewableSalvos");
            if(viewableSalvosCheck){
                panelSettingURL = panelSettingURL + "&viewableSalvos=" + viewableSalvosCheck.value;
            }
            $.ajax({
                url: panelSettingURL, success: (result) => {
                    $('#panelsettings').html(result);
                }
            });
        }

        function updateOutputMonitorSettings() {
            let select = document.getElementById("outputMonitorDestination");

            if (select) {
                const initialOmDest = {{ .OmDest }};

                select.innerHTML = '';
                let noneOption = new Option("None", -1);
                select.add(noneOption, 0);

                // Populate with current destinations from the grid
                panelDestinationsGridOptions.api.forEachNode((node) => {
                    if (node && node.data && typeof node.data.id !== 'undefined') {
                        const destId = node.data.id;
                        const destName = node.data.name || `Destination ${destId}`;
                        let newOption = new Option(destName, destId);
                        select.add(newOption, undefined);
                    }
                });

                // Set the selected option based on the initial template value
                let foundSelected = false;
                for (let i = 0; i < select.options.length; i++) {
                    if (select.options[i].value == initialOmDest) {
                        select.selectedIndex = i;
                        foundSelected = true;
                        break;
                    }
                }

                // If the desired value wasn't found (e.g., it was removed from assigned list), default to None (which is at index 0)
                if (!foundSelected) {
                    select.selectedIndex = 0;
                }

            }
        }

        function refreshSelectedPanelViewableWarning(elementType) {
            let rowCount;
            switch (elementType) {
                case pLevelType:
                    rowCount = panelLevelsGridOptions.api.getDisplayedRowCount();
                    let viewableLevelsWarning = document.getElementById("viewableLevelsWarning");
                    if (viewableLevelsWarning) {
                        if (rowCount < {{ .ViewLevels }}) {
                            viewableLevelsWarning.style.display = "";
                        } else {
                            viewableLevelsWarning.style.display = "none";
                        }
                    }
                    break;
                case pSourceType:
                    rowCount = panelSourcesGridOptions.api.getDisplayedRowCount();
                    let viewableSourcesWarning = document.getElementById("viewableSourcesWarning");
                    if (viewableSourcesWarning) {
                        if (rowCount < {{ .ViewSrcs }}) {
                            viewableSourcesWarning.style.display = "";
                        } else {
                            viewableSourcesWarning.style.display = "none";
                        }
                    }
                    break;
                case pDestinationType:
                    rowCount = panelDestinationsGridOptions.api.getDisplayedRowCount();
                    let viewableDestinationsWarning = document.getElementById("viewableDestinationsWarning");
                    let outputMonitorDestinationWarning = document.getElementById("outputMonitorDestinationWarning");
                    if (viewableDestinationsWarning) {
                        if (rowCount < {{ .ViewDests }}) {
                            viewableDestinationsWarning.style.display = "";
                        } else {
                            viewableDestinationsWarning.style.display = "none";
                        }
                    }
                    if (outputMonitorDestinationWarning) {
                        outputMonitorDestinationWarning.style.display = (rowCount === 0) ? "" : "none";
                    }

                    break;
                case pSalvoType:
                    rowCount = panelSalvosGridOptions.api.getDisplayedRowCount();
                    let viewableSalvosWarning = document.getElementById("viewableSalvosWarning");
                    if (viewableSalvosWarning) {
                        if (rowCount < {{ .ViewSalvos }}) {
                            viewableSalvosWarning.style.display = "";
                        } else {
                            viewableSalvosWarning.style.display = "none";
                        }
                    }
                    break;
            }
        }

        function updateViewableSettings() {
            let viewableTable = document.getElementById("viewableTable");
            if ({{ .Style }} != MatrixType && {{ .Style }} != MultibusType) {
                viewableTable.style.display = "none";
                return;
            }
            let viewableLevels = document.getElementById("viewableLevels");
            if (viewableLevels) {
                viewableLevels.value = {{ .ViewLevels }};
            }
            let viewableSources = document.getElementById("viewableSources");
            if (viewableSources) {
                viewableSources.value = {{ .ViewSrcs }};
            }
            let viewableDestinations = document.getElementById("viewableDestinations");
            if (viewableDestinations) {
                viewableDestinations.value = {{ .ViewDests }};
            }
            let viewableSalvos = document.getElementById("viewableSalvos");
            if (viewableSalvos) {
                viewableSalvos.value = {{ .ViewSalvos }};
            }
        }
    </script>
{{ end }}