{{ define "content" }}
<link href="/static/css/pages/src-dst.css" rel="stylesheet">

<nav class="navbar navbar-expand" id="logicalEndToolbar">
    <div class="container-fluid">
        <ul class="navbar-nav me-auto">
            <li class="nav-item dropdown">
                <button onclick="" class="btn btn-nav-icon" id="menuButton" 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="menuImage"></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="toggleChannelDrawer()" id="channelMenuButton" ><i class="icon-btn-nav-menu icon-plain icon-io-fill-dest" id="channelMenuImg"></i>Fill I/Os</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="toggleChannelDrawer('bulk')" id="bulkMappingMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-custom-fill-dest-disabled" id="bulkMappingMenuImg"></i>Edit</button>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="showAddDestinationDialog()" id="addMenuButton" ><i class="icon-btn-nav-menu icon-plain icon-add" id="addMenuImg"></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="selectAllDestinations()" id="selectAllMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-select-rows-disabled" id="selectAllMenuImg"></i>Select All</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="deselectCurRange(logicalEndsGridOptions)" id="deselectAllMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="deselectAllMenuImg"></i>Deselect All</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="onLogicalMoved(pDestinationType, moveUp)" id="logicalUpMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-up-disabled" id="logicalUpMenuImg"></i>Move Up</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="onLogicalMoved(pDestinationType, moveDown)" id="logicalDownMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-down-disabled" id="logicalDownMenuImg"></i>Move Down</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="onLogicalMoved(pDestinationType, moveTop)" id="logicalTopMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-top-disabled" id="logicalTopMenuImg"></i>Move to Top</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="onLogicalMoved(pDestinationType, moveBottom)" id="logicalBottomMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-bottom-disabled" id="logicalBottomMenuImg"></i>Move to Bottom</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="renameCheck()" id="renameLogicalMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-rename-disabled" id="renameLogicalMenuImg"></i>Rename</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="displayConfirmationDialog('Are you sure you would like to clear the selected mappings?', 'Apply', 'clearData(pDestinationType);', 'Confirm Clear Mappings', 'icon-clear icon-white')" id="clearMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-clear-disabled" id="clearMenuImg"></i>Clear</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="removeDestinationsCheck()" id="deleteMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteMenuImg"></i>Delete</button>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="showImportLogicalEndModal()" id="logicalMappingImportMenuButton"><i class="icon-btn-nav-menu icon-plain icon-import" id="logicalMappingImportMenuImg"></i>Import</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="showExportLogicalEndModal()" id="logicalMappingExportMenuButton"><i class="icon-btn-nav-menu icon-plain icon-export" id="logicalMappingExportMenuImg"></i>Export</button>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="resetDestinationIDs()" id="resetIdsMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-reset-id-disabled" id="resetIdsMenuImg"></i>Reset all ID</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" data-bs-toggle="modal" data-bs-target="#showColumnVisibilityModal"><i class="icon-btn-nav-menu icon-plain icon-table-column"></i>Columns Visibility</button>
                    </li>
                    <li><div class="dropdown-section-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav">
                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav"><i class="icon-btn-nav-menu icon-plain icon-aliases"></i>Alias</button>
                    </li>
                    <li><hr class="dropdown-item-divider" /></li>
                </ul>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="toggleChannelDrawer()" class="btn btn-nav-icon" id="channelButton"  data-toggle="tooltip" data-placement="bottom" title="Fill I/Os"><i class="icon-btn icon-io-fill-dest" id="channelImg"></i></button>
            </li>
            <li>
                <button onclick="toggleChannelDrawer('bulk')" class="btn btn-nav-icon" id="bulkMappingButton"  data-toggle="tooltip" data-placement="bottom" title="Edit" disabled><i class="icon-btn icon-custom-fill-dest-disabled" id="bulkMappingImg"></i></button>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="showAddDestinationDialog()" class="btn btn-nav-icon" id="addButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addImg"></i></button>
            </li>
            <li>
                <button onclick="selectAllDestinations()" class="btn btn-nav-icon" id="selectAllButton"  data-toggle="tooltip" data-placement="bottom" title="Select All" disabled><i class="icon-btn icon-select-rows-disabled" id="selectAllImg"></i></button>
            </li>
            <li>
                <button onclick="deselectCurRange(logicalEndsGridOptions)" class="btn btn-nav-icon" id="deselectAllButton"  data-toggle="tooltip" data-placement="bottom" title="Deselect All" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllImg"></i></button>
            </li>
            <li>
                <button class="btn btn-nav-icon" id="logicalUpButton" onclick="onLogicalMoved(pDestinationType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up" disabled><i class="icon-btn icon-up-disabled" id="logicalUpImg"></i></button>
            </li>
            <li>
                <button class="btn btn-nav-icon" id="logicalDownButton" onclick="onLogicalMoved(pDestinationType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down" disabled><i class="icon-btn icon-down-disabled" id="logicalDownImg"></i></button>
            </li>
            <li>
                <button class="btn btn-nav-icon" id="logicalTopButton" onclick="onLogicalMoved(pDestinationType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top" disabled><i class="icon-btn icon-top-disabled" id="logicalTopImg"></i></button>
            </li>
            <li>
                <button class="btn btn-nav-icon" id="logicalBottomButton" onclick="onLogicalMoved(pDestinationType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom" disabled><i class="icon-btn icon-bottom-disabled" id="logicalBottomImg"></i></button>
            </li>
            <li>
                <button onclick="renameCheck()" class="btn btn-nav-icon" id="renameLogicalButton"  data-toggle="tooltip" data-placement="bottom" title="Rename" disabled><i class="icon-btn icon-rename-disabled" id="renameLogicalImg"></i></button>
            </li>
            <li>
                <button onclick="displayConfirmationDialog('Are you sure you would like to clear the selected mappings?', 'Apply', 'clearData(pDestinationType);', 'Confirm Clear Mappings', 'icon-clear icon-white')" class="btn btn-nav-icon" id="clearButton"  data-toggle="tooltip" data-placement="bottom" title="Clear" disabled><i class="icon-btn icon-clear-disabled" id="clearImg"></i></button>
            </li>
            <li>
                <button onclick="removeDestinationsCheck()" class="btn btn-nav-icon" id="deleteButton"  data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="deleteImg"></i></button>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="showImportLogicalEndModal()" class="btn btn-nav-icon" id="logicalMappingImportButton" data-toggle="tooltip" data-placement="bottom" title="Import" ><i class="icon-btn icon-import" id="destinationAliasImportImg"></i></button>
            </li>
            <li>
                <button onclick="showExportLogicalEndModal()" class="btn btn-nav-icon" id="logicalMappingExportButton" data-toggle="tooltip" data-placement="bottom" title="Export" ><i class="icon-btn icon-export" id="destinationAliasExportImg"></i></button>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="resetDestinationIDs()" class="btn btn-nav-icon" id="resetIdsButton"  data-toggle="tooltip" data-placement="bottom" title="Reset all ID" disabled><i class="icon-btn icon-reset-id-disabled" id="resetIdsImg"></i></button>
            </li>
            <li>
                <span class="btn btn-nav-icon" data-bs-toggle="modal" data-bs-target="#showColumnVisibilityModal" data-toggle="tooltip" data-placement="bottom" title="Column Visibility"><i class="icon-btn icon-table-column"></i></span>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button class="btn-nav-icon btn-alias" id="aliasesButton" data-toggle="tooltip" data-placement="bottom" title="Alias" disabled>
                    <i class="icon-plain icon-aliases" id="aliasesImg"></i> <!-- Icon id must have "Img" suffix when using some common Ui code, e.g. setButtonIdDisabled. -->
                </button>
            </li>
            <li>
                <span class="col-data-input">
                    <div class="select-wrapper-toolbar">
                        <select class="custom-select" name="channelAliasSelect" id="aliasSetSelect" onchange="handleAliasSetSelectionChanged({{.PageType}})">
                            <option value="0">None</option>
                        </select>
                    </div>
                </span>
            </li>
        </ul>
        <form class="d-flex">
            <input class="form-control rounded-0" type="search" placeholder="Filter" aria-label="Filter" id="logicalEndFilterInput" oninput="onLogicalEndFilterTextBoxChanged()">
            <span><i class="icon-plain icon-filter"></i></span>
        </form>
    </div>
</nav>

<div id="logicalEndTable" class="grid-wrapper">
    <div id="destsGrid" class="ag-theme-balham-dark" style="height:100%"></div>

    <div id="summaryBar" class="grid-summary-bar" role="status" aria-live="polite">
        <div class="grid-summary-item">
            <span class="col-data-label">Destinations:</span>
            <span id="destSummaryTotalValue" class="form-control rounded-0 auto-size"></span>
        </div>
        <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
        <div class="grid-summary-item">
            <span class="col-data-label">Selected:</span>
            <span id="destSummarySelectedValue" class="form-control rounded-0 auto-size"></span>
        </div>
    </div>
</div>

<script src="/static/js/autocompleteCellEditor.js"></script>
<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/keystrokeHandling.js"></script>
<script src="/static/js/logicalEndRangeCellRenderer.js"></script>
<script src="/static/js/columnvisibility.js"></script>
<script src="/static/js/logicalend.js"></script>

<script type="text/javascript" charset="utf-8">
    const currentPageType = "{{ .PageType }}";
    const isPageTypeSources = currentPageType === "source";
    const isPageTypeDestinations = currentPageType === "destination";

    let uiidBase = 0;
    addWSDBListener();
    $(window).on('storage',function(e){
        if (e.originalEvent.key == "selectedCells"){
            onLogicalRowsSelectionChanged()
        }
    });

    // Listen for changes in the alias set selected dropdown on the sources page.
    // The selection on the sources and destinations page should match.
    addEventListener("storage", (event) => {
        if(event.key == "aliasSetSelectedSrcDestPages" && event.newValue != null){
            document.getElementById("aliasSetSelect").value = event.newValue;
            populateLogicalEndTable({{ .PageType }});
        }
    });

    const enterKeyCode = 13;
    var isDrawerShow = false;
    var isBulkDrawerShow = false;
    let prevLeft = -1; // Initialize the horizontal position of the autocomplete dropdown

    var destsColumnDefs = [
        {field: "uiId", headerName: "ID", colId: "uiId", pinned: "left", suppressMovable: true, maxWidth: 80, valueGetter: (params) => { return params.data.uiId + uiidBase; }, cellRenderer: RangeCellRenderer, cellStyle: applySelectionStyle, filter: 'agNumberColumnFilter',
            filterParams: {filterOptions: ["equals", "notEqual", "greaterThan", "greaterThanOrEqual", "lessThan", "lessThanOrEqual", "inRange"], maxNumConditions: 5}
        },
        {field: "name", colId: "name", headerName: "Name", pinned: "left", suppressMovable: true, editable: noAliasSetSelected, maxWidth: 300, comparator: naturalSort, cellRenderer: RangeCellRenderer, cellStyle: applySelectionStyle,
            valueGetter: p => p.data.alias || p.data.name,
        },
        {field: "id", hide: true, maxWidth: 80, cellRenderer: RangeCellRenderer, getQuickFilterText: () => '', cellStyle: applySelectionStyle},
        {field: "description", headerName: "Description", colId: "description", suppressMovable: true, editable: true, cellRenderer: RangeCellRenderer, cellStyle: applySelectionStyle},
        {field: "tally", headerName: "Tally", colId: "tally", suppressMovable: true, editable: true, cellRenderer: RangeCellRenderer, cellStyle: applySelectionStyle},
        {field: "tallyMode", headerName: "Tally Mode", colId: "tallyMode", suppressMovable: true, editable: true, cellRenderer:RangeCellRenderer, cellEditor: 'agSelectCellEditor', singleClickEdit: true, cellEditorParams:{values: tallyModeOptions}, cellStyle: applySelectionStyle},
        {{ range .Levels }}
            {field: "{{ .Name }}", headerName: "{{ .Name }}", colId: {{ .Id }}, suppressMovable: true, minWidth: 280, cellRenderer: RangeCellRenderer, cellEditor: AutocompleteCellEditor, cellEditorParams:{clearFunc: autocompleteClearFunction, searchFunc: autocompleteSearchFunction, assignFunc: autocompleteAssignFunction}, editable: true, cellStyle: applySelectionStyle,
                valueFormatter: p => (p.value) ? p.value.n : "",
            },
        {{ end }}
    ]

    var logicalEndsGridOptions = {
        defaultColDef: {
            flex: 1,
            resizable: true,
            sortable: false,
            minWidth: 150,
            lockPinned: true,
            filter: true,
            filterParams: containsFilterParams,
        },
        gridId: "destsGrid",
        context: {columnDefsBase: destsColumnDefs},
        columnDefs: destsColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        suppressFieldDotNotation: true,
        headerHeight: 36,
        rowHeight: 31,
        debounceVerticalScrollbar: true,
        //rowBuffer: 10,//buffer for what's not visible in the grid
        suppressAggFuncInHeader: true,
        animateRows: false,
        onCellValueChanged: onDestinationCellValueChanged,
        onFirstDataRendered: onFirstDataRendered,
        onSelectionChanged: onLogicalRowsSelectionChanged,
        onFilterChanged: onLogicalRowsSelectionChanged,
        onRowClicked: onRowClicked,
        onCellFocused: (e) => {
            onLogicalEndCellFocused(e);
            onLogicalRowsSelectionChanged();
        },
        getRowId: (node) => {
            return node.data.id;
        },
        onBodyScrollEnd: function(event) {
            if (!(prevLeft == event.left || Math.abs(prevLeft - event.left) == 1)) {
                if (autoCell && event.direction == "horizontal") {
                    autoCell.stopEditing();
                }
            }
            prevLeft = event.left;

        },
        onViewportChanged: function(event) {
            if (autoCell) {
                autoCell.stopEditing();
            }
        },
        quickFilterParser: function (filterStr) {
            return [ filterStr ];
        }
    };

    var destPortFilterColumnDefs = [
        {field: "name", headerName: "Ports", width: 500, pinned: "left", comparator: naturalSort},
        {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
    ];

    var destChannelFilterColumnDefs = [
        {field: "name", headerName: "Channels", width: 500, pinned: "left", comparator: naturalSort},
        {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
    ];

    var destFilterDefaultColDef = {
        flex: 1,
        resizable: false,
        sortable: true,
        editable: false,
        filter: true,
        filterParams: multiFilterCondition,
    };

    var portGridOptions = {
        defaultColDef: destFilterDefaultColDef,
        columnDefs: destPortFilterColumnDefs,
        suppressMenuHide: true,
        rowHeight: 31,
        rowSelection: 'multiple',
        cacheQuickFilter: true,
        headerHeight: 36,
        onSelectionChanged: onPortFilterSelected,
        onFilterModified: deselectPorts,
        getRowId: (node) => {
            return node.data.id;
        },
    };

    var channelGridOptions = {
        defaultColDef: destFilterDefaultColDef,
        columnDefs: destChannelFilterColumnDefs,
        suppressMenuHide: true,
        rowHeight: 31,
        rowSelection: 'multiple',
        cacheQuickFilter: true,
        headerHeight: 36,
        onFilterModified: deselectChannels,
        onSelectionChanged: onChannelFilterSelected,
    };

    function updateDestSummaryBar() {
        if (!logicalEndsGridOptions || !logicalEndsGridOptions.api) return;
        const api = logicalEndsGridOptions.api;

        const total = api.getDisplayedRowCount();
        const selected = window.getSelectedRows(true).length;

        const setText = (id, v) => {
            const el = document.getElementById(id);
            if (el) el.textContent = String(v);
        };

        setText('destSummaryTotalValue', total);
        setText('destSummarySelectedValue', selected);
    }

    function tallyModeCellRenderer() {
    }

    tallyModeCellRenderer.prototype.init = function (params) {
        this.eGui = document.createElement('div');
        if (params.value === undefined) {
            this.eGui.innerText = "";
        } else {
            this.eGui.innerText = params.value;
        }
    }

    tallyModeCellRenderer.prototype.getGui = function () {
        return this.eGui;
    }

    var rowSelectionColumn = 'uiId';
    var rowIdColumn = 'id';
    let defaultFilter = null;

    // Context implementation specific to this page. Shared base class is in logicalend.js.
    class LogicalEndContextDst extends LogicalEndContext {
        constructor(gridOptions) {
            super(gridOptions);
        }

        getGridContainer() {
            return document.getElementById("destsGrid");
        }

        getLogicalEndType() {
            return pDestinationType;
        }
    }

    // Use this context to store objects that referenced by common code that are used by both Sources or Destinations page.
    const logicalEndContext = new LogicalEndContextDst(logicalEndsGridOptions);

    (function hookDestSummary() {
        const go = window.logicalEndsGridOptions;
        if (!go) {
            document.addEventListener('DOMContentLoaded', hookDestSummary, { once: true });
            return;
        }

        ['onFirstDataRendered', 'onFilterChanged', 'onModelUpdated']
            .forEach(k => {
                const prev = go[k];
                go[k] = function () {
                    const r = (typeof prev === 'function')
                        ? prev.apply(this, arguments)
                        : undefined;
                    updateDestSummaryBar();
                    return r;
                };
            });

        if (typeof window.onLogicalRowsSelectionChanged === 'function') {
            const orig = window.onLogicalRowsSelectionChanged;
            window.onLogicalRowsSelectionChanged = function () {
                const r = orig.apply(this, arguments);
                updateDestSummaryBar();
                return r;
            };
        }

        setTimeout(updateDestSummaryBar, 0);
    })();

    document.addEventListener('DOMContentLoaded', function () {
        sessionStorage.clear();

        displayDialog("LoadingModal");

        document.getElementById("destsGrid").ag_grid = new agGrid.Grid(document.querySelector('#destsGrid'), logicalEndsGridOptions);
        document.getElementById("portGrid").ag_grid = new agGrid.Grid(document.querySelector('#portGrid'), portGridOptions);
        document.getElementById("channelGrid").ag_grid = new agGrid.Grid(document.querySelector('#channelGrid'), channelGridOptions);
        document.getElementById("slotsSelectionGrid").ag_grid = new agGrid.Grid(document.querySelector('#slotsSelectionGrid'), slotsSelectionGridOptions);
        document.getElementById("templateGrid").ag_grid = new agGrid.Grid(document.querySelector('#templateGrid'), templatesGridOptions);
        document.getElementById("columnVisibilityGrid").ag_grid = new agGrid.Grid(document.querySelector('#columnVisibilityGrid'), columnVisibilityGridOptions);

        fetch('/template/agdata?templateId=0')
            .then((response) => response.json())
            .then((data) => {
                hideDialog("LoadingModal");
                templatesGridOptions.api.setRowData(data);
            });

        selectTemplate(1, "SDI");
        onChangeChPer();

        updateVisibleColumnsTable();
        // Default select the first device in Channels Mapping
        let deviceList = {{.Devices}};
        if (deviceList) {
            $("input[name='devices']:first").click();
            enableUiButton("channel");
            enableUiButton("bulkMapping");
            enableUiButton("channelMenu");
            enableUiButton("bulkMappingMenu");
        } else {
            portGridOptions.api.hideOverlay();
            channelGridOptions.api.hideOverlay();
            disableUiButton("channel");
            disableUiButton("bulkMapping");
            disableUiButton("channelMenu");
            disableUiButton("bulkMappingMenu");
        }
        populateAliasSetDropdown(pDestinationTypeStr);
        defaultFilter = logicalEndsGridOptions.api.getFilterModel();
        showLogicalEndTallyColumn(pDestinationType);
        window.addEventListener(DBMODE_TABLE, function(event) {
            handleLogicalEndModeChangeWrapper(event, destsColumnDefs);
        });
        onLogicalRowsSelectionChanged();
        // $('[data-toggle="tooltip"]').tooltip();
        columnVisibilityGridOptions.onCellValueChanged = onColumnVisibiltyChanged;

        setTallyModeOptions();
        getUIIDBaseSetting(updateUiIdBase);
    });

    function onColumnVisibiltyChanged(event) {
        onColumnVisCheckboxChanged(event, logicalEndsGridOptions);
    }

    function onRowClicked() {
        setSelectAll(false);
    }

    function onDestinationCellValueChanged(event) {
        switch (event.column.colId) {
            case "name":
                if (!event.newValue) {
                    return;
                }
                event.newValue = event.newValue.trim();
                if (!validateString(event.newValue)) {
                    displayErrorDialog(NameErrorMessage);
                    populateLogicalEndTable(pDestinationTypeStr);
                    return;
                }
                break;
            case "tally":
                if (event.newValue && !CheckTallySyntax(event.newValue)) {
                    displayErrorDialog(TallyErrorMessage);
                    populateLogicalEndTable(pDestinationTypeStr);
                    return;
                }
                break;
            case "description":
            case "tallyMode":
                break;
            default:
                let colId = parseInt(event.column.colId);
                if (colId >= 1 && colId <= 17) {
                    logicalEndsGridOptions.api.refreshCells();
                } else {
                    displayWarningDialog("Unsupported column cell Value change: " + event.column.colId);
                }
                break;
        }

        if (event.source != "multi") {
            updateLogicalEnd(pDestinationTypeStr, [event.data]);
        }
    }

    function handleFill(modalName) {
        const check = fillPrecheck();
        if (!check.ok) {
            displayWarningDialog(check.message);
            return;
        }
	    handleLogicalFill(modalName, pDestinationType);
    }

    function fillDestinations(modalName, progressBarGuid) {
        let firstDestData = JSON.parse(sessionStorage.getItem('firstLogicalEndData'));
        let name = "";
        let startCount = 0;
        if (firstDestData) {
            name = firstDestData.prefix;
            startCount = firstDestData.startCount;
        }
        const urlParameters = [
            getProgressBarURLParameter(progressBarGuid),
            "devId=" + sessionStorage.getItem(sessionStorageKeys.DEVICE),
            "slotIds=" + getFillSlotIds(),
            "portIds=" + JSON.parse(sessionStorage.getItem(sessionStorageKeys.PORT)),
            "templateId=" + getSelectedTemplate().id,
            "name=" + name,
            "startIndex=" + startCount,
            "logicalEndType=" + pDestinationType
        ];
        $.ajax({
            url: "/destination/fillPort?" + urlParameters.join("&"),
            success: () => {
                hideDialog(modalName);
                deselectPorts();
                deselectChannels();
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function selectAllDestinations() {
        let allRowCount = logicalEndsGridOptions.api.getDisplayedRowCount();
        if(allRowCount > 0) {
            setSelectAll(true);
            selectAllRows(logicalEndsGridOptions, allRowCount);
        }
    }

    function resetDestinationIDs() {
        displayConfirmationDialog(
            "Resetting IDs will affect third-party controller configurations that rely on these IDs. While internal routing assignments will be maintained, you may need to update external controller settings after this change.  Are you sure you would like to reset all IDs?",
            "Reset",
            "executeResetDestinationIDs()",
            "Confirm Reset all IDs",
            "icon-reset-id icon-white"
        );
    }

    function executeResetDestinationIDs() {
        displayDialog("LoadingModal");
        $.ajax({
            url: "/destination/resetUIIDs",
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText ||JSON.stringify(err));
            }
        });
    }

    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);
            switch (msg.table) {
                case DESTINATION_TABLE:
                case DESTINATION_LEVEL_CHANNEL_TABLE:
                case TIELINE_TABLE:
                case TEMPLATE_TABLE:
                case LEVEL_TABLE:
                case DATABASE_TABLE:
                case ALIAS_SET_TABLE:
                case CHANNEL_ALIAS_TABLE:
                case DESTINATION_ALIAS_TABLE:
                case SLOT_TABLE:
                case PORT_TABLE:
                case CHANNEL_TABLE:
                case CONFIGURATION_TABLE:
                    handleLogicalEndsDSChange(msg, pDestinationType);
                    break;
                case UIID_BASE_NUMBER:
                    getUIIDBaseSetting(updateUiIdBase);
                    break;
                case DEVICE_TABLE:
                    handleLogicalEndsDSChange(msg, pDestinationType);
                    onDevicesFilterTextBoxChanged();
                    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 slotClick(id) {
        slotClicked(id, "out");
    }

    function onPortFilterSelected() {
        const selectedRows = portGridOptions.api.getSelectedRows();
        sessionStorage.setItem(sessionStorageKeys.PORT, JSON.stringify(selectedRows.map(node => node.id)));
        document.getElementById("fillButton").disabled = !(selectedRows.length != 0 && isDrawerShow);
        if (isBulkDrawerShow) {
            updateChannelList(
                sessionStorage.getItem(sessionStorageKeys.DEVICE),
                sessionStorage.getItem(sessionStorageKeys.SLOT),
                JSON.parse(sessionStorage.getItem(sessionStorageKeys.PORT)),
                "out"
            );
        }
    }

    function showDestsPreview() {
        const count = parseInt(document.getElementById("destCount").value);
        $(".multiple-logicals").css("display", (count > 1) ? "table-row" : "none");

        const newNames = getNewLogicalEndNames(
            document.getElementById("logicalEndPrefix").value,
            count,
            parseInt(document.getElementById("startCount").value)
        );
        document.getElementById("destinationsToAdd").value = newNames.join(", ");
    }

    function showAddDestinationDialog() {
        document.getElementById('logicalEndPrefix').value = "";
        document.getElementById('startCount').value = 1;
        document.getElementById('destCount').value = 1;
        updateStartCountFromPrefix("addLogicalEnd");
        displayDialog("addDestinationModal");
    }

    function removeDestinationsCheck() {
        let selectedRows = getSelectedRows(true);
        if (selectedRows.length > 0) {
            showRenamePreview();
            displayDialog("removeModal");
        } else {
            displayWarningDialog("Please select at least one destination to remove.");
        }
    }

    function addDestinations() {
        let errorList = [];
        const logicalEndPrefix = document.getElementById('logicalEndPrefix').value;
        if (!validateString(logicalEndPrefix)) {
            errorList.push(NameErrorMessage);
        }
        const startCount = document.getElementById('startCount').value;
        if (!isNumeric(startCount)) {
            errorList.push(StartCountErrorMessage);
        }
        const destCount = document.getElementById('destCount').value;
        if (!isNumeric(destCount)) {
            errorList.push(CountErrorMessage);
        }
        if (errorList.length != 0) {
            displayErrorDialog(showErrorsFromList(errorList));
            return;
        }
        displayProgressBar("Adding Destinations", "Sending initial data...", function(guid) {
            const urlParameters = [
                getProgressBarURLParameter(guid),
                "startCount=" + startCount,
                "destCount=" + destCount,
                "logicalEndPrefix=" + encodeURIComponent(logicalEndPrefix),
            ];
            $.ajax({
                url: "/destination/add?" + urlParameters.join("&"),
                success: () => {
                    hideDialog("addDestinationModal");
                    hideDialog("LoadingModal");
                },
                error: (err) => {
                    const displayMessage = err.responseText || JSON.stringify(err);
                    displayErrorDialog(displayMessage);
                    if (displayMessage.includes("You have exceeded the maximum number of")) {
                        hideDialog("addDestinationModal");
                        hideDialog("LoadingModal");
                    }
                }
            });
        })
    }

    function copyHandler() {
        copyLogicals({{ .PageType }})
    }

    function updateStartCountFromPrefix(modal) {
        debounce(() => {
            updateStartCountFromPrefixForLogicalEnd(modal, pDestinationType);
        }, 500)();
    }

    function renameTallyMode() {
        const destinationIds = getSelectedIds();
        const newTallyMode = $("#" + getTallyModeRenameSelectId()).find(":selected").val();
        const newTallyModeText = $("#" + getTallyModeRenameSelectId()).find(":selected").text();
        let destinations = [];
        logicalEndsGridOptions.api.forEachNode(function (node) {
            // only update the destinations where the tally mode is actually changing
            if ((destinationIds.includes(node.data.id)) && (node.data.tallyMode != newTallyModeText)) {
                node.data.tallyMode = newTallyMode;
                destinations.push(node.data);
            }
        });
        hideDialog('renameTallyModeModal');
        updateLogicalEnd(pDestinationTypeStr, destinations);
    }

    function updateUiIdBase(baseNumber) {
        uiidBase = baseNumber;
        logicalEndsGridOptions.api.redrawRows();
    }
</script>

<!-- Map channels drawer -->
{{ template "logicalEndChannels" . }}

<!--Add Destinations modal-->
<div class="modal" id="addDestinationModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addDestinationModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-add-source-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addDestinationModalLabel"><i class="icon-add icon-white"></i>Add Destinations</span>
                <span class="btn btn-transparent" onclick="hideDialog('addDestinationModal');"><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" name="logicalEndPrefix" id="logicalEndPrefix" tabindex="0" oninput="updateStartCountFromPrefix('addLogicalEnd');"/>
                        </td>
                    </tr>
                    <tr class="row-data multiple-logicals">
                        <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" name="startCount" value="1" id="startCount" tabindex="1" onchange="showDestsPreview();" onpropertychange="showDestsPreview();"/></span>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Count:</td>
                        <td class="col-data-input">
                            <span class="number-wrapper"><input type="number" class="form-control rounded-0 count-size" name="destCount" value="1" id="destCount" tabindex="2" onchange="showDestsPreview();" onpropertychange="showDestsPreview();" min="1"/></span>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label auto-size">Preview:</td>
                        <td class="col-data-input">
                            <input class="form-control rounded-0 preview-size-destinations read-only" name="destinationsToAdd" id="destinationsToAdd" placeholder="None" tabindex="3" readonly/>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="5" onclick="hideDialog('addDestinationModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="4" onclick="addDestinations();">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{ template "copyPaste" . }}

{{ template "templateEditor" . }}

{{ template "slotsSelectionEditor" . }}

{{ template "renameModal" . }}

{{ template "removeModal" . }}

{{ template "logicalImportExport" . }}

{{ template "showColumnVisibilityModal" . }}

{{ template "progressbar" . }}

{{ template "uploadFile" . }}

{{ end }}