{{ define "content" }}
<script src="/static/js/keystrokeHandling.js"></script>
<script src="/static/js/rangeCellRenderer.js"></script>

<link href="/static/css/pages/alias.css" rel="stylesheet">

<script type="text/javascript" charset="utf-8">
    const channelAliasType = 0;
    const channelAliasTypeName = "channel";
    let isChannelAliasSelectedAll = false;
    let isChannelAliasDeselectAll = false;
    let defaultChannelFilter = null;
    let rowSelectionColumn = 'logicalEndName';
    let rowIdColumn = 'logicalEndId';
    let lastId = null;
    let isFirstPageLoad = true;

    const aliasColumnDefs = [
        {field: "logicalEndName", colId: "logicalEndName", headerName: "Name", suppressMovable: true, comparator: naturalSort, filter: true, filterParams: singleFilterCondition, editable: false, cellRenderer: (params) => {if (params.value === undefined) {return '<div class="loading"></div>';} else {return params.value;}}},
        {field: "id", colId: "id", hide: true},
        {field: "name", colId: "name", headerName: "Alias", suppressMovable: true, filter: true, filterParams: singleFilterCondition, editable: true, comparator: naturalSort, cellRenderer: RangeCellRenderer},
        {field: "logicalEndId", colId: "logicalEndId", hide: true, editable: false},
    ];

    const datasourceChannelAliases = {
        rowCount: undefined, // behave as infinite scroll
        getRows: (params) => {
            let filterData = {};
            let filterModel = channelAliasGridOptions.api.getFilterModel();
            if (JSON.stringify(defaultChannelFilter) != JSON.stringify(filterModel)){
                resetCurrentRange(channelAliasGridOptions);
                sessionStorage.removeItem("selRange");
                window.dispatchEvent( new StorageEvent('storage', {key: "selRange"}) )
                defaultChannelFilter = filterModel;
            }
            let keys = Object.keys(filterModel);
            for(let i = 0; i < keys.length; i++) {
                filterData[keys[i]] = {"filterType": "multi", "filterModels": [filterModel[keys[i]]]};
            }
            filterData["aliasType"] = {"filterType": "multi", "filterModels": [{"filterType":"number","type":"contains","filter":channelAliasType.toString()}]};
            $.post("/alias/getRows", JSON.stringify({"startRow": params.startRow,"endRow": params.endRow, "filterModel": filterData}))
                .done((result) => {
                    params.successCallback(result.data, result.lastRow);
                    updateChannelAliasSummary(false);
                    setTimeout(function() {
                        handleSelectionAfterGetRows();
                        checkForInitialDuplicates();
                    }, 50);
                })
                .fail((err) => {
                    displayErrorDialog(err.responseText)
                });
        },
    };

    const channelAliasGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: false,
            flex: 1,
        },
        gridId: 'channelAlias',
        columnDefs: aliasColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        onCellValueChanged: onCellValueChangedChannelAlias,
        onSelectionChanged: onChannelAliasRowsSelectionChanged,
        onRowClicked: onRowClickedChannelAlias,
        stopEditingWhenCellsLoseFocus: true,
        rowModelType: 'infinite',
        suppressServerSideInfiniteScroll: 'false',// used in latest versions of ag-grid to trigger getRows with startRow and endRow
        cacheBlockSize: 50, // bring back X data rows at a time
        maxBlocksInCache: 3,// only keep x blocks of rows (default is keep all rows)
        debounceVerticalScrollbar: true,
        rowBuffer: 10,//buffer for what's not visible in the grid
        paginationAutoPageSize: true,
        datasource: datasourceChannelAliases,
        suppressRowClickSelection: true,
        suppressCellFocus: false
    };

    function resetSelectionOnFilterChange() {
        window.isChannelAliasSelectedAll = false;
        window.isChannelAliasDeselectAll = false;
        updateChannelAliasSummary(true);
    }

    function countFromSelRange() {
        try {
            const r = JSON.parse(sessionStorage.getItem("selRange"));
            if (!r || isNaN(r.startRow) || isNaN(r.endRow)) return 0;
            const a = Math.min(Number(r.startRow), Number(r.endRow));
            const b = Math.max(Number(r.startRow), Number(r.endRow));
            return Math.max(0, b - a + 1);
        } catch { return 0; }
    }

    function buildServerFilterModel(override = null) {
        const gridModel = channelAliasGridOptions.api.getFilterModel() || {};
        const out = {};

        for (const k of Object.keys(gridModel)) {
            out[k] = { filterType: "multi", filterModels: [ gridModel[k] ] };
        }

        out.aliasType = {
            filterType: "multi",
            filterModels: [{ filterType: "number", type: "contains", filter: String(channelAliasType) }]
        };

        if (override && typeof override === "object") Object.assign(out, override);
        return out;
    }

    async function fetchFilteredTotalLastRow(override = null) {
        const payload = {
            startRow: 0,
            endRow: 1,
            filterModel: buildServerFilterModel(override)
        };
        const resp = await fetch("/alias/getRows", {
            method: "POST",
            credentials: "same-origin",
            headers: { "Content-Type": "application/json", "Accept": "application/json" },
            body: JSON.stringify(payload)
        });
        if (!resp.ok) throw new Error(`getRows HTTP ${resp.status}`);
        const json = await resp.json();
        return json.lastRow;
    }

    async function updateChannelAliasSummary(forceServer = false) {
        const elTotal = document.getElementById("chAliasSummaryTotalValue");
        const elSel   = document.getElementById("chAliasSummarySelectedValue");

        if (!forceServer) {
            if (isChannelAliasDeselectAll) {
                if (elSel) elSel.textContent = "0";
                return;
            }
            if (isChannelAliasSelectedAll) {
                const channelsNow = Number(elTotal?.textContent || 0);
                if (elSel) elSel.textContent = String(channelsNow);
                return;
            }
            if (elSel) elSel.textContent = String(countFromSelRange());
            return;
        }

        try {
            const totalChannels = await fetchFilteredTotalLastRow();

            if (elTotal) elTotal.textContent = String(totalChannels);

            if (isChannelAliasDeselectAll) {
                if (elSel) elSel.textContent = "0";
            } else if (isChannelAliasSelectedAll) {
                if (elSel) elSel.textContent = String(totalChannels);
            } else {
                if (elSel) elSel.textContent = String(countFromSelRange());
            }
        } catch (e) {
            console.warn("updateChannelAliasSummary failed:", e);
        }
    }

    channelAliasGridOptions.onFirstDataRendered = () =>
        updateChannelAliasSummary(true);

    channelAliasGridOptions.onFilterChanged = () =>
        resetSelectionOnFilterChange(true);

    channelAliasGridOptions.onSelectionChanged = () =>
        updateChannelAliasSummary(false);

    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', function () {
        var channelAliasGridDiv = document.querySelector('#channelAliasGrid');
        var channelAliasGrid = new agGrid.Grid(channelAliasGridDiv, channelAliasGridOptions);
        document.getElementById("channelAliasGrid").ag_grid = channelAliasGrid;
        addWSDBListener();
        $(window).on('storage',function(e){
            if (e.originalEvent.key == "selRange" && rangeGridOptions){
                onChannelAliasRowsSelectionChanged();
            }
        });

        try {
            channelAliasGridOptions.api.purgeInfiniteCache();
        } catch(e) {
            console.warn(e);
        }

        updateImportExamples();
        setTimeout(() => {
            updateChannelAliasSummary(true);
        }, 0);
    });

    function checkForInitialDuplicates() {
        // Hide the dialog which may already be present on the screen if changes occur
        hideDialog("WarningModal");
        const duplicatesMap = getDuplicatesMap();
        if (Object.keys(duplicatesMap).length == 0) {
            return;
        }
        let warningText = [];
        for (const [key, value] of Object.entries(duplicatesMap)) {
            if (value.length > 1) {
                let channelNames = [];
                for (let i = 0; i < value.length; i++) {
                    channelNames.push(value[i].logicalEndName);
                }
                warningText.push("<li>'" + key + "' is being used by: <ul><li>" + channelNames.join("</li><li>") + "</li></ul></li>");
            }
        }
        if (warningText.length > 0) {
            const maxAliasErrorsToShow = 5;
            let message = "The following ";
            if (warningText.length == 1) {
                message += "channel alias is duplicated: <ul>" + warningText[0] + "</ul>";
            } else if (warningText.length <= maxAliasErrorsToShow) {
                message += warningText.length + " channel aliases are duplicated: <ul>" + warningText.join("") + "</ul>";
            } else {
                // So the message is always uses the plural form, grab one less that expected (zero-based you already have to subtract -1, so it become -2)
                const firstDuplicates = warningText.slice(0, maxAliasErrorsToShow - 2);
                // Since you took -2 (an extra index) to form the array to display, you have to +1 to ensure you have the correct remaining duplicate warnings
                message += warningText.length + " channel aliases are duplicated: <ul>" + firstDuplicates.join("") + "</ul> <p>with " + (warningText.length + 1 - maxAliasErrorsToShow) + " more duplicated aliases not shown.</p>";
            }
            message += "<p>Duplicated channel aliases should be removed or the system may not properly function.</p>";
            displayWarningDialog(message);
        }
    }

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

        socket.onmessage = function (event) {
            console.log("Aliases - MSG: " + event.data);
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case DATABASE_TABLE:
                    handleDatabaseTableChange(msg, () => {
                        location.reload();
                    });
                    break;
                case CHANNEL_ALIAS_TABLE:
                    onAliasTableUpdate(msg);
                    updateChannelAliasSummary(true);
                    break;
                case CHANNEL_TABLE:
                    channelAliasGridOptions.api.purgeInfiniteCache();
                    break;
            }
        };

        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };

        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addWSDBListener();
            }, 1000);
        };
    }

    function getDuplicatesMap (channelAliasData) {
        let duplicatesMap = {};
        channelAliasGridOptions.api.forEachNode((node) => {
            if (node.data) {
                if (node.data.name) {
                    if (duplicatesMap[node.data.name]) {
                        duplicatesMap[node.data.name].push(node.data);
                    } else {
                        duplicatesMap[node.data.name] = [node.data];
                    }
                }
            }
        });
        if (channelAliasData) {
            let duplicateValue = duplicatesMap[channelAliasData.name];
            if (duplicateValue) {
                let singleDuplicate = {};
                singleDuplicate[channelAliasData.name] = duplicateValue;
                return singleDuplicate;
            } else {
                return {};
            }
        }
        return duplicatesMap;
    }

    function onCellValueChangedChannelAlias(event) {
        if (event.column.colId == "name") {
            if (event.newValue) {
                event.newValue = event.newValue.trim();
            } else {
                clearAliases();
                return;
            }
            if (checkForSpecialCharacters(event.newValue)) {
                displayErrorDialog(NameErrorMessage);
                channelAliasGridOptions.api.purgeInfiniteCache();
                return;
            }

            // Check that the new value will not duplicate another value
            const duplicates = getDuplicatesMap (event.data);
            if (duplicates[event.newValue].length > 1) {
                let channels = [];
                for (let i = 0; i < duplicates[event.newValue].length; i++) {
                    if (event.data.logicalEndId != duplicates[event.newValue][i].logicalEndId){
                        channels.push("<li>" + duplicates[event.newValue][i].logicalEndName + "</li>");
                    }
                }
                const message = "The following channel alias '" + event.newValue + "' is already used by the following " + ((channels.length > 1) ? channels.length + " channels" : "channel") + ": " + channels.join("") + "</ul><br/><p>Please type a new alias for the channel</p>"
                displayErrorDialog(message);
                channelAliasGridOptions.api.purgeInfiniteCache();
                return;
            }
        }

        // The backend will decide if the channel alias is being added/removed/updated
        event.data.aliasType = channelAliasType;
        displayDialog("LoadingModal");
        $.post("/alias/update", JSON.stringify([event.data]))
            .done(() => {
                hideDialog("LoadingModal");
                updateChannelAliasSummary(true);
            })
            .fail((err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            });
    }

    function onChannelAliasRowsSelectionChanged() {
        onAliasRowsSelectionChanged();
    }

    function onRowClickedChannelAlias() {
        isChannelAliasSelectedAll = false;
        isChannelAliasDeselectAll = false;
        updateChannelAliasSummary(false);
    }

    function pasteHandler() {
        let selRange = JSON.parse(sessionStorage.getItem("selRange"));
        if (selRange) {
            handlePaste("pasteNames", "Are you sure you want to copy/paste <br> the following aliases?")
        }
    }

    function onAliasTableUpdate(msg) {
        let filterModel = channelAliasGridOptions.api.getFilterModel();
        let keys = Object.keys(filterModel);
        if (keys.includes('name') || msg.operation === DELETE_OP) {
            channelAliasGridOptions.api.purgeInfiniteCache();
        } else if (msg?.rowIds.length > 0) {
            const urlParameters = [
                "aliasType=" + channelAliasType,
            ];
            $.ajax({
                url: "/alias/getRow?" + urlParameters.join('&'),
                type: "POST",
                contentType: "application/json",
                data: JSON.stringify({ ids: msg.rowIds }),
                success: (result) => {
                    updateAliasRows(result);
                    onAliasRowsSelectionChanged();
                    hideDialog("LoadingModal");
                    checkForInitialDuplicates();
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        }
    }

    function updateAliasRows(result) {
        let logicalEndIdList = [];
        for (let i = 0; i < result.length; i++) {
            logicalEndIdList.push(result[i].logicalEndId);
        }
        channelAliasGridOptions.api.forEachNode((node) => {
            if (node.data && logicalEndIdList.includes(node.data.logicalEndId)) {
                let nodeData = result[logicalEndIdList.indexOf(node.data.logicalEndId)];
                nodeData.logicalEndName = node.data.logicalEndName;
                node.setData(nodeData);
            }
        })
    }

    function handleSelectionAfterGetRows() {
        if (isChannelAliasSelectedAll) {
            selectAll();
        } else if (isChannelAliasDeselectAll) {
            deselectAllAliases();
        } else if (channelAliasGridOptions.api.getDisplayedRowAtIndex(0) && channelAliasGridOptions.api.getSelectedRows().length === 0 && isFirstPageLoad) {
            selectRow(0, 0, channelAliasGridOptions);
            isFirstPageLoad = false;
        }
        onAliasRowsSelectionChanged();
    }

    function selectAll() {
        isChannelAliasSelectedAll = true;
        isChannelAliasDeselectAll = false;
        const allRowCount = channelAliasGridOptions.api.getDisplayedRowCount();
        if (allRowCount > 0) {
            // Need to use the function 'selectAllRows' related to the rangeCellRenderer that this table uses rather than 'selectAllFiltered'
            selectAllRows(channelAliasGridOptions, allRowCount, lastId);
            onAliasRowsSelectionChanged();
            updateChannelAliasSummary(true);
        }
    }

    function deselectAllAliases() {
        isChannelAliasSelectedAll = false;
        isChannelAliasDeselectAll = true;
        let allRowCount = channelAliasGridOptions.api.getDisplayedRowCount();
        if(allRowCount > 0) {
            deselectCurRange(channelAliasGridOptions);
            onAliasRowsSelectionChanged();
            updateChannelAliasSummary(true);
        }
    }

    function setSelectAll(value) {
        if (value === true) {
            sessionStorage.setItem("isSelectAll", "true");
        } else {
            sessionStorage.removeItem("isSelectAll");
        }
    }

    function clearAliases() {
        const selRange = JSON.parse(sessionStorage.getItem("selRange"));
        let urlParameters = [
            "all=" + isChannelAliasSelectedAll,
            "filter=" + getFilterData(channelAliasGridOptions),
            "&aliasType=" + channelAliasType.toString()
        ];

        // Only need to include start and end row data if it is not a "Select All" type operation
        if (!isChannelAliasSelectedAll) {
            urlParameters.push(
                "startRowId=" + selRange.startRow,
                "endRowId=" + selRange.endRow
            );
        }
        displayDialog("LoadingModal");
        $.ajax({url: "/alias/clear?" + urlParameters.join("&"),
            success: () => {
                hideDialog("LoadingModal");
                updateChannelAliasSummary(true);
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function copyHandler() {
        const selRange = JSON.parse(sessionStorage.getItem("selRange"));
        let urlParameters = [
            "all=" + isChannelAliasSelectedAll,
            "filter=" + getFilterData(channelAliasGridOptions),
            "&aliasType=" + channelAliasType.toString()
        ];
        // Only need to include start and end row data if it is not a "Select All" type operation
        if (!isChannelAliasSelectedAll) {
            urlParameters.push(
                "startRowId=" + selRange.startRow,
                "endRowId=" + selRange.endRow
            );
        }
        $.ajax({
            url: "/alias/copy?" + urlParameters.join("&"),
            success: (result) => {
                copyToClipboard(result, null);
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function importAlias() {
        const validFileExtensions = ["xlsx"];
        const file = document.getElementById("myFile").files[0];
        const fileExtension = file.name.split('.').pop();
        if (!validFileExtensions.includes(fileExtension)) {
            displayWarningDialog("The import file is not Excel spreadsheet file. Acceptable file extensions are: " + validFileExtensions.join(", "));
            return;
        }
        displayProgressBar("Importing Channel Aliases", "Sending channel alias import operation to Ultrix", function (guid) {
            uploadFile(file, "/channelalias/import?" + getProgressBarURLParameter(guid), function (err) {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }, null);
        });
        hideDialog("importAliasModal");
    }

    function showExportAliasModal() {
        document.getElementById("filename").value = "";
        displayDialog('exportAliasModal');
    }

    function showImportAliasModal() {
        document.getElementById("myFile").value = "";

        // Updating the Export button on the Import dialog
        const exportButtonId = "channelAliasExportButton";
        const exportButton = $("#" + exportButtonId);
        if (exportButton) {
            $("#import-exportInstructions").html(exportButton.clone());
        } else {
            console.warn(arguments.callee + " - Unable to find Export Channel Alias button with id: " + exportButtonId);
        }

        displayDialog('importAliasModal');
    }

    function downloadChAlias() {
        hideDialog("exportAliasModal");
        displayProgressBar("Exporting Channel Aliases", "Sending Channel Alias Export operation to Ultrix", function(guid) {
            const urlParameters = [
                getProgressBarURLParameter(guid),
                "filename=" + document.getElementById("filename").value
            ];
            downloadFile("/channelalias/export?" + urlParameters.join("&"), false);
        }, false);
    }

    function onAliasRowsSelectionChanged() {
        let aliasTypeStr = channelAliasTypeName;
        const selectedRows = channelAliasGridOptions.api.getSelectedRows();
        let selRange = JSON.parse(sessionStorage.getItem("selRange"));
        sessionStorage.setItem(aliasTypeStr + "AliasIds", JSON.stringify(selectedRows.map(node => node.id)));
        sessionStorage.setItem(aliasTypeStr + "AliasLogicalEndIds", JSON.stringify(selectedRows.map(node => node.logicalEndId)));

        if (selRange) {
            enableUiButton(aliasTypeStr + "AliasRename");
            enableUiButton(aliasTypeStr + "AliasRenameMenu");
            enableUiButton(aliasTypeStr + "AliasDeselect");
            enableUiButton(aliasTypeStr + "AliasDeselectMenu");
            enableUiButton(aliasTypeStr + "AliasClear");
            enableUiButton(aliasTypeStr + "AliasClearMenu");
        } else {
            disableUiButton(aliasTypeStr + "AliasRename");
            disableUiButton(aliasTypeStr + "AliasRenameMenu");
            disableUiButton(aliasTypeStr + "AliasDeselect");
            disableUiButton(aliasTypeStr + "AliasDeselectMenu");
            disableUiButton(aliasTypeStr + "AliasClear");
            disableUiButton(aliasTypeStr + "AliasClearMenu");
        }
        if (channelAliasGridOptions.api.getDisplayedRowCount() == 0) {
            disableUiButton(aliasTypeStr + "AliasSelect");
            disableUiButton(aliasTypeStr + "AliasSelectMenu");
        } else {
            enableUiButton(aliasTypeStr + "AliasSelect");
            enableUiButton(aliasTypeStr + "AliasSelectMenu");
        }
        updateChannelAliasSummary(false);
    }

    function showRenameAliasesPreview() {
        let aliasTypeStr = channelAliasTypeName;
        let prefix = document.getElementById(aliasTypeStr + "RenameAliasPrefix").value;
        let start = document.getElementById(aliasTypeStr + "RenameStartCount").value;
        let AliasesToRename;
        if(!isChannelAliasSelectedAll) {
            let ids = JSON.parse(sessionStorage.getItem(aliasTypeStr + 'AliasIds'));
            if (ids.length > 1) {
                let end = Number(start) + Number(ids.length) - 1;
                AliasesToRename = prefix + start + ", ... " + prefix + end;
            } else {
                AliasesToRename = prefix + start;
            }
        } else {
            let allRowCount = channelAliasGridOptions.api.getDisplayedRowCount();
            let end = Number(start) + Number(allRowCount) - 1;
            AliasesToRename = prefix + start + ", ... " + prefix + end;
        }
        document.getElementById(aliasTypeStr + "AliasesToRename").placeholder = AliasesToRename;
        displayDialog(aliasTypeStr + "RenameAliasesModal");
    }

    function renameAliases(){
        let prefix = document.getElementById(channelAliasTypeName + 'RenameAliasPrefix').value;
        if (!validateString(prefix)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }

        const selRange = JSON.parse(sessionStorage.getItem("selRange"));
        const urlParameters = [
            "prefix=" + encodeURIComponent(prefix),
            "all=" + isChannelAliasSelectedAll,
            "filter=" + getFilterData(channelAliasGridOptions),
            "startCount=" + document.getElementById(channelAliasTypeName + 'RenameStartCount').value,
        ];

        // Only need to include start and end row data if it is not a "Select All" type operation
        if (!isChannelAliasSelectedAll) {
            urlParameters.push(
                "startRowId=" + selRange.startRow,
                "endRowId=" + selRange.endRow,
            );
        }

        displayDialog("LoadingModal");
        $.ajax({url: "/channelalias/rename?" + urlParameters.join("&"),
            success: () => {
                // Removal of the LoadingModal is handled when the table gets reloaded by the websocket update
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
        hideDialog(channelAliasTypeName + "RenameAliasesModal");
    }

    function pasteNames() {
        const rawText = document.getElementById('copyPasteText').value;
        const names = rawText.trim().split("\n");

        for (let i = 0; i < names.length; i++) {
            if (!validateString(names[i])) {
                displayErrorDialog(NameErrorMessage);
                return;
            }

            let testObject = {name: names[i]};
            let duplicates = getDuplicatesMap(testObject);
            if ((duplicates[names[i]]) && (duplicates[names[i]].length > 0)) {
                const message = "The following channel alias '" + names[i] + "' is already used by " + duplicates[names[i]][0].logicalEndName + ".  The system will not properly function if there are duplicate channel aliases.";
                displayErrorDialog(message);
                channelAliasGridOptions.api.purgeInfiniteCache();
                return;
            }
        }

        displayDialog("loadingModal");
        hideDialog("copyPasteModal");
        const selRange = JSON.parse(sessionStorage.getItem("selRange"));

        let urlParameters = [
            "all=" + isChannelAliasSelectedAll,
            "filter=" + getFilterData(channelAliasGridOptions),
            "aliasType=" + channelAliasType.toString(),
        ];

        // Only need to include start and end row data if it is not a "Select All" type operation
        if (!isChannelAliasSelectedAll) {
            urlParameters.push(
                "startRowId=" + selRange.startRow,
                "endRowId=" + selRange.endRow
            );
        }
        //  TODO: We should not be mixing url variables with a request body
        $.post("/alias/paste?" + urlParameters.join("&"), JSON.stringify({clipboard: names}))
            .done((response) => {
                if (response) {
                    hideLoadingModal();
                }
            })
            .fail((err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            });
    }

    function getFilterData(gridOptions) {
        let filterData = {};
        let filterModel = gridOptions.api.getFilterModel();
        let keys = Object.keys(filterModel);
        for(let i = 0; i < keys.length; i++) {
            filterData[keys[i]] = filterModel[keys[i]].filter;
        }
        return JSON.stringify(filterData);
    }

    function updateImportExamples() {
        const examplesCount = 2;
        const filterData = {
            aliasType : {
                filterType: "multi",
                filterModels: [ {filterType: "number", "type" :"contains", filter: channelAliasType.toString()} ]
            }
        };
        $.post("/alias/getRows", JSON.stringify({"startRow": 0,"endRow": examplesCount, "filterModel": filterData}))
            .done((result) => {
                for (let i = 0; i < Math.min(result.data.length, examplesCount); i++) {
                    $("#import-alias-name-" + i).html(result.data[i].logicalEndName);
                }
            })
            .fail((err) => {
                // Only display the error in the console as this the success of this function is not necessary
                // for the UI to operate properly
                console.error(err.responseText);
            });
    }
</script>

<div class="row" style="height: 100%;">
    <div  style="display:flex; flex-direction:column; min-height:100%; width:100%;">
    <nav class="navbar navbar-expand">
        <div class="container-fluid">
            <ul class="navbar-nav me-auto">
                <li class="nav-item dropdown">
                    <button onclick="" class="btn btn-nav-icon" id="matrixMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="matrixMenuImage"></i></button>
                    <ul class="dropdown-menu dropdown-menu-nav">
                        <li><hr class="dropdown-item-divider" /></li>
                        <li class="dropdown-item dropdown-item-nav">
                            <button onclick="selectAll()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="channelAliasSelectMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-select-rows-disabled" id="channelAliasSelectMenuImg"></i>Select All</button>
                        </li>
                        <li><div class="dropdown-item-divider"></div></li>
                        <li class="dropdown-item dropdown-item-nav">
                            <button onclick="deselectAllAliases()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="channelAliasDeselectMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="channelAliasDeselectMenuImg"></i>Deselect All</button>
                        </li>
                        <li><div class="dropdown-item-divider"></div></li>
                        <li class="dropdown-item dropdown-item-nav">
                            <button onclick="showRenameAliasesPreview()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="channelAliasRenameMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-rename-disabled" id="channelAliasRenameMenuImg"></i>Rename</button>
                        </li>
                        <li><div class="dropdown-item-divider"></div></li>
                        <li class="dropdown-item dropdown-item-nav">
                            <button onclick="displayConfirmationDialog('Are you sure you would like to clear the selected aliases?', 'Apply', 'clearAliases();')" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="channelAliasClearMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-clear-disabled" id="channelAliasClearMenuImg"></i>Clear</button>
                        </li>
                        <li><div class="dropdown-section-divider"></div></li>
                        <li class="dropdown-item dropdown-item-nav">
                            <button onclick="showImportAliasModal();" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="channelAliasImportMenuButton"><i class="icon-btn-nav-menu icon-plain icon-import" id="channelAliasImportMenuImg"></i>Import</button>
                        </li>
                        <li><div class="dropdown-item-divider"></div></li>
                        <li class="dropdown-item dropdown-item-nav">
                            <button onclick="showExportAliasModal()" class="dropdown-item dropdown-item-nav btn-item-text-nav" id="channelAliasExportMenuButton"><i class="icon-btn-nav-menu icon-plain icon-export" id="channelAliasExportMenuImg"></i>Export</button>
                        </li>
                        <li><hr class="dropdown-item-divider" /></li>
                    </ul>
                </li>
                <li>
                    <span><i class="icon-separator"></i></span>
                </li>
                <li>
                    <button onclick="selectAll()" class="btn btn-nav-icon" id="channelAliasSelectButton" data-toggle="tooltip" data-placement="bottom" title="Select All" disabled><i class="icon-btn icon-select-rows-disabled" id="channelAliasSelectImg"></i></button>
                </li>
                <li>
                    <button onclick="deselectAllAliases()" class="btn btn-nav-icon" id="channelAliasDeselectButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All" disabled><i class="icon-btn icon-deselect-rows-disabled" id="channelAliasDeselectImg"></i></button>
                </li>
                <li>
                    <button onclick="showRenameAliasesPreview()" class="btn btn-nav-icon" id="channelAliasRenameButton" data-toggle="tooltip" data-placement="bottom" title="Rename" disabled><i class="icon-btn icon-rename-disabled" id="channelAliasRenameImg"></i></button>
                </li>
                <li>
                    <button onclick="displayConfirmationDialog('Are you sure you would like to clear the selected aliases?', 'Apply', 'clearAliases();')" class="btn btn-nav-icon" id="channelAliasClearButton" data-toggle="tooltip" data-placement="bottom" title="Clear" disabled><i class="icon-btn icon-clear-disabled" id="channelAliasClearImg"></i></button>
                </li>
                <li>
                    <span><i class="icon-separator"></i></span>
                </li>
                <li>
                    <button onclick="showImportAliasModal();" class="btn btn-nav-icon" id="channelAliasImportButton" data-toggle="tooltip" data-placement="bottom" title="Import"><i class="icon-btn icon-import" id="channelAliasImportImg"></i></button>
                </li>
                <li>
                    <button onclick="showExportAliasModal()" class="btn btn-nav-icon" id="channelAliasExportButton" data-toggle="tooltip" data-placement="bottom" title="Export"><i class="icon-btn icon-export" id="channelAliasExportImg"></i></button>
                </li>
            </ul>
            </div>
        </nav>
        <div class="grid-wrapper" id="channelaliaseditortable"
             style="flex:1 1 auto; min-height:0; margin:0; padding:0;">
            <div id="channelAliasGrid" class="ag-theme-balham-dark" style="height:100%;"></div>
        </div>
    </div>
</div>

<div id="channelAliasSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
  <span class="grid-summary-item">
    <span class="col-data-label">Channels:</span>
    <span id="chAliasSummaryTotalValue" class="form-control" aria-label="Channels value">0</span>
  </span>
    <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
  <span class="grid-summary-item">
    <span class="col-data-label">Selected:</span>
    <span id="chAliasSummarySelectedValue" class="form-control" aria-label="Selected value">0</span>
  </span>
</div>

<!-- Import Alias modal-->
<div class="modal" id="importAliasModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog"
     aria-labelledby="importDeviceModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-import-alias-size">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="importAliasModalTitle"><i class="icon-import icon-white"></i>Import Channel Alias Spreadsheet</span>
                <span class="btn btn-transparent" onclick="hideDialog('importAliasModal');"><i class="icon-close-header"></i></span>
            </div>K
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-input">
                            <input type="file" class="form-control rounded-0 name-size" tabindex="0" name="myFile" id="myFile" required />
                        </td>
                    </tr>
                </table>
                <div class="container-data">
                    <p>
                        Please note the following conditions for successful import of data:
                        <ul>
                            <li>Ensure that the file being uploaded is not open on your client machine.</li>
                            <li>The imported file needs to have two columns with headers <b>Name</b> and <b>Alias</b> like in the example below:</li>
                        </ul>
                        <table class="import-table-example" style="">
                            <tr>
                                <th> Name </th>
                                <th> Alias </th>
                                <th> &nbsp; </th>
                            </tr>
                            <tr>
                                <!-- These two examples actually get renamed on page load to what is actually in the system -->
                                <td id="import-alias-name-0">Ultrix.slot1.in[1].sdi.ch1</td>
                                <td>Your Channel Alias Here</td>
                                <td> &nbsp; </td>
                            </tr>
                            <tr>
                                <td id="import-alias-name-1">Ultrix.slot1.in[1].audio.ch1</td>
                                <td>Another Channel Alias Here</td>
                                <td> &nbsp; </td>
                            </tr>
                            <tr>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                                <td> &nbsp; </td>
                            </tr>
                        </table>
                        </p>
                        <p>The import operation will match channels in the <b>Name</b> column in both the table on the page and the imported spreadsheet.</p>
                        <p>The sheet containing the list <u>MUST</u> be named <b>Channel Aliases</b>.  The easiest way to ensure that the format for importing is correct is to follow the process below:
                        <ol>
                            <li>Export the list of channel aliases using the Export button <span id="import-exportInstructions"></span></li>
                            <li>Open the downloaded <em>.xlsx</em> file and edit the channel aliases under the <b>Alias</b> column and save the changes.</li>
                            <li>Import the recently saved file which will be in the correct format.</li>
                        </ol>
                    </p>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('importAliasModal');">Cancel</button>
                <button class="btn btn-text" type="submit" tabindex="1" onclick="importAlias()" >Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Export Alias modal-->
<div class="modal" id="exportAliasModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exportAliasModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-export-alias-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="exportAliasModalTitle"><i class="icon-export icon-white"></i>Export Channel Alias Spreadsheet</span>
                <span class="btn btn-transparent" onclick="hideDialog('exportAliasModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label">Spreadsheet Name:</td>
                        <td class="col-data-input">
                            <input tabindex="0" class="form-control rounded-0 name-size" name="filename" id="filename" required>
                        </td>
                    </tr>
                </table>
                <div class="container-data">
                    <p>Note: This action will export the unfiltered channel alias table on a single sheet in an <em>.xlsx</em> file.</p>
                </div>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary"  tabindex="2" onclick="hideDialog('exportAliasModal');">Cancel</button>
                    <div id="exportAliasButton">
                        <button class="btn btn-text" type="submit" tabindex="1" onclick="downloadChAlias();">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="channelRenameAliasesModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="channelRenameAliasesModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-rename-channel-alias">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="renameChannelAliasesLabel"><i class="icon-rename icon-white"></i>Rename Channels Aliases</span>
                <span class="btn btn-transparent" onclick="hideDialog('channelRenameAliasesModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label">Name (prefix):</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" tabindex="0" name="channelRenameAliasPrefix" id="channelRenameAliasPrefix" onpropertychange="showRenameAliasesPreview()" oninput="showRenameAliasesPreview()"/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Start Count:</td>
                        <td class="col-data-input"><span class="number-wrapper"><input type="number" class="form-control rounded-0 start-count-size" tabindex="1" name="channelRenameStartCount" id="channelRenameStartCount" value="1" onpropertychange="showRenameAliasesPreview()" oninput="showRenameAliasesPreview()"/></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Preview:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 preview-size-rename read-only" tabindex="2" name="channelAliasesToRename" placeholder="1" id="channelAliasesToRename" readonly/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('channelRenameAliasesModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="3" onclick="renameAliases()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--
This text area is hidden off-screen and used for handling the copy and paste operations.  Could not use the appendChild/removeChild
methodology because it would cause the body of the page to shift upwards due to the newly appended child and removal would not
reset the positioning of the body for this specific page only
-->
<textarea id="copyPasteArea" style="opacity: 0; position: absolute; top: -5em"></textarea>

{{ template "copyPaste" . }}

{{ template "progressbar" . }}

{{ template "uploadFile" . }}

{{ end }}