{{ define "content" }}
<link href="/static/css/pages/ip.css" rel="stylesheet">
<script src="/static/js/splitPane.js"></script>

<!-- This file describes the /ip/ntp UI page -->
<div class="full-size">
    <div id="topPane" class="vertical-split-pane" style="height:100%;">
        <nav class="navbar navbar-expand-sm">
            <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false"
                  aria-label="Toggle navigation">
                <i class="icon-menu"></i>Menu
            </span>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <input type="checkbox" class="btn-check" id="showDetail" onclick="showHideNtpCfgDetails()" disabled>
                        <label class="btn btn-nav-icon-text" for="showDetail"><i class='icon-page-details'></i>Details</label>
                    </li>
                </ul>
            </div>
        </nav>
        <!-- Summary table which shows Slot & Enabled columns -->
        <div class="grid-wrapper" style="height: calc(100% - 36px);">
            <h4 class="modal-header">NTP Servers</h4>
            <div id="divNtpSummaryTable" style="height: 100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <div id="horizontalHandle" class="horizontal-split-handle" style="display: none;height: 10px;">
    </div>
    <div id="bottomPane" class="vertical-split-pane" style="display: none; background-color: var(--panel-bg);">
        <div class="modal-header">
          <span class="modal-title" id="ntpCfgDetailsModalLabel">
            <i class="icon-add"></i>
            NTP Config Details
            <span id="settings_status" style="display: none">
                <label class="settings-status-style" id="settings_status_text"></label>
            </span>
          </span>
        </div>

        <nav class="navbar navbar-expand-sm">
            <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse"
                  data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false"
                  aria-label="Toggle navigation">
                <i class="icon-menu"></i>Menu
            </span>
            <div class="collapse navbar-collapse" id="navbarToggler">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <button id="copyCfg" class="btn btn-text" title="Copy config" onclick="onCopyCfg();">
                            <i class="icon-copy"></i>Copy
                        </button>
                    </li>
                    <li>
                        <button id="pasteCfg" class="btn btn-text" title="Paste config" onclick="onPasteCfg();">
                            <i class="icon-copy-paste"></i>Paste
                        </button>
                    </li>
                </ul>
            </div>
        </nav>

        <div class="row container-data" style="height: calc(100% - 150px);">
            <div class="ntp-details">
                <div class="modal-body modal-body-ntp">
                    <table class="container-data container-data-table-fixed">
                        <tr class="row-data">
                            <td class="col-data-label">Slot</td>
                            <td class="col-data-input">
                                <input type="text" id="slotName" name="name" class="form-control rounded-0 name-size" value="Slot # (eth#, eth#)" readonly />
                            </td>

                            <td class="col-data-label">&nbsp;</td>

                        </tr>

                        <tr>
                            <td class="col-data-label">
                                <label>Enable NTP</label>
                            </td>
                            <td class="col-data-input">
                                <input type="checkbox" id="enable" onClick="logger(logLevel.INFO, $('#slotName').val() + ' NTP ' + ($('#enable').prop('checked') ? 'enabled' : 'disabled'));"/>
                            </td>
                        </tr>
                        <tr>
                            <td class="col-data-label">
                                <label>NTP Active</label>
                            </td>
                            <td class="col-data-input">
                                <input type="checkbox" id="ntpActive" disabled/>
                            </td>
                        </tr>
                    </table>
                    <table class="container-data container-data-table-fixed">
                        <tr>
                            <td class="col-data-label" colspan="5">Servers</td>
                        </tr>

                        <tr>
                            <td class="grid-wrapper-table-ntp-details">
                                <div id="detailsServers" style="height:100%;" class="ag-theme-balham-dark">
                                </div>
                            </td>
                        </tr>

                        <tr class="row-data"/>

                        <tr>
                            <td class="col-data-label" colspan="5">Pools</td>
                        </tr>

                        <tr>
                            <td class="grid-wrapper-table-ntp-details">
                                <div id="detailsPools" style="height:100%;" class="ag-theme-balham-dark">
                                </div>
                            </td>
                        </tr>

                        <tr class="row-data"/>

                        <tr>
                            <td class="col-data-label" style="width:700px;">
                                <p class="note-ntp">Note: Unless servers/pools are provided as IP addresses, this feature relies on DNS being configured first.</p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>

        <div class="modal-footer panel-footer">
            <button id="resetDetailsWindow" class="btn btn-text" onclick="onReset();">Reset</button>
            <button id="updateDetailsWindow" class="btn btn-text" onclick="onApply();">Apply</button>
        </div>
    </div>
</div>



{{/* Scripts in rcs/go/web/public/js/... */}}
<script src="/static/js/js-utils.js"></script>
<script src="/static/js/aggrid-utils.js"></script>

<script type="text/javascript" charset="utf-8">
    var IpSessionTopPaneHeight = 'calc(50% - 5px)';
    var IpSessionBottomPaneHeight = 'calc(50% - 5px)';

    const eventListenerType = {
        NTP_DATA_UPDATED : "Ntp_Data_Updated",
        ERRORS_OCCURRED : "Errors_Occurred",
        LOG_DATA : "Log_Data"
    };

    const logLevel = {
        INFO : "info",
        LOG : "log",
        WARN : "warn",
        ERROR : "error",
        TRACE : "trace"
    };

    const BUSY_STATE_NONE = "";
    const BUSY_STATE_SAVING = "Saving...";

    let copiedParams = {empty: true}; // Global var to be used to facilitate copy/pasting of configs across slots
    let savedConfig = []; // For checking for differences with saved config & adjusting cell colours accordingly

    class EnableRenderer {
        init(params) {
            this.eGui = document.createElement('span');
            let icon = params.value === true ? 'icon-active' : 'icon-not-active';
            this.eGui.innerHTML = `<p style="text-align:center;"> <i class="${icon}"></i> </p>`;
        }

        getGui() {
            return this.eGui;
        }

        refresh(params) {
            return false;
        }
    }

    // AgGrid table column definitions.
    const columnDefsNtpSummaryTable = [
        {field: "slot", headerName: "Slot", editable: false},
        {field: "enable", headerName: "Enabled", editable: false, maxWidth: 150, resizable: false,
            cellRendererSelector: (params) => {
                const renderEnableField = {
                    component: EnableRenderer,
                    params: {values: ['TRUE', 'FALSE']}
                };
                if (params.data) {
                    return renderEnableField;
                }
                return undefined;
            }
        },
        {field: "active", headerName: "Active", editable: false, maxWidth: 150, resizable: false,
            cellRendererSelector: (params) => {
                const renderEnableField = {
                    component: EnableRenderer,
                    params: {values: ['TRUE', 'FALSE']}
                };
                if (params.data) {
                    return renderEnableField;
                }
                return undefined;
            }
        },
    ];

    const ntpSummaryTableOptions = {
        defaultColDef: {
            editable: true,
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: columnDefsNtpSummaryTable,
        rowSelection: 'single',
        onRowSelected: onRowSelected,
        onRowDoubleClicked: onRowDoubleClicked,
    };

    const serversTableColumns = [
        {field: "server", headerName: "Server Address", width: 500, minWidth: 50, maxWidth: 1000, type: 'serverColumn',
            valueSetter: params => serverSetter(params),
            valueGetter: params => {return params.data.server || "";}}
    ];

    const serversTableOptions = {
        defaultColDef: {
            editable: true,
            resizable: true,
            flex: 1,
        },
        columnDefs: serversTableColumns,
        stopEditingWhenCellsLoseFocus: true,
        rowSelection: 'single',
        columnTypes: {
            serverColumn: {editable: true, cellStyle: getTableCellStyle}
        },
    };

    const poolsTableColumns = [
        {field: "pool", headerName: "Pool Address", width: 500, minWidth: 50, maxWidth: 1000, type: 'serverColumn',
            valueSetter: params => poolSetter(params),
            valueGetter: params => {return params.data.pool || "";}}
    ];

    const poolsTableOptions = {
        defaultColDef: {
            editable: true,
            resizable: true,
            flex: 1,
        },
        columnDefs: poolsTableColumns,
        stopEditingWhenCellsLoseFocus: true,
        rowSelection: 'single',
        columnTypes: {
            serverColumn: {editable: true, cellStyle: getTableCellStyle}
        },
    };

    function logger(loggingLevel, message) {
        var event = new CustomEvent(eventListenerType.LOG_DATA, {
            detail: {
                level : loggingLevel,
                message : message,
            }
        });
        window.dispatchEvent(event);
    }

    function showErrorList (eventData) {
        const errors = eventData.detail.errors;
        if (!errors) {
            logger(logLevel.WARN, arguments.callee.name + " - No error to show for '" + JSON.stringify(eventData.detail) + "'");
            return;
        }

        if (errors.length > 0) {
            var errorString = "<ul>";
            for (var i = 0; i < errors.length; i++) {
                errorString += "<li>" + errors[i] + "</li>";
            }
            errorString += "</ul>";

            $('#errorListHeading').text((errors.length == 1) ? "There is an error that needs to be addressed: " : "There are " + errors.length + " errors that need to be addressed: ");
            $('#errorList').html(errorString);
            displayDialog("errorsModal");
        }
    }

    function addCustomEventListeners() {
        window.addEventListener(eventListenerType.LOG_DATA, dashboardLogger);
        window.addEventListener(eventListenerType.LOG_DATA, consoleLogger);
        window.addEventListener(eventListenerType.ERRORS_OCCURRED, showErrorList);
        window.addEventListener(eventListenerType.NTP_DATA_UPDATED, populateFields);

        window.onerror = function(message, source, lineno, colno, error) {
            var data = {
                "message" : message,
                "source"  : source,
                "line #"  : lineno,
                "col #"   : colno,
                "error"   : error
            };
            logger(logLevel.ERROR, JSON.stringify(data, null, 2));
        };
    }

    function dashboardLogger(eventData) {
        if (typeof oglml === 'undefined') {
            return;
        }

        var logMessage = eventData.detail.level.capitalize() + " - " + eventData.detail.message;
        oglml.call('dbDebug', [logMessage]);
    }

    function consoleLogger(eventData) {
        if (console === "undefined") {
            return;
        }

        switch(eventData.detail.level) {
            case logLevel.INFO :
                console.info(eventData.detail.message);
                break;
            case logLevel.WARN :
                console.warn(eventData.detail.message);
                break;
            case logLevel.ERROR :
                console.error(eventData.detail.message);
                break;
            case logLevel.TRACE :
                console.trace(eventData.detail.message);
                break;
            default:
                console.log(eventData.detail.message);
                break;
        }
    }

    function serverGetter (params, idx) {
        if (params.data.servers != null && params.data.servers.length > idx) {
            return params.data.servers[idx];
        }
        return "";
    }

    function serverSetter (params) {
        let ret = false;

        if (params.newValue != params.oldValue) {
            if (params.data.server != null) {
                if (params.data.server !== params.newValue) {
                    if (params.newValue == "") {
                        logger(logLevel.INFO, "NTP server " + params.oldValue + " removed");
                        params.data.server = null;
                        params.data.modified = true;
                    } else {
                        logger(logLevel.INFO, "NTP server " + params.oldValue + " changed to " + params.newValue);
                        params.data.server = params.newValue;
                        params.data.modified = true;
                    }
                }
                ret = true;
            } else if (params.data.server == null && params.newValue != "") {
                logger(logLevel.INFO, "NTP server " + params.oldValue + " changed to " + params.newValue);
                params.data.server = params.newValue;
                params.data.modified = true;
                ret = true;
            }
        }

        // Add a blank row so the user can add additional servers
        if (params.data.server != null && params.data.server != "") {
            let hasBlankRow = false;

            serversTableOptions.api.forEachNode(function (node) {
                if (node.data.server == '') {
                    hasBlankRow = true;
                }
            });

            if (!hasBlankRow) {
                serversTableOptions.api.applyTransaction({add: [{server: ""}]});
            }
        }
        return ret;
    }

    function poolGetter (params, idx) {
        if (params.data.pools != null && params.data.pools.length > idx) {
            return params.data.pools[idx];
        }
        return "";
    }

    function poolSetter (params) {
        let ret = false;

        if (params.newValue != params.oldValue) {
            if (params.data.pool != null) {
                if (params.data.pool !== params.newValue) {
                    if (params.newValue == "") {
                        logger(logLevel.INFO, "NTP pool " + params.oldValue + " removed");
                        params.data.pool = null;
                        params.data.modified = true;
                    } else {
                        logger(logLevel.INFO, "NTP pool " + params.oldValue + " changed to " + params.newValue);
                        params.data.pool = params.newValue;
                        params.data.modified = true;
                    }
                }
                ret = true;
            } else if (params.data.pool == null && params.newValue != "") {
                logger(logLevel.INFO, "NTP pool " + params.oldValue + " changed to " + params.newValue);
                params.data.pool = params.newValue;
                params.data.modified = true;
                ret = true;
            }
        }

        // Add a blank row so the user can add additional pools
        if (params.data.pool != null && params.data.pool != "") {
            let hasBlankRow = false;

            poolsTableOptions.api.forEachNode(function (node) {
                if (node.data.pool == '') {
                    hasBlankRow = true;
                }
            });

            if (!hasBlankRow) {
                poolsTableOptions.api.applyTransaction({add: [{pool: ""}]});
            }
        }
        return ret;
    }

    function initContents() {
        new agGrid.Grid(document.querySelector('#divNtpSummaryTable'), ntpSummaryTableOptions);
        new agGrid.Grid(document.querySelector('#detailsServers'), serversTableOptions);
        new agGrid.Grid(document.querySelector('#detailsPools'), poolsTableOptions);
        // Set initial sort order on table.
        ntpSummaryTableOptions.columnApi.applyColumnState({
            state: [{colId: 'slot', sort: 'asc'}],
            defaultState: {sort: null},
        });
        // Load data and populate the fields.
        loadDataFromServer();
    }

    function onWebSocketMessage(event) {
        logger(logLevel.LOG, "WS onMessage: new data:", event.data);
        let msg = JSON.parse(event.data);

        if (!msg) {
            logger(logLevel.LOG, "WS onMessage: failed to parse event data:", event.data);
            return
        }

        if (msg.subject === "NTP_ACTIVE_UPDATE") {
            onNtpUpdated(msg.details);
        }
    }

    function onWebSocketSlotMessage(event) {
        let msg = JSON.parse(event.data);
        if (!msg) {
            logger(logLevel.LOG, "Slot Websocket Message is missing: " + JSON.stringify(event.data));
            return
        }
        switch (msg.operation) {
            case "UPDATE":
                loadDataFromServer();
                break;
            default:
                logger(logLevel.WARN, "Unsupported operation given in Slot websocket message: " + msg.operation);
                return;
        }
    }

    function loadDataFromServer() {
        fetch('/ip/ntp/data').then(response => response.json()).then(data => dispatchNewNtpData(data));
    }

    function dispatchNewNtpData (newNtpData) {
        var event = new CustomEvent(eventListenerType.NTP_DATA_UPDATED, {
            detail: newNtpData
        });
        window.dispatchEvent(event);
    }

    function dispatchErrorsEvent (errorList) {
        var event = new CustomEvent(eventListenerType.ERRORS_OCCURRED, {
            detail: {
                errors : errorList,
            }
        });
        window.dispatchEvent(event);
    }

    function populateFields(eventData) {
        savedConfig = JSON.parse(JSON.stringify(eventData.detail)); // Shallow copy would cause headaches here
        const selectedData = ntpSummaryTableOptions.api.getSelectedRows();
        ntpSummaryTableOptions.api.setRowData(eventData.detail);
        if (selectedData.length != 0) {
            ntpSummaryTableOptions.api.forEachNode(function (node) {
                if (node.data.slot == selectedData[0].slot) {
                    node.setSelected(true);
                    updateDetailWindow();
                }
            });
        }
    }

    function setBusyState(status) {
        // Show/Hide either status text or settings data while either loading/saving or ready.
        let busy = status !== BUSY_STATE_NONE;
        document.getElementById("settings_status_text").innerText = status;
        document.getElementById("settings_status").style.display = (busy ? "block" : "none");

        // Disable data fields and dependent buttons while loading/saving.
        $("#enable").prop("disabled", busy);
        $("#copyCfg").prop("disabled", busy);
        $("#pasteCfg").prop("disabled", busy);
        $("#resetDetailsWindow").prop("disabled", busy);
        $("#updateDetailsWindow").prop("disabled", busy);
        $("#closeDetailsWindow").prop("disabled", busy);
    }

    function validateChanges () {
        var errors = [];

        let ntpEnabled = $('#enable').prop('checked');

        let valsEmpty = true;
        let servers = [];
        let pools = [];

        serversTableOptions.api.forEachNode(function (node) {
            if (node.data.server != "" && node.data.server != null) {
                if (!isValidIPv4(node.data.server)) {
                    errors.push("Server Address: " + node.data.server + " is not valid IP.");
                }
                valsEmpty = false;
                servers.push(node.data.server);
            }
        });

        poolsTableOptions.api.forEachNode(function (node) {
            if (node.data.pool != "" && node.data.pool != null) {
                if (!isValidIPv4(node.data.pool)) {
                    errors.push("Pool Address: " + node.data.pool + " is not valid IP.");
                }
                valsEmpty = false;
                pools.push(node.data.pool);
            }
        });

        // Verify we don't have NTP enabled w/o servers or pools specified
        if (ntpEnabled && valsEmpty) {
            let errMsg = "NTP enabled but given no server or pool values for " + $('#slotName').val();
            logger(logLevel.ERROR, errMsg);
            errors.push(errMsg);
        }

        // Verify server & pool lists don't contain duplicates
        if ((new Set(servers)).size !== servers.length) {
            let errMsg = "Duplicate server values provided for NTP config of " + $('#slotName').val();
            logger(logLevel.ERROR, errMsg);
            errors.push(errMsg);
        }

        if ((new Set(pools)).size !== pools.length) {
            let errMsg = "Duplicate pool values provided for NTP config of " + $('#slotName').val();
            logger(logLevel.ERROR, errMsg);
            errors.push(errMsg);
        }
        
        return errors;
    }

    function isValidIPv4(value) {
        const ipv4Pattern = /^(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})(\.(25[0-5]|2[0-4][0-9]|[0-1]?[0-9]{1,2})){3}$/;
        return ipv4Pattern.test(value);
    }

    function onApply () {
        let errors = validateChanges ();
        if (errors.length > 0) {
            dispatchErrorsEvent(errors);
            return;
        }

        let pendingEnable = $('#enable').prop('checked');
        let pendingServers = [];
        let pendingPools = [];

        let modified = ntpSummaryTableOptions.api.getSelectedRows()[0].enable != pendingEnable;

        serversTableOptions.api.forEachNode(function (node) {
            if (node.data.modified) {
                modified = true;
            }

            if (node.data.server != null && node.data.server != "") {
                pendingServers.push(node.data.server);
            }
        });

        poolsTableOptions.api.forEachNode(function (node) {
            if (node.data.modified) {
                modified = true;
            }

            if (node.data.pool != null && node.data.pool != "") {
                pendingPools.push(node.data.pool);
            }
        });

        // Only bother sending POST if changes were actually made
        if (modified) {
            newData = {
                slot: $('#slotName').val(),
                enable: pendingEnable,
                servers: pendingServers,
                pools: pendingPools
            };

            logger(logLevel.LOG, "onApply: new data:" + JSON.stringify(newData));
            serversTableOptions.api.stopEditing();
            poolsTableOptions.api.stopEditing();
            setBusyState(BUSY_STATE_SAVING);

            $.post("/ip/ntp", JSON.stringify(newData))
                .done((msg) => {
                    if (!newData.enable) {
                        logger(logLevel.LOG, 'onApply: done, msg: ' + JSON.stringify(msg));
                        setBusyState(BUSY_STATE_NONE);
                        $("#closeDetailsWindow").click();
                        loadDataFromServer();
                    }
                })
                .fail((xhr, status, error) => {
                    let responseError = xhr.status + ' - ' + xhr.responseText;
                    dispatchErrorsEvent([responseError]);
                    logger(logLevel.ERROR, responseError);
                    setBusyState(BUSY_STATE_NONE);
                    $("#closeDetailsWindow").click();
                    loadDataFromServer();
                });
        } else {
            logger(logLevel.WARN, "onApply: No fields seem to be modified. Update not sent");
        }
    }

    function onNtpUpdated(success) {
        if (success) {
            logger(logLevel.LOG, 'onApply: done, msg: ' + JSON.stringify(success));
            setBusyState(BUSY_STATE_NONE);
            $("#closeDetailsWindow").click();
            loadDataFromServer();
        } else {
            let responseError = "NTP config timeout. Please check if NTP servers and/or pools are valid"
            dispatchErrorsEvent([responseError]);
            logger(logLevel.ERROR, responseError);
            setBusyState(BUSY_STATE_NONE);
            $("#closeDetailsWindow").click();
            loadDataFromServer();
        }
    }

    // Takes a row of ntpSummaryTableOptions as input
    function updateEditableFields (cfg) {
        // Update servers & pools
        let servers = [];
        let pools = [];

        if (cfg.servers) {
            for (let i = 0; i < cfg.servers.length; i++) {
                servers.push({
                    server: cfg.servers[i],
                });
            }
        }

        if (cfg.pools) {
            for (let i = 0; i < cfg.pools.length; i++) {
                pools.push({
                    pool: cfg.pools[i],
                });
            }
        }

        // We want the tables to show a min of 3 rows
        do {
            servers.push("");
        } while (servers.length < 3);

        do {
            pools.push("");
        } while (pools.length < 3);
        
        serversTableOptions.api.setRowData(servers);
        poolsTableOptions.api.setRowData(pools);

        // 28 is the height of a data row in pixels
        // 32 is the height of a column header cell in pixels
        $("#detailsServers").height((28 * servers.length) + 32);
        $("#detailsPools").height((28 * pools.length) + 32);

        // Update enable checkbox
        $('#enable').prop('checked', cfg.enable);
        $('#ntpActive').prop('checked', cfg.active);
    }

    function onReset() {
        const selectedData = ntpSummaryTableOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            updateEditableFields(selectedData[0]);
            logger(logLevel.INFO, "Pending changes to " + $('#slotName').val() + " reset");
        } else {
            logger(logLevel.WARN, "Reset failed as no row selected");
        }
    }

    // Copies SAVED config (i.e., won't copy a pending cfg)
    function onCopyCfg () {
        copiedParams = {
            enable:     $('#enable').prop('checked'),
            servers:    [],
            pools:      []
        }

        let rowData = ntpSummaryTableOptions.api.getSelectedRows();

        if (rowData.length <= 0) {
            logger(logLevel.WARN, "Copy failed as no row selected");
            return;
        }

        rowData = rowData[0];

        // Copy servers
        if (rowData.servers) {
            for (var i = 0; i < rowData.servers.length; i++) {
                copiedParams.servers.push({
                    server: rowData.servers[i]
                });
            }
        }

        // Copy pools
        if (rowData.pools) {
            for (var i = 0; i < rowData.pools.length; i++) {
                copiedParams.pools.push({
                    pool: rowData.pools[i]
                });
            }
        }

        logger(logLevel.INFO, "Copied config: " + JSON.stringify(copiedParams));
    }

    function onPasteCfg () {
        if (copiedParams == null || copiedParams.empty) {
            logger(logLevel.WARN, "Paste failed as no config copied to clipboard");
            return;
        }

        let rowData = ntpSummaryTableOptions.api.getSelectedRows();

        if (rowData.length <= 0) {
            logger(logLevel.WARN, "Paste failed as no row selected");
            return;
        }

        rowData = rowData[0];

        // Paste enabled state
        $('#enable').prop('checked', copiedParams.enable);

        // Set server modified info prior to pasting (relevant for text colour & later sending of POST)
        for (let i=0; i<copiedParams.servers.length; i++) {
            let modified = true;
            for (let j=0; j<rowData.servers.length; j++) {
                if (copiedParams.servers[i].server == rowData.servers[i]) {
                    modified = false;
                    break;
                }
            }
            copiedParams.servers[i].modified = modified;
        }

        // Add blank server to guarantee user can continue to add more inputs themselves
        copiedParams.servers.push({server: ""});

        // Paste server info (the JSON stuff avoids bugs with changes made to copy's source after changes are made)
        serversTableOptions.api.setRowData(JSON.parse(JSON.stringify(copiedParams.servers)));

        // Set pool modified info prior to pasting
        for (let i=0; i<copiedParams.pools.length; i++) {
            let modified = true;
            for (let j=0; j<rowData.pools.length; j++) {
                if (copiedParams.pools[i].pool == rowData.pools[i]) {
                    modified = false;
                    break;
                }
            }
            copiedParams.pools[i].modified = modified;
        }

        // Add blank pool
        copiedParams.pools.push({pool: ""});

        // Paste pool info (the JSON stuff avoids bugs with changes made to copy's source after changes are made)
        poolsTableOptions.api.setRowData(JSON.parse(JSON.stringify(copiedParams.pools)));

        logger(logLevel.INFO, "Pasted config: " + JSON.stringify(copiedParams));
    }

    function getTableCellStyle(params) {
        let colorValue = params.data.modified ? 'yellow' : 'white';
        return {color: colorValue}
    }

    function showHideNtpCfgDetails() {
        let checked = document.getElementById('showDetail').checked;
        if (checked) {
            document.getElementById('horizontalHandle').style.display = 'block';
            document.getElementById('bottomPane').style.display = 'block';
            document.getElementById('topPane').style.height = IpSessionTopPaneHeight;
            document.getElementById('bottomPane').style.height = IpSessionBottomPaneHeight;
        } else if (document.getElementById('bottomPane').style.display != 'none') {
            IpSessionTopPaneHeight = document.getElementById('topPane').style.height;
            IpSessionBottomPaneHeight = document.getElementById('bottomPane').style.height;
            document.getElementById('horizontalHandle').style.display = 'none';
            document.getElementById('bottomPane').style.display = 'none';
            document.getElementById('topPane').style.height = '100%';
        }
    }

    function onRowSelected(event) {
        // OnRowSelected is called twice, one for the item selected and another call for the item that has been unselected.
        const selectedData = ntpSummaryTableOptions.api.getSelectedRows();
        if (selectedData.length != 1) {
            document.getElementById('showDetail').checked = false;
            showHideNtpCfgDetails();
            document.getElementById('showDetail').disabled = true;
        } else {
            document.getElementById('showDetail').disabled = false;
        }
        // the unselected does not interest us. ignoring it.
        if (!event.node.selected) {
            return;
        }
        
        // Update data to be shown in details window
        updateDetailWindow();
    }

    function onRowDoubleClicked(event) {
        // OnRowSelected is called twice, one for the item selected and another call for the item that has been unselected.
        const selectedData = ntpSummaryTableOptions.api.getSelectedRows();
        if (selectedData.length != 1) {
            document.getElementById('showDetail').checked = false;
            showHideNtpCfgDetails();
            document.getElementById('showDetail').disabled = true;
        } else {
            document.getElementById('showDetail').disabled = false;
            document.getElementById('showDetail').checked = (document.getElementById('bottomPane').style.display == 'none');
            showHideNtpCfgDetails();
        }

        // the unselected does not interest us. ignoring it.
        if (!event.node.selected) {
            return;
        }

        // Update data to be shown in details window
        updateDetailWindow();
    }

    function updateDetailWindow() {
        const selectedData = ntpSummaryTableOptions.api.getSelectedRows();
        updateEditableFields(selectedData[0]);
        $('#slotName').val(selectedData[0].slot);
        showHideNtpCfgDetails(selectedData.length == 1);
    }

    document.addEventListener('DOMContentLoaded', function () {
        initContents();
        addCustomEventListeners();
        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/eth/listen', onWebSocketMessage);
        addUpdateListener('ws://' + new URL(window.location.origin).host + '/ip/slots/listen', onWebSocketSlotMessage);
        initializeSplitPaneBar("horizontalHandle", "topPane", "bottomPane", paneDirection.VERTICAL);
    });
</script>

<div class="modal" id="errorsModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="errorModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-errors-size">
        <div class="modal-content">
            <div class="modal-header error-header justify-content-between">
                <span class="modal-title" id="errorModalLabel"><i class="icon-alarm-error-header"></i>Errors</span>
                <span class="btn btn-transparent" onclick="hideDialog('errorsModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data" id="errorListHeading">There are the following errors: </p>
                <div class="container-data" id="errorList"></div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-text" onclick="hideDialog('errorsModal');">Close</button>
            </div>
        </div>
    </div>
</div>

{{ end }}