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

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

<script type="text/javascript" charset="utf-8">
    let uiidBase = 0;
    const objectTypeName = "Alias Set";
    // This MUST match enum AliasType in dataservice.proto
    const aliasTypes = {
        CHANNEL: 0,
        SOURCE: 1,
        DESTINATION: 2,
        SERVICE: 50     // This is a unique but arbitrary number because this enum value does not exist in the dataservice.proto file but is needed for the GUI
    };

    const sessionKeys = {
        ALIAS_TYPE: "aliasType",
        LOCAL_CHANGE: "localChange",
        LAST_TABLE: "lastTable"
    };

    const aliasTypeNames = new Map([
        [aliasTypes.SOURCE, "source"],
        [aliasTypes.DESTINATION, "destination"],
    ]);

    const maximumAliasSetCount = 16;

    const aliasSetColumnDefs = [
        {field: "id", headerName: "ID", hide: true},
        {field: "uiid", headerName: "ID",  suppressMovable: true, editable: true, filter: true, maxWidth: 75, hide: false,
            getQuickFilterText: () => '',
            valueSetter: (params) => {
                if (params.newValue === "" || !isWholeNumber(params.newValue)) {
                    displayErrorDialog(IdWholeErrorMessage);
                    return false;
                }
                let duplicate = false;
                aliasGridOptions.api.forEachNode((node) => {
                    if (node.data.id != params.data.id && node.data.uiid == params.newValue) {
                        duplicate = true;
                    }
                });
                if (duplicate) {
                    displayErrorDialog("Alias Set ID " + params.newValue + " is already in use.  Please select another number.");
                    return false;
                }
                params.data.uiid = params.newValue;
                return true;
            }
        },
        {field: "name", suppressMovable: true, editable: true, filter: true, filterParams: singleFilterCondition, comparator: naturalSort},
        {field: "description", suppressMovable: true, editable: true, filter: true, filterParams: singleFilterCondition},
    ];

    const aliasColumnDefs = [
        {field: "logicalEndName", colId: "logicalEndName", headerName: "Name", suppressMovable: true, comparator: naturalSort, filter: true, filterParams: singleFilterCondition, editable: false,
            valueSetter: (params) => { return (params.value) ? params.value : ""; }
        },
        {field: "id", colId: "id", hide: true},
        {field: "name", colId: "name", headerName: "Alias", suppressMovable: true, filter: true, filterParams: singleFilterCondition, editable: true, comparator: naturalSort},
        {field: "logicalEndId", colId: "logicalEndId", hide: true, editable: false},
        {field: "aliasSetId", colId: "aliasSetId", hide: true},
    ];

    const aliasGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex: 1,
        },
        columnDefs: aliasSetColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        onCellValueChanged: onCellValueChangedAliasSet,
        stopEditingWhenCellsLoseFocus: true,
        onSelectionChanged: onAliasSetSelectionChanged,
        onCellClicked: () => {
            sessionStorage.setItem(sessionKeys.LAST_TABLE, "aliasset")
        },
    };

    function getAliasType() {
        // sessionStorage does not save the value as a number, it saves it as a string, so it has to be converted to be useful
        return Number(sessionStorage.getItem(sessionKeys.ALIAS_TYPE));
    }

    function countNonEmptyAliasesByApi(api) {
        if (!api || !api.getModel) return 0;
        const rows = api.getModel().rowsToDisplay || [];
        let n = 0;
        for (let i = 0; i < rows.length; i++) {
            const d = rows[i]?.data;
            const v = d?.name;
            if (v && String(v).trim().length) n++;
        }
        return n;
    }

    function updateAliasSummaryBar() {
        const sets = aliasGridOptions?.api?.getDisplayedRowCount?.() || 0;

        const srcApi = (typeof sourceAliasGridOptions !== "undefined")
            ? sourceAliasGridOptions.api
            : null;

        const dstApi = (typeof destinationAliasGridOptions !== "undefined")
            ? destinationAliasGridOptions.api
            : null;

        const srcAli = countNonEmptyAliasesByApi(srcApi);
        const dstAli = countNonEmptyAliasesByApi(dstApi);

        const elSets = document.getElementById("aliasSummarySetsValue");
        const elSrc  = document.getElementById("aliasSummarySourcesValue");
        const elDst  = document.getElementById("aliasSummaryDestinationsValue");

        if (elSets) elSets.textContent = String(sets);
        if (elSrc)  elSrc.textContent  = String(srcAli);
        if (elDst)  elDst.textContent  = String(dstAli);
    }

    function hookAliasSummaryListeners() {
        function wireGrid(go) {
            if (!go || !go.api || typeof go.api.addEventListener !== 'function') return;

            ['modelUpdated', 'filterChanged', 'rowDataChanged', 'rowDataUpdated', 'cellValueChanged']
                .forEach(ev => {
                    go.api.addEventListener(ev, updateAliasSummaryBar);
                });
        }

        wireGrid(aliasGridOptions);
        wireGrid(sourceAliasGridOptions);
        wireGrid(destinationAliasGridOptions);
    }

    //init table datasource once DOM content is loaded
    document.addEventListener('DOMContentLoaded', function () {
        const tableData = [
            {divId: "aliasGrid", table: aliasGridOptions},
            {divId: "sourceAliasGrid", table: sourceAliasGridOptions},
            {divId: "destinationAliasGrid", table: destinationAliasGridOptions},
        ];
        for (let i = 0; i < tableData.length; i++) {
            let gridDiv = document.querySelector("#" + tableData[i].divId);
            document.getElementById(tableData[i].divId).ag_grid = new agGrid.Grid(gridDiv, tableData[i].table);
        }
        hookAliasSummaryListeners();
        resetAliasTable(true);

        addWSDBListener();
        document.addEventListener('keydown', function (event) {
            if (event.ctrlKey && event.key == "v") {
                pasteHandler();
            } else if (event.ctrlKey && event.key == "c") {
                copyHandler();
            }
        });

        $("#settings-tab-sources").click(); // Simulate that the first tab is opened
        window.addEventListener(DBMODE_TABLE, handleAliasModeChange);
        getUIIDBaseSetting(updateUiIdBase);
    });

    function selectFirstAliasSet() {
        aliasGridOptions.api.forEachNode((node) => {
            node.setSelected(node.rowIndex == 0);
        });
    }

    function resetAliasTable (selectFirstAliasRow) {
        fetch('/aliasset/agdata')
            .then((response) => response.json())
            .then((data) => {
                data.sort(function (a, b) {
                    return a.uiid - b.uiid;
                });

                aliasGridOptions.api.setRowData(data);
                if (selectFirstAliasRow) {
                    selectFirstAliasSet();
                } else {
                    let localAliasAdd = sessionStorage.getItem(sessionKeys.LOCAL_CHANGE);
                    if (localAliasAdd) {
                        selectAliasSetByName(decodeURIComponent(localAliasAdd));
                    }
                }

                const selectedAliasSet = aliasGridOptions.api.getSelectedRows();
                if ((selectedAliasSet.length > 0) && (selectedAliasSet[0].id > 0)) {
                    getLogicalEndAliasData(aliasTypes.DESTINATION, selectedAliasSet[0].id, destinationAliasGridOptions, true);
                    getLogicalEndAliasData(aliasTypes.SOURCE, selectedAliasSet[0].id, sourceAliasGridOptions, true);
                } else {
                    destinationAliasGridOptions.api.setRowData([]);
                    sourceAliasGridOptions.api.setRowData([]);
                }

                updateAliasSetToolbarButtons();
                hideDialog("LoadingModal");
            });
    }

    function onCellValueChangedAliasSet(event) {
        switch (event.column.colId) {
            case "name":
                if (event.source == "cellClear") {
                    // TODO: UR-10491 should ask to trigger a delete functionality here
                    resetAliasTable(false);
                    return;
                } else {
                    if (!event.newValue) {
                        return;
                    }
                    event.newValue = event.newValue.trim();
                    if (!validateString(event.newValue)) {
                        displayErrorDialog(NameErrorMessage);
                        resetAliasTable(false);
                        return;
                    }
                    const nameDuplicates = checkForDuplicateNames([event.newValue], getUnselectedAliasSets());
                    if (nameDuplicates.length > 0) {
                        displayErrorDialog(getDuplicateNamesError(nameDuplicates[0], objectTypeName, event.data.uiid));
                        resetAliasTable(false);
                        return;
                    }
                }
                break;
        }
        if (event.data.name.length > 0) {
            updateAliasSet(event.data);
        }
    }

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

        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            const selectedAliasSet = aliasGridOptions.api.getSelectedRows();
            switch (msg.table) {
                case ALIAS_SET_TABLE:
                    resetAliasTable(false);
                    updateServicesAliasSetDetails();
                    break;
                case DATABASE_TABLE:
                    handleDatabaseTableChange(msg, () => {
                        location.reload();
                    });
                    break;
                case SOURCE_TABLE:
                    if (selectedAliasSet.length > 0) {
                        getLogicalEndAliasData(aliasTypes.SOURCE, selectedAliasSet[0].id, sourceAliasGridOptions, false);
                    }
                    break;
                case SOURCE_ALIAS_TABLE:
                    if (selectedAliasSet.length > 0) {
                        switch (msg.operation) {
                            case INSERT_OP:
                            case UPDATE_OP:
                                updateSpecificLogicalEndAliases(aliasTypes.SOURCE, selectedAliasSet[0].id, msg.rowIds);
                                break;
                            default:
                                getLogicalEndAliasData(aliasTypes.SOURCE, selectedAliasSet[0].id, sourceAliasGridOptions, false);
                                break;
                        }
                        updateAliasSummaryBar();
                    }
                    break;
                case DESTINATION_TABLE:
                    if (selectedAliasSet.length > 0) {
                        getLogicalEndAliasData(aliasTypes.DESTINATION, selectedAliasSet[0].id, destinationAliasGridOptions, false);
                    }
                    break;
                case DESTINATION_ALIAS_TABLE:
                    if (selectedAliasSet.length > 0) {
                        switch (msg.operation) {
                            case INSERT_OP:
                            case UPDATE_OP:
                                updateSpecificLogicalEndAliases(aliasTypes.DESTINATION, selectedAliasSet[0].id, msg.rowIds);
                                break;
                            default:
                                getLogicalEndAliasData(aliasTypes.DESTINATION, selectedAliasSet[0].id, destinationAliasGridOptions, false);
                                break;
                        }
                        updateAliasSummaryBar();
                    }
                    break;
                case SERVICE_ALIAS_TABLE:
                    setNewServiceAliasUIID (msg.rowIds[0]); // The first element of the array will be the new UIID of the Service Alias Set
                    break;
                case UIID_BASE_NUMBER:
                    getUIIDBaseSetting(updateUiIdBase);
                    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);
        };
    }

    async function copyHandler() {
        const lastTable = sessionStorage.getItem(sessionKeys.LAST_TABLE);
        if (!lastTable) {
            // Regular copy behaviour
            return;
        }

        switch(lastTable) {
            case aliasTypeNames.get(aliasTypes.SOURCE):
            case aliasTypeNames.get(aliasTypes.DESTINATION):
                const aliasTable = getAliasTable();
                const cellsBeingEdited = aliasTable.api.getEditingCells();
                // If the cell itself is being edited, then use the default OS copy behaviour, but if the cell is just selected, copy what is in the cell
                if (cellsBeingEdited.length == 0) {
                    const logicalEndsSelected = getSelectedLogicalAliases();
                    let names = [];
                    for (let i = 0; i < logicalEndsSelected.length; i++) {
                        names.push(logicalEndsSelected[i].name);
                    }
                    // For whatever CSS reason, when the user hits CTRL+C to copy, The entire body moves
                    // upwards about 20px when creating the standard copy area, so we create a specific
                    // area just for this page where the problem exists
                    copyToClipboard(names.join("\n"), "copyPasteArea");
                }
                return;
        }
    }

    function pasteHandler() {
        const lastTable = sessionStorage.getItem(sessionKeys.LAST_TABLE);
        if (!lastTable) {
            // Regular paste behaviour
            return;
        }

        switch(lastTable) {
            case aliasTypeNames.get(aliasTypes.SOURCE):
            case aliasTypeNames.get(aliasTypes.DESTINATION):
                if (getAliasTable()) {
                    handlePaste("pasteNames", "Are you sure you want to copy/paste <br> the following aliases?");
                }
                return;
        }
    }

    function removeAliasCheck() {
        const selectedData = aliasGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            // TODO: UR-12398: When we have proper notifications, we won't have to fetch the latest Service Alias Set selected which will simplify this process
            let updateServiceAliasSetPromise = new Promise((resolve, reject) => {
                getServicesAliasSetUiid();
                resolve();
            });
            updateServiceAliasSetPromise.then(() => {
                const currentServiceAliasSetUIID = sessionStorage.getItem(serviceAliasSessionKeys.SERVICE_ALIAS_SET);
                displayDialog((currentServiceAliasSetUIID == selectedData[0].uiid) ? "removeServiceAliasAndAliasModal" : "removeAliasModal");
            });
        } else {
            displayWarningDialog("Please select an alias to delete.");
        }
    }

    function removeSelectedAliasSet() {
        const selectedData = aliasGridOptions.api.getSelectedRows();
        hideDialog('removeAliasModal');
        displayDialog("LoadingModal");
        $.ajax({
            url: "/aliasset/remove?id="+selectedData[0].id,
            success: () => {
                destinationAliasGridOptions.api.setRowData([]);
                sourceAliasGridOptions.api.setRowData([]);
            },
            error: (err) => {
                displayErrorDialog(err.responseText);
            }
        });
    }

    function updateAliasSetToolbarButtons() {
        const addButtonId = "addAlias";
        const addButtonIdMenu = "addAliasMenu";
        const duplicateButtonId = "duplicateAlias";
        const duplicateButtonIdMenu = "duplicateAliasMenu";
        const deletButtonId = "deleteAlias";
        const deletButtonIdMenu = "deleteAliasMenu";

        if (dbMode == DBMode_Protect) {
            disableButtonIds([addButtonId, addButtonIdMenu, duplicateButtonId, duplicateButtonIdMenu, deletButtonId, deletButtonIdMenu]);
            return;
        }
        const aliasSetCount = aliasGridOptions.api.getDisplayedRowCount();
        const selectedRowsCount = aliasGridOptions.api.getSelectedRows().length;

        if (aliasSetCount == 0) {
            enableButtonIds([addButtonId, addButtonIdMenu]);
            disableButtonIds([duplicateButtonId, duplicateButtonIdMenu, deletButtonId, deletButtonId]);
        } else if (aliasSetCount >= maximumAliasSetCount) {
            disableButtonIds([addButtonId, addButtonIdMenu, duplicateButtonId, duplicateButtonIdMenu, deletButtonId, deletButtonIdMenu]);
            if (selectedRowsCount > 0) {
                enableButtonIds([deletButtonId, deletButtonIdMenu]);
            }
        } else {
            enableButtonIds([addButtonId, addButtonIdMenu]);
            if (selectedRowsCount > 0) {
                enableButtonIds([deletButtonId, deletButtonIdMenu, duplicateButtonId, duplicateButtonIdMenu]);
            } else {
                disableButtonIds([deletButtonId,  deletButtonIdMenu, duplicateButtonId, duplicateButtonIdMenu]);
            }
        }
    }

    function onAliasSetSelectionChanged() {
        const selectedRows = aliasGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            document.getElementById("sources").style.display = "";
            document.getElementById("destinations").style.display = "";
            getLogicalEndAliasData(aliasTypes.SOURCE, selectedRows[0].id, sourceAliasGridOptions, true);
            getLogicalEndAliasData(aliasTypes.DESTINATION, selectedRows[0].id, destinationAliasGridOptions, true);
        } else {
            document.getElementById("sources").style.display = "none";
            document.getElementById("destinations").style.display = "none";
        }
        if (dbMode == DBMode_Protect) {
            disableButtonIds(["applyServicesAlias", "clearServicesAlias"]);
        }
        updateAliasSetToolbarButtons();
        updateServiceAliasSetToolbarButtons();
        updateAliasSummaryBar();
    }

    // Duplicates the selected alias sets
    function duplicateAliasSets() {
        const selectedData = aliasGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            let errors = [];
            if (aliasGridOptions.api.getDisplayedRowCount() >= maximumAliasSetCount) {
                errors.push(displayErrorDialog(AliasSetCountMessage));
            }
            let name = document.getElementById("duplicateName").value;
            name = name.trim();
            if (!validateString(name)) {
                errors.push(NameErrorMessage);
            }

            aliasGridOptions.api.forEachNode((node) => {
                if(node.data.name == name) {
                    errors.push(getDuplicateNamesError(name, objectTypeName, node.data.uiid));
                }
            });

            if (errors.length > 0) {
                displayErrorMessagesDialog("The following errors must be resolved in order to duplicate the alias set", errors);
                return;
            }

            const urlParameters = [
                "aliasSetId=" + selectedData[0].id,
                "name=" + encodeURIComponent(name)
            ];
            hideDialog('duplicateAliasModal');
            displayDialog("LoadingModal");
            $.ajax({
                url: "/aliasset/duplicate?"+urlParameters.join("&"),
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        } else {
            displayWarningDialog("Please select an alias set to duplicate.");
        }
    }

    function logicalEndAliasChange(event) {
        const aliasType = getAliasType();
        const logicalEndAliasTable = getAliasTable();
        if (!logicalEndAliasTable) {
            console.warn(arguments.callee.name + " - Unable to get alias table for " + aliasTypeNames.get(aliasType)+ "s");
            return;
        }

        if (event.data.name) {
            event.data.name = event.data.name.trim();
            if (event.data.name.length > 0) {
                if (checkForSpecialCharacters(event.data.name)) {
                    displayErrorDialog(NameErrorMessage);
                    getLogicalEndAliasData(aliasType, event.data.aliasSetId, logicalEndAliasTable, false);
                    return;
                }
            }
        } else {
            event.data.name = "";
        }

        event.data.aliasSetId = aliasGridOptions.api.getSelectedRows()[0].id; // This data in the event.data object is incorrect so we have to overwrite it
        event.data.aliasType = aliasType;
        updateAliases([event.data]);
        updateAliasSummaryBar();
    }

    function selectAllAliases() {
        const aliasTable = getAliasTable();
        if (aliasTable) {
            aliasTable.api.selectAllFiltered();
        }
    }

    function deselectAllAliases() {
        const aliasTable = getAliasTable();
        if (aliasTable) {
            aliasTable.api.deselectAll();
        }
    }

    function resetLogicalAliasTableSelection(gridOptions) {
        const aliasTable = gridOptions || getAliasTable();
        if (aliasTable) {
            aliasTable.api.forEachNode((node) => {
                node.setSelected(node.rowIndex == 0);
            });
        }
    }

    function importAlias() {
        const validFileExtensions = ["xlsx"]; // In case we want to support more file extensions later on
        const file = document.getElementById("myFile").files[0];
        let fileExtension = file.name.split('.').pop();
        if (!validFileExtensions.includes(fileExtension)) {
            displayWarningDialog("The import file is not excel file. Acceptable file extensions are: " + validFileExtensions.join(", "));
            return;
        }

        displayProgressBar("Importing Source and Destination Aliases", "Sending source and destination alias import operation to Ultrix", function (guid) {
            const urlParameters = [
                getProgressBarURLParameter(guid),
                "aliasSetId=" + aliasGridOptions.api.getSelectedRows()[0].id
            ];
            uploadFile(file, "/alias/import?" + urlParameters.join("&"), 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 = "destinationAliasExportButton"; // Could be sourceAliasExportButton but they do the same thing
        const exportButton = $("#" + exportButtonId);
        if (exportButton) {
            $("#import-exportInstructions").html(exportButton.clone());
        } else {
            console.warn(arguments.callee + " - Unable to find Export Source/Destination Alias button with id: " + exportButtonId);
        }

        displayDialog('importAliasModal');
    }

    function downloadAlias() {
        hideDialog("exportAliasModal");
        displayProgressBar("Exporting Aliases", "Sending Alias Export operation to Ultrix", function(guid) {
            const urlParameters = [
                getProgressBarURLParameter(guid),
                "filename=" + document.getElementById("filename").value,
                "aliasSetId=" + aliasGridOptions.api.getSelectedRows()[0].id
            ];
            downloadFile("/alias/export?" + urlParameters.join("&"), false);
        });
    }

    function updateAliasButtonToolbar() {
        const aliasType = getAliasType();
        switch(aliasType) {
            case aliasTypes.SOURCE:
            case aliasTypes.DESTINATION:
                const aliasTypeStr = aliasTypeNames.get(aliasType);
                const selectedItemsIds = getSelectedLogicalAliases();
                if (selectedItemsIds.length > 0) {
                    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");
                }

                const aliasTable = getAliasTable();
                if (aliasTable) {
                    if (aliasTable.api.getDisplayedRowCount() == 0) {
                        disableUiButton(aliasTypeStr + "AliasSelect");
                        disableUiButton(aliasTypeStr + "AliasSelectMenu");
                    } else {
                        enableUiButton(aliasTypeStr + "AliasSelect");
                        enableUiButton(aliasTypeStr + "AliasSelectMenu");
                    }
                }
                break;
        }
    }

    function getSelectedLogicalAliases () {
        const aliasTable = getAliasTable();
        return (aliasTable) ? aliasTable.api.getSelectedRows() : [];
    }

    function showRenameAliasesPreview() {
        const allRowCount = getSelectedLogicalAliases().length;
        if (allRowCount < 1) {
            displayWarningDialog("Please select at least 1 Source or Destination to add an alias to");
            return;
        }
        updateRenameAliasPreview();
        displayDialog("renameAliasesModal");
        document.getElementById("renameAliasPrefix").focus();
    }

    function updateRenameAliasPreview() {
        const allRows = getSelectedLogicalAliases();
        const append = document.querySelector('input[name="renameAppend"]:checked').value;
        let aliasPreviews = [];
        if (allRows.length < 1) {
            return;
        } else if (allRows.length == 1) {
            $(".singleSelect").css("display", "table-row");
            $(".multiSelect").css("display", "none");
            aliasPreviews.push(document.getElementById("renameAliasName").value);
        } else {
            $(".multiSelect").css("display", "table-row");
            $(".singleSelect").css("display", "none");
            const prefix = document.getElementById("renameAliasPrefix").value;
            let index = parseInt(document.getElementById("renameStartCount").value);
            if (isNaN(index)) {
                index = "";
            }
            for (let i = 0; i < allRows.length; i++) {
                let newName = prefix + index;
                if (append === "before") {
                    newName = newName + allRows[i].name;
                } else if (append === "after") {
                    newName = allRows[i].name + newName;
                }
                aliasPreviews.push(newName);
                if (typeof index === "number") { index++; }
            }
        }
        document.getElementById("aliasesToRename").value = aliasPreviews.join(", ");
    }

    function renameAliases() {
        const aliasType = getAliasType();
        let logicalsSelected = getSelectedLogicalAliases();
        if (logicalsSelected.length < 1) {
            displayWarningDialog("Please select at least a single " + aliasTypeNames(aliasType) + " to change an alias for.");
            return
        }

        const aliasSetId = aliasGridOptions.api.getSelectedRows()[0].id;
        const append = document.querySelector('input[name="renameAppend"]:checked').value;
        if (logicalsSelected.length > 1) {
            const prefix = document.getElementById('renameAliasPrefix').value;
            let index = parseInt(document.getElementById('renameStartCount').value);
            if (isNaN(index)) {
                index = "";
            }
            for (let i = 0; i < logicalsSelected.length; i++) {
                let newName = prefix + index;
                if (append === "before") {
                    newName = prefix + index + logicalsSelected[i].name;
                } else if (append === "after") {
                    newName = logicalsSelected[i].name + prefix + index;
                }
                logicalsSelected[i].name = newName;
                if (typeof index === "number") { index++; }
            }
        } else {
            let newName = document.getElementById('renameAliasName').value;
            if (append === "before") {
                newName = newName + logicalsSelected[0].name;
            } else if (append === "after") {
                newName = logicalsSelected[0].name + newName;
            }
            logicalsSelected[0].name = newName;
        }

        for (let i = 0; i < logicalsSelected.length; i++) {
            if (checkForSpecialCharacters(logicalsSelected[i].name)) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
            logicalsSelected[i].aliasType = aliasType;
            logicalsSelected[i].aliasSetId = aliasSetId;
        }
        hideDialog("renameAliasesModal");
        updateAliases(logicalsSelected);
    }

    // This function is referenced on the source/destination alias tables
    function clearSelectedAliases () {
        const aliasType = getAliasType();
        let logicalsSelected = getSelectedLogicalAliases();
        if (logicalsSelected.length < 1) {
            displayWarningDialog("Please select at least a single " + aliasTypeNames(aliasType) + " to clear.");
            return
        }

        const aliasSetId = aliasGridOptions.api.getSelectedRows()[0].id;
        for (let i = 0; i < logicalsSelected.length; i++) {
            logicalsSelected[i].aliasType = aliasType;
            logicalsSelected[i].aliasSetId = aliasSetId;
            logicalsSelected[i].name = "";
        }
        updateAliases(logicalsSelected);
    }

    function updateAliasSet (newAliasSetData) {
        const urlParameters = [
            "id=" + newAliasSetData.id,
            "uiid=" + newAliasSetData.uiid,
            "name=" + newAliasSetData.name,
            "description=" + (newAliasSetData.description || ""),
        ];
        displayDialog("LoadingModal");
        sessionStorage.setItem(sessionKeys.LOCAL_CHANGE, newAliasSetData.name);
        const url = "/aliasset/update?" + urlParameters.join("&");
        $.post(url)
            .done(() => {
                hideDialog("LoadingModal");
            })
            .fail((err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            });
    }

    function updateAliases (newAliasData) {
        if (newAliasData.length < 1) {
            console.warn(arguments.callee.name + " - No alias data provided to update");
            return;
        }

        for (let i = 0; i < newAliasData.length; i++) {
            newAliasData[i].name = newAliasData[i].name.trim();
        }

        const duplicateNames = checkForDuplicateNames (newAliasData.filter(alias => { return alias.name.length > 0; }).map(alias => { return alias.name; }), getUnselectedAliases());
        if (duplicateNames.length > 0) {
            displayErrorDialog("Cannot have " + aliasTypeNames.get(getAliasType()) + "s with the following duplicate alias" + ((duplicateNames.length > 1) ? "es: " : ": ") + duplicateNames.join(", "));
            getLogicalEndAliasData(getAliasType(), aliasGridOptions.api.getSelectedRows()[0].id, getAliasTable(), false);
            return;
        }

        // only show the progress bar if there are 2 or more aliases being updated
        if (newAliasData.length > 1) {
            displayProgressBar("Updating Aliases", "Sending initial data...", function (guid) {
                $.post("/alias/update?" + getProgressBarURLParameter(guid), JSON.stringify(newAliasData))
                    .done(() => {
                        // The progress bar will automatically close itself when the operation completes
                    })
                    .fail((err) => {
                        displayErrorDialog(err.responseText || JSON.stringify(err));
                    });
            });
        } else {
            $.post("/alias/update", JSON.stringify(newAliasData))
                .fail((err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                });
        }
    }

    function pasteNames() {
        const rawText = document.getElementById('copyPasteText').value;
        const aliasSetId = aliasGridOptions.api.getSelectedRows()[0].id;
        const aliasType = getAliasType();
        const newNames = rawText.trim().split('\n');

        let logicalsSelected = getSelectedLogicalAliases();
        let aliasDataToUpdate = [];
        for (let i = 0; i < Math.min(newNames.length, logicalsSelected.length); i++) {
            if (checkForSpecialCharacters(newNames[i])) {
                displayErrorDialog(NameErrorMessage);
                return;
            }
            logicalsSelected[i].name = newNames[i];
            logicalsSelected[i].aliasSetId = aliasSetId;
            logicalsSelected[i].aliasType = aliasType;
            aliasDataToUpdate.push(logicalsSelected[i]);
        }

        if (aliasDataToUpdate.length > 0) {
            updateAliases(aliasDataToUpdate);
        }
        hideDialog("copyPasteModal")
    }

    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 showAddAliasSet() {
        // Find the first unused uiid value
        let uiid = uiidBase;
        let keepGoing = 1;
        aliasGridOptions.api.forEachNode((node) => {
            if (keepGoing) {
                let alreadyInUse = 0;
                let tryThis = (parseInt(node.data.uiid) + 1);  // Try one higher than this existing value
                aliasGridOptions.api.forEachNode((node2) => {
                    if ((!alreadyInUse) && (parseInt(node2.data.uiid) == tryThis)) {
                        alreadyInUse = 1;
                    }
                })
                if (!alreadyInUse) {
                    uiid      = tryThis;
                    keepGoing = 0;
                }
            }
        })
        document.getElementById("aliasSetUiid").value = uiid;
        displayDialog('addAliasModal');
    }

    function addAliasSet() {
        let errors = [];
        let name = document.getElementById("aliasSetName").value;
        name = name.trim();

        if (!validateString(name)) {
            errors.push(NameErrorMessage);
        }

        if (aliasGridOptions.api.getDisplayedRowCount() >= maximumAliasSetCount) {
            errors.push(AliasSetCountMessage);
        }

        aliasGridOptions.api.forEachNode((node) => {
            if(node.data.name == name) {
                errors.push(getDuplicateNamesError(name, objectTypeName, node.data.uiid));
            }
        });

        const newAliasId  = document.getElementById("aliasSetUiid").value;
        aliasGridOptions.api.forEachNode((node) => {
            if (newAliasId == parseInt(node.data.uiid)) {
                errors.push("Alias Set ID " + newAliasId + " is already in use.  Please select a different ID.");
            }
        });

        if (errors.length > 0) {
            displayErrorMessagesDialog("The following errors must be resolved in order to create a new alias set", errors);
            return;
        }

        hideDialog("addAliasModal");
        displayDialog("LoadingModal");
        const urlParameters = [
            "name=" + encodeURIComponent(name),
            "description=" + encodeURIComponent(document.getElementById("description").value),
            "uiid=" + newAliasId
        ];
        $.ajax({
            url: "/aliasset/add?" + urlParameters.join("&"),
            success: () => {
                sessionStorage.setItem(sessionKeys.LOCAL_CHANGE, name);
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function selectAliasSetByName(name) {
        aliasGridOptions.api.forEachNode((node) => {
            node.setSelected(node.data.name == name);
        });
        sessionStorage.removeItem(sessionKeys.LOCAL_CHANGE);
    }

    function handleAliasModeChange(eventData) {
        dbMode = eventData.detail.dbMode;
        if (eventData.detail.dbMode == DBMode_Protect) {
            disableButtonIds(["addAlias", "addAliasMenu", "duplicateAlias", "duplicateAliasMenu", "deleteAlias", "deleteAliasMenu"]);
        } else {
            enableUiButton("addAlias", "addAliasMenu");
            onAliasSetSelectionChanged();
        }
    }

    function getAliasTable() {
        const aliasType = getAliasType();
        switch (aliasType) {
            case aliasTypes.SOURCE:
                return sourceAliasGridOptions;
            case aliasTypes.DESTINATION:
                return destinationAliasGridOptions;
        }
        return null;
    }

    function aliasTabClicked(alias) {
        sessionStorage.setItem(sessionKeys.ALIAS_TYPE, alias);
        switch (alias) {
            case aliasTypes.SOURCE:
            case aliasTypes.DESTINATION:
                resetLogicalAliasTableSelection(null);
                updateAliasButtonToolbar();
                break;
        }
    }

    function getLogicalEndAliasData(aliasType, aliasSetId, gridTable, reset) {
        const url = "/alias/agdata?aliasType=" + aliasType + "&aliasSetId=" + aliasSetId;
        const selectedAliases = getSelectedLogicalAliases();
        $.get(url)
            .done((data) => {
                gridTable.api.setRowData(data);
                if (reset === true){
                    resetLogicalAliasTableSelection(gridTable);
                } else {
                    let lastSelectedRowIndex = null;
                    const logicalIds = selectedAliases.map(alias => { return alias.logicalEndId; });
                    gridTable.api.forEachNode((node) => {
                        if (logicalIds.includes(node.data.logicalEndId)) {
                            node.setSelected(true);
                            lastSelectedRowIndex = node.rowIndex;
                        } else {
                            node.setSelected(false);
                        }
                    });
                    if (lastSelectedRowIndex) {
                        gridTable.api.ensureIndexVisible(lastSelectedRowIndex, "middle");
                    }
                }

                // Update the import dialog examples, doesn't matter if it is sources or destinations
                if (data.length > 1) {
                    for (let i = 0; i < 2; i++){
                        $("#import-alias-name-" + i).html(data[i].logicalEndName);
                    }
                }

                // Checking for duplicates to give warning to user as aliases did not always have to be unique
                // which would cause routing issues
                let aliases = {};
                let duplicated = {};
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name) {
                        if (!aliases[data[i].name]) {
                            aliases[data[i].name] = data[i];
                        } else if (duplicated[data[i].name]) {
                            duplicated[data[i].name].push(data[i]);
                        } else {
                            duplicated[data[i].name] = [aliases[data[i].name], data[i]];
                        }
                    }
                }
                if (Object.keys(duplicated).length > 0) {
                    const logicalEndStr = aliasTypeNames.get(aliasType);
                    let warningMessage = [];
                    Object.keys(duplicated).forEach((property)=> {
                        const logicalEnds = duplicated[property].map((alias) => {
                            return alias.logicalEndName;
                        });
                        warningMessage.push("'" + property + "' is used for " + logicalEndStr + "s: " + logicalEnds.join(", "));
                    });
                    displayWarningWithTextDialog("Some " + logicalEndStr + "s have duplicate aliases.  It is recommended that all aliases for a " + logicalEndStr + " with a given alias set be unique.", warningMessage.join("\n"));
                }

                // Update the import dialog examples, doesn't matter if it is sources or destinations
                if (data.length > 1) {
                    for (let i = 0; i < 2; i++) {
                        $("#import-alias-name-" + i).html(data[i].logicalEndName);
                    }
                }
            })
            .fail((err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            });
    }

    function checkForDuplicateNames (newNames, unselectedAliases) {
        let duplicatedNames = {};
        for (let i = 0; i < unselectedAliases.length; i++) {
            if (newNames.includes(unselectedAliases[i].name)) {
                duplicatedNames[unselectedAliases[i].name] = true;
            }
        }
        return Object.keys(duplicatedNames);
    }

    function getUnselectedAliases() {
        let unselectedAliases = [];
        const aliasTable = getAliasTable();
        aliasTable.api.forEachNode((node) => {
            if (!node.isSelected() && node.data.id != 0){
                unselectedAliases.push(node.data);
            }
        });
        return unselectedAliases;
    }

    function getUnselectedAliasSets() {
        let unselectedAliasSets = [];
        aliasGridOptions.api.forEachNode((node) => {
            if (!node.isSelected() && node.data.id != 0){
                unselectedAliasSets.push(node.data);
            }
        });
        return unselectedAliasSets;
    }

    function updateSpecificLogicalEndAliases(aliasType, aliasSetId, aliasIds) {
        if (aliasIds.length < 1) {
            console.warn(arguments.callee.name + " - No alias ids provided: " + JSON.stringify(aliasIds));
            return;
        }
        const urlParameters = [
            "aliasType="+ aliasType,
            "aliasSetId=" + aliasSetId,
            "aliasIds=" + aliasIds.join()
        ];
        const url = "/alias/agdata?" + urlParameters.join("&");
        $.get(url)
            .done((data) => {
                if (data.length < 1) {
                    console.warn(arguments.callee.name + " - No Alias data was returned from URL: " + url);
                    return;
                }
                let aliasTable = null;
                switch (aliasType) {
                    case aliasTypes.SOURCE:
                        aliasTable = sourceAliasGridOptions;
                        break;
                    case aliasTypes.DESTINATION:
                        aliasTable = destinationAliasGridOptions;
                        break;
                    default:
                        console.warn(arguments.callee.name + " - Unabled to determine logical end alias table to update: " + aliasType);
                        return;
                }
                let newRowData = {};
                const keys = [];
                for (let i = 0; i < data.length; i++) {
                    newRowData[data[i].logicalEndId] = data[i];
                    keys.push(data[i].logicalEndId); // Using Object.keys converts integers to strings for keys thus we cannot use it in this situation
                }
                aliasTable.api.forEachNode((node) => {
                    if (keys.includes(node.data.logicalEndId)) {
                        node.setData(newRowData[node.data.logicalEndId.toString()]);
                    }
                });
                aliasTable.api.refreshCells();
            })
            .fail((err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            });
    }

    function duplicateAliasSetCheck() {
        const selectedData = aliasGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            document.getElementById("duplicateName").value = selectedData[0].name;
        } else {
            document.getElementById("duplicateName").value = "";
        }
        displayDialog('duplicateAliasModal');
    }

    function removeServiceAliasSetAndDeleteAliasSet() {
        hideDialog("removeServiceAliasAndAliasModal");
        displayDialog("LoadingModal");
        let clearServiceAliasSetPromise = new Promise((resolve, reject) => {
            setServicesAliasSetUiid(defaultServiceAliasSetUIID);
            resolve();
        });
        clearServiceAliasSetPromise.then(() => {
            removeSelectedAliasSet();
        });
    }

    function updateUiIdBase(baseNumber) {
        uiidBase = baseNumber;
    }
</script>

<div class="row" style="height: 100%;">
    <div class="col splitBorder" style="height: 100%;width: 50%">
        <nav class="navbar navbar-alias-set">
            <div>Alias Sets</div>
        </nav>
        <nav class="navbar navbar-expand" id="aliaseditortoolbar">
            <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 class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="showAddAliasSet();" id="addAliasMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addAliasMenuImg"></i>Add</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="duplicateAliasSetCheck();" id="duplicateAliasMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-duplicate-disabled" id="duplicateAliasMenuImg"></i>Duplicate</button>
                            </li>
                            <li><div class="dropdown-item-divider"></div></li>
                            <li class="dropdown-item dropdown-item-nav">
                                <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="removeAliasCheck();" id="deleteAliasMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteAliasMenuImg"></i>Delete</button>
                            </li>
                            <li><hr class="dropdown-item-divider" /></li>
                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="showAddAliasSet();" id="addAliasButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addAliasImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="duplicateAliasSetCheck();" id="duplicateAliasButton" data-toggle="tooltip" data-placement="bottom" title="Duplicate"><i class="icon-btn icon-duplicate" id="duplicateAliasImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="removeAliasCheck();" id="deleteAliasButton" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="icon-btn icon-delete" id="deleteAliasImg"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-alias" id="aliaseditortable">
            <div id="aliasGrid" style="height: 100%" class="ag-theme-balham-dark" onfocusout="sessionStorage.removeItem(sessionKeys.LAST_TABLE);"></div>
        </div>
    </div>
    <div class="col tab alias-editor-style" id="aliaseditorsettings">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation" id="settingOptionSources">
                <button class="tablinks tab-button" id="settings-tab-sources" data-bs-toggle="tab" data-bs-target="#sources" type="button" role="tab" aria-controls="settings" aria-selected="false" onclick="aliasTabClicked(aliasTypes.SOURCE);">Sources</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation" id="settingOptionDestinations">
                <button class="tablinks tab-button" id="settings-tab-destinations" data-bs-toggle="tab" data-bs-target="#destinations" type="button" role="tab" aria-controls="settings" aria-selected="false" onclick="aliasTabClicked(aliasTypes.DESTINATION);">Destinations</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation" id="settingOptionServices">
                <button class="tablinks tab-button" id="settings-tab-services" data-bs-toggle="tab" data-bs-target="#services" type="button" role="tab" aria-controls="settings" aria-selected="false" onclick="aliasTabClicked(aliasTypes.SERVICE);">Services</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
        </ul>
        <div class="tab-content" style="height:100%">
            <div class="tab-pane show active" style="height:100%;width:100%;" id="sources" role="tabpanel" aria-labelledby="sources-tab">
                {{ template "sourceAliases" . }}
            </div>
            <div class="tab-pane" style="height:100%;width:100%;" id="destinations" role="tabpanel" aria-labelledby="destinations-tab">
                {{ template "destinationAliases" . }}
            </div>
            <div class="tab-pane" style="height:100%;width:100%;" id="services" role="tabpanel">
                {{ template "serviceAlias" . }}
            </div>
        </div>
    </div>
</div>

<div id="aliasSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
  <span class="grid-summary-item">
    <span class="col-data-label">Alias Sets:</span>
    <span id="aliasSummarySetsValue" class="form-control" aria-label="Alias Sets 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">Source Aliases:</span>
    <span id="aliasSummarySourcesValue" class="form-control" aria-label="Source Aliases 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">Destination Aliases:</span>
    <span id="aliasSummaryDestinationsValue" class="form-control" aria-label="Destination Aliases value">0</span>
  </span>
</div>

<!--Add Alias modal-->
<div class="modal" id="addAliasModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addAliasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-alias-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addAliasModalLabel"><i class="icon-add icon-white"></i>Add Alias Set</span>
                <span class="btn btn-transparent" onclick="hideDialog('addAliasModal');"><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:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" tabindex="0" name="name" id="aliasSetName"/></td>
                    </tr>

                    <tr class="row-data">
                        <td class="col-data-label">Description:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 description-size" tabindex="1" name="description" id="description"/></td>
                    </tr>

                    <tr class="row-data" style="display:none;">
                        <td class="col-data-label">ID</td>
                        <td class="col-data-input"><input class="form-control rounded-0 count-size" tabindex="2" name="uiid" id="aliasSetUiid"></td>
                    </tr>

                </table>
                <div class="modal-footer justify-content-between">
                    <button id="cancelAddAliasSetButton" class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('addAliasModal');">Cancel</button>
                    <button id="applyAddAliasSetButton" class="btn btn-text" tabindex="3" onclick="addAliasSet();">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!--Remove aliases confirmation modal-->
<div class="modal" id="removeAliasModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeAliasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-alias-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removeAliasModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Alias Set</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeAliasModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to delete the selected alias set?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="cancelDeleteAliasSetButton" class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeAliasModal');">Cancel</button>
                <button id="applyDeleteAliasSetButton" class="btn btn-text" tabindex="0" onclick="removeSelectedAliasSet();">Apply</button>
            </div>
        </div>
    </div>
</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 justify-content-between">
                <span class="modal-title" id="importAliasModalTitle"><i class="icon-import icon-white"></i>Import Alias Spreadsheet</span>
                <span class="btn btn-transparent" onclick="hideDialog('importAliasModal');"><i class="icon-close-header"></i></span>
            </div>
            <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>Each sheet for source and destination aliases spreadsheet 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">Source 1</td>
                                <td>Your Alias Here</td>
                                <td> &nbsp; </td>
                            </tr>
                            <tr>
                                <td id="import-alias-name-1">Source 2</td>
                                <td>Another 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 sources and destination names in the <b>Name</b> column in both the table on the page and the imported spreadsheets.</p>
                    <p>The sheets containing aliases <u>MUST</u> be named exactly <b>Source Aliases</b> and <b>Destination 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 source and destination aliases using the Export button <span id="import-exportInstructions"></span></li>
                            <li>Open the downloaded <em>.xlsx</em> file and edit the source/destination aliases under the <b>Alias</b> column on their respective sheets and save the changes.</li>
                            <li>Import the recently saved file which will be in the correct expected 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 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>
                        <td class="col-data-label" style="width: fit-content;">.xlsx</td>
                    </tr>
                </table>
                <div class="container-data">
                    <p>Note: This action will export the unfiltered source and destination alias tables on two separate sheets within the <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="downloadAlias();">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="renameAliasesModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameAliasesModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-rename-alias">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title"><i class="icon-rename icon-white"></i>Rename Aliases</span>
                <span class="btn btn-transparent" onclick="hideDialog('renameAliasesModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data singleSelect">
                        <td class="col-data-label">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" tabindex="0" id="renameAliasName"/></td>
                    </tr>
                    <tr class="row-data multiSelect">
                        <td class="col-data-label">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" tabindex="0" id="renameAliasPrefix" onpropertychange="updateRenameAliasPreview();" oninput="updateRenameAliasPreview();"/></td>
                    </tr>
                    <tr class="row-data multiSelect">
                        <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" id="renameStartCount" value="1" onpropertychange="updateRenameAliasPreview();" oninput="updateRenameAliasPreview();"/></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Replace Name:</td>
                        <td class="col-data-input"><input class="form-check-input" type="radio" name="renameAppend" id="renameReplace" value="replace" tabindex="2" onchange="updateRenameAliasPreview();" checked/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Prefix:</td>
                        <td class="col-data-input"><input class="form-check-input" type="radio" name="renameAppend" id="renameAppendBefore" value="before" tabindex="3" onchange="updateRenameAliasPreview();"/></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Suffix:</td>
                        <td class="col-data-input"><input class="form-check-input" type="radio" name="renameAppend" id="renameAppendAfter" value="after" tabindex="4" onchange="updateRenameAliasPreview();"/></td>
                    </tr>
                    <tr class="row-data multiSelect">
                        <td class="col-data-label">Preview:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 preview-size-rename read-only" tabindex="5" id="aliasesToRename" value="" readonly/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="7" onclick="hideDialog('renameAliasesModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="6" onclick="renameAliases();">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="duplicateAliasModal" data-bs-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="duplicateAliasModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-add-salvo-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="duplicateAliasModalLabel"><i class="icon-add icon-white"></i>Duplicate Alias Set</span>
                <span id="duplicateAliasX" class="btn btn-transparent" onclick="hideDialog('duplicateAliasModal');"><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">New Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" name="duplicateName" id="duplicateName" tabindex="0"/></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button id="duplicateAliasCancel" class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('duplicateAliasModal');">Cancel</button>
                    <button id="duplicateAliasApply" class="btn btn-text" data-bs-dismiss="modal" tabindex="1" onclick="duplicateAliasSets();">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removeServiceAliasAndAliasModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeServiceAliasAndAliasModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-alias-size">
        <div class="modal-content">
            <div class="modal-header warning-header justify-content-between">
                <span class="modal-title"><i class="icon-alarm-warning-header"></i>Confirm Delete Alias Set</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeServiceAliasAndAliasModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">
                    The alias set you are attempting to delete is currently assigned as the service alias set.  This delete operation will also remove the alias set service assignment.
                </p>
                <p class="container-data">Are you sure you want to continue?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="cancelDeleteServiceAliasSetButton" class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeServiceAliasAndAliasModal');">Cancel</button>
                <button id="applyDeleteServiceAliasSetButton" class="btn btn-text" tabindex="0" onclick="removeServiceAliasSetAndDeleteAliasSet();">Apply</button>
            </div>
        </div>
    </div>
</div>

{{ template "copyPaste" . }}

{{ template "progressbar" . }}

{{ template "uploadFile" . }}

{{ end }}