{{ 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="toggleChannelDrawerSrc()" id="channelMenuButton" ><i class="icon-btn-nav-menu icon-plain icon-io-fill-src" 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="toggleChannelDrawerSrc('bulk')" id="bulkMappingMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-custom-fill-src-disabled" id="bulkMappingMenuImg"></i>Edit</button>
                    </li>
                    <li><div class="dropdown-item-divider"></div></li>
                    <li class="dropdown-item dropdown-item-nav implied-src-mode-toggle">
                        <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="toggleSrcViewMode()" id="toggleImpliedSrcViewMenuButton" name="toggleImpliedSrcView"><i class="icon-btn-nav-menu icon-plain icon-implied-src" id="toggleImpliedSrcViewMenuImg"></i>Auto-Configured Audio Sources</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="showAddSourceDialog()" id="addMenuButton" ><i class="icon-btn-nav-menu 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="selectAllSources()" 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(pSourceType, 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(pSourceType, 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(pSourceType, 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(pSourceType, 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="handleSrcRename()" 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(pSourceType);', '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="removeSourcesCheck()" 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="resetSourceIDs()" 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>Column 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" id="aliasesMenuButton"><i class="icon-btn-nav-menu icon-plain icon-aliases" id="aliasesMenuImg"></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="toggleChannelDrawerSrc()" class="btn btn-nav-icon" id="channelButton"  data-toggle="tooltip" data-placement="bottom" title="Fill I/Os"><i class="icon-btn icon-io-fill-src" id="channelImg"></i></button>
            </li>
            <li>
                <button onclick="toggleChannelDrawerSrc('bulk')" class="btn btn-nav-icon" id="bulkMappingButton"  data-toggle="tooltip" data-placement="bottom" title="Edit" disabled><i class="icon-btn icon-custom-fill-src-disabled" id="bulkMappingImg"></i></button>
            </li>
            <li class="implied-src-mode-toggle">
                <button onclick="toggleSrcViewMode()" class="btn btn-nav-icon" id="toggleImpliedSrcViewButton" data-toggle="tooltip" data-placement="bottom" title="Auto-Configured Audio Sources"><i class="icon-btn icon-implied-src" id="toggleImpliedSrcViewImg"></i></button>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="showAddSourceDialog()" 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="selectAllSources()" 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(pSourceType, 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(pSourceType, 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(pSourceType, 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(pSourceType, 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="handleSrcRename()" 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(pSourceType);', '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="removeSourcesCheck()" 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="logicalMappingImportImg"></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="logicalMappingExportImg"></i></button>
            </li>
            <li>
                <span><i class="icon-separator"></i></span>
            </li>
            <li>
                <button onclick="resetSourceIDs()" 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" data-peer-id="aliasSetSelect" 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="srcGridDivBasic"   class="ag-theme-balham-dark" style="height:100%"></div>
    <div id="srcGridDivImplied" 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">Sources:</span>
            <span id="srcSummaryTotalValue" 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="srcSummarySelectedValue" 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";
    const isImpliedSourcesMode = "{{ .ImpliedMode }}" === "true";

    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 destinations 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 }});
        }
    });

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

        getGridOptionsTwin() {
            return this.gridOptions.context.gridOptionsTwin;
        }

        getGridContainer() {
            return this.gridOptions.context.gridContainer;
        }

        isTableReadOnly() {
            return super.isTableReadOnly() || this.isImpliedSrcMode();
        }

        setImpliedSrcMode(implied) {
            this.gridOptions = implied ? srcGridOptionsImplied : srcGridOptionsBasic;
            logicalEndsGridOptions = this.gridOptions; // Update global var that is used across multiple files.
        }

        isImpliedSrcMode() {
            return this.gridOptions.context.impliedMode;
        }

        getFilters() {
            // Remove filters that are specific to implied sources. See logicalends.js:getFilterData() for details.
            // This also affects canChangeRowOrder(), allowing row reordering when only filter is about view mode.
            let filters = super.getFilters();
            delete filters.parentId;
            return filters;
        }

        getLogicalEndType() {
            return pSourceType;
        }

        refreshViewElements() {
            let disableButtons = this.getUnusedButtons();
            if (disableButtons) {
                setButtonIdsDisabled(disableButtons, true);
            }
            refreshImpliedSrcViewButtons();
        }

        getUnusedButtons() {
            return this.isImpliedSrcMode() ? [
                // Menu elements.
                "addMenu",
                "selectAllMenu",
                "deselectAllMenu",
                "clearMenu",
                "deleteMenu",
                "logicalMappingImportMenu",
                "logicalMappingExportMenu",
                "resetIdsMenu",
                "aliasesMenu",
                // Toolbar elements.
                "add",
                "logicalUp",
                "logicalDown",
                "logicalTop",
                "logicalBottom",
                "selectAll",
                "deselectAll",
                "clear",
                "delete",
                "logicalMappingImport",
                "logicalMappingExport",
                "resetIds",
            ] : null;
        }
    }

    const srcParentIdNull = 0;

    const srcGridIdBasic = "srcGridIdBasic";
    const srcGridIdImplied = "srcGridIdImplied";

    const filterModelBasic = {
        parentId: {
            type: "equals",
            filter: srcParentIdNull,
        }
    };
    const filterModelImplied = {
        parentId: {
            type: "notEqual",
            filter: srcParentIdNull,
        }
    };

    const srcGridOptionsBasic = createSourcesGridOptions(false, srcGridIdBasic, createSourcesColumnDefs(false), filterModelBasic);
    const srcGridOptionsImplied = createSourcesGridOptions(true, srcGridIdImplied, createSourcesColumnDefs(true), filterModelImplied);
    srcGridOptionsBasic.context.gridOptionsTwin = srcGridOptionsImplied;
    srcGridOptionsImplied.context.gridOptionsTwin = srcGridOptionsBasic;

    const logicalEndContext = new LogicalEndContextSrc(srcGridOptionsBasic);
    var logicalEndsGridOptions = logicalEndContext.getGridOptions(); // CAUTION: There are references to this var in multiple other files, e.g. autocompleteCellEditor.js.

    var dbImpliedSourcesEnabled = false; // Indicates current DB mode for implied sources. It should be fetched when page is loaded only.

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

    function createSourcesColumnDefs(implied) {
        let colDefs = [
        {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", headerName: "Name", colId: "name", pinned: "left", suppressMovable: true, editable: noAliasSetSelected, comparator: naturalSort, maxWidth: 300, 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: "parentId", hide: true}, // For dynamically filtering implied sources. Note: empty filterParams seems to have no effect. See setViewMode() for details.
        {{ 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 }}
        ];

        if (implied) {
            for (let col of colDefs) {
                col.editable = false;
            }
        }

        return colDefs;
    }

    function createSourcesGridOptions(impliedMode, gridId, sourcesColumnDefs, filterModel) {
        return {
        defaultColDef: {
            flex: 1,
            resizable: true,
            sortable: false,
            minWidth: 150,
            lockPinned: true,
            filter: true,
        },
        context: {impliedMode: impliedMode, columnDefsBase: sourcesColumnDefs, filterModel: filterModel},
        gridId: gridId,
        columnDefs: sourcesColumnDefs,
        rowSelection: impliedMode ? "multiple" : null,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        suppressFieldDotNotation: true,
        headerHeight: 36,
        rowHeight: 31,
        debounceVerticalScrollbar: true,
        suppressAggFuncInHeader: true,
        animateRows: false,
        onGridReady: onSrcGridReady,
        onCellValueChanged: onSourceCellValueChanged,
        onFirstDataRendered : onFirstDataRendered,
        onSelectionChanged: onLogicalRowsSelectionChanged,
        onFilterChanged: onLogicalRowsSelectionChanged,
        onRowClicked: onRowClicked,
        onCellFocused: (e) => {
            onLogicalEndCellFocused(e);
            onLogicalRowsSelectionChanged();
        },
        getRowId: (node) => {
            return node.data.id;
        },
        onBodyScrollEnd: function(event) {
            // Handles the case where the horizontal scroll is triggered when it shouldn't be so it ignores it
            if (!(prevLeft == event.left || Math.abs(prevLeft - event.left) == 1)) {
                if (autoCell && event.direction == "horizontal") {
                    autoCell.stopEditing();
                }
            }
            prevLeft = event.left;

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

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

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

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

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

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

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

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

        // Visible (filtered) rows
        const total = api.getDisplayedRowCount();

        // Selected rows (visible only, matching your dest page behavior)
        const selected = window.getSelectedRows(true).length;

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

        setText('srcSummaryTotalValue', total);
        setText('srcSummarySelectedValue', selected);
    }

    (function hookSrcSummary() {
        const go = window.logicalEndsGridOptions;
        if (!go) {
            document.addEventListener('DOMContentLoaded', hookSrcSummary, { 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;
                    updateSrcSummaryBar();
                    return r;
                };
            });

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

        setTimeout(updateSrcSummaryBar, 0);
    })();

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

        displayDialog("LoadingModal");

        createSrcGridView(true); // Grid for implied sources.
        createSrcGridView(false); // Grid for basic sources.
        setSrcViewMode(logicalEndContext.isImpliedSrcMode()); // Initialize view mode and build view elements.
        loadImpliedSrcConfig();

        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);
        updateVisibleColumnsTable();

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

        selectTemplate(1, "SDI");
        onChangeChPer();
        // Default select the first device in Channels Mapping
        let deviceList = {{.Devices}};
        if (deviceList) {
            $("input[name='devices']:first").click();
            enableUiButton("channel");
            enableUiButton("bulkMapping");
        } else {
            disableUiButton("channel");
            disableUiButton("bulkMapping");
            portGridOptions.api.hideOverlay();
            channelGridOptions.api.hideOverlay();
        }
        populateAliasSetDropdown(pSourceTypeStr);
        defaultFilter = logicalEndsGridOptions.api.getFilterModel();
        showLogicalEndTallyColumn(pSourceType);
        window.addEventListener(DBMODE_TABLE, function(event) {
            // DB mode change shall affect basic table only.
            handleLogicalEndModeChangeWrapper(event, srcGridOptionsBasic.context.columnDefsBase);
        });
        onLogicalRowsSelectionChanged();
        columnVisibilityGridOptions.onCellValueChanged = onColumnVisibiltyChanged;
        getUIIDBaseSetting(updateUiIdBase);
    });

    function onSrcGridReady(params) {
        initSrcGridFilters(params);
    }

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

    function onRowClicked() {
        setSelectAll(false);
    }

    function onSourceCellValueChanged(event) {
        switch (event.column.colId) {
            case "name":
                if (!event.newValue) {
                    return;
                }
                event.newValue = event.newValue.trim();
                if (!validateString(event.newValue)) {
                    displayErrorDialog(NameErrorMessage);
                    populateLogicalEndTable(pSourceTypeStr);
                    return;
                }
                break;
            case "tally":
                if (event.newValue && !CheckTallySyntax(event.newValue)) {
                    displayErrorDialog(TallyErrorMessage);
                    populateLogicalEndTable(pSourceTypeStr);
                    return;
                }
                break;
            case "description":
                break;
            default:
                // Check if the column ID is between 1 and 16
                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(pSourceTypeStr, [event.data]);
        }
    }

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

    function fillSources(modalName, progressBarGuid) {
        let firstSrcData = JSON.parse(sessionStorage.getItem('firstLogicalEndData'));
        let name = "";
        let startCount = 0;
        if (firstSrcData) {
            name = firstSrcData.prefix;
            startCount = firstSrcData.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=" + pSourceType
        ];
        $.ajax({
            url: "/source/fillPort?" + urlParameters.join("&"),
            success: () => {
                progressBarKillMessageOverride = false;
                hideDialog(modalName);
            },
            error: (err) => {
                progressBarKillMessageOverride = false;
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

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

    function resetSourceIDs() {
        displayConfirmationDialog(
            "Warning: 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.",
            "Reset",
            "executeResetSourceIDs()",
            "Confirm Reset all IDs",
            "icon-reset-id icon-white"
        );
    }

    function executeResetSourceIDs() {
        displayDialog("LoadingModal");
        $.ajax({
            url: "/source/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 SOURCE_TABLE:
                case SOURCE_LEVEL_CHANNEL_TABLE:
                case TIELINE_TABLE:
                case TEMPLATE_TABLE:
                case LEVEL_TABLE:
                case DATABASE_TABLE:
                case ALIAS_SET_TABLE:
                case CHANNEL_ALIAS_TABLE:
                case SOURCE_ALIAS_TABLE:
                case SLOT_TABLE:
                case PORT_TABLE:
                case CHANNEL_TABLE:
                case CONFIGURATION_TABLE:
                    handleLogicalEndsDSChange(msg, pSourceType);
                    break;
                case UIID_BASE_NUMBER:
                    getUIIDBaseSetting(updateUiIdBase);
                    break;
                case DEVICE_TABLE:
                    handleLogicalEndsDSChange(msg, pSourceType);
                    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, "in");
    }

    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)),
                "in"
            );
        }
    }

    function showSourcesPreview() {
        const count = parseInt(document.getElementById("sourceCount").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("sourcesToAdd").value = newNames.join(", ");
    }

    function showAddSourceDialog() {
        document.getElementById('logicalEndPrefix').value = "";
        document.getElementById('startCount').value = 1;
        document.getElementById('sourceCount').value = 1;
        updateStartCountFromPrefix("addLogicalEnd");
        displayDialog("addSourceModal");
    }

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

    function addSources() {
        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 sourceCount = document.getElementById('sourceCount').value;
        if (!isNumeric(sourceCount)) {
            errorList.push(CountErrorMessage);
        }
        if (errorList.length != 0) {
            displayErrorDialog(showErrorsFromList(errorList));
            return;
        }
        displayProgressBar("Adding Sources", "Sending initial data...", function(guid) {
            const urlParameters = [
                getProgressBarURLParameter(guid),
                "startCount=" + startCount,
                "sourceCount=" + sourceCount,
                "logicalEndPrefix=" + encodeURIComponent(logicalEndPrefix),
            ];
            $.ajax({
                url: "/source/add?" + urlParameters.join("&"),
                success: () => {
                    // Note: No need to deal with "pending progress" for delayed creation of implied sources here,
                    // because they depend on mappings to be created. See also: fillSources.
                    hideDialog("addSourceModal");
                    hideDialog("LoadingModal");
                },
                error: (err) => {
                    const displayMessage = err.responseText || JSON.stringify(err);
                    displayErrorDialog(displayMessage);
                    if (displayMessage.includes("You have exceeded the maximum number of")) {
                        hideDialog("addSourceModal");
                        hideDialog("LoadingModal");
                    }
                }
            });
        })
    }

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

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

    function handleSrcRename() {
        if (logicalEndContext.isImpliedSrcMode()) {
            showImpliedSrcSuffixModal(); // Implied source suffix rename dialog.
        } else {
            renameCheck(); // Basic rename dialog.
        }
    }

    function createSrcGridView(showImplied) {
        let gridConf = showImplied ? srcGridOptionsImplied : srcGridOptionsBasic;
        let gridDiv = document.getElementById(showImplied ? "srcGridDivImplied" : "srcGridDivBasic");
        gridDiv.ag_grid = new agGrid.Grid(gridDiv, gridConf);
        gridConf.context.gridContainer = gridDiv;
    }

    function initSrcGridFilters(gridEvent) {
        let colApi = gridEvent.columnApi;
        colApi.getColumns().forEach(column => {
            // Set default filter params for all columns except parentId (hidden), which needs its own filter.
            let colDef = column.getColDef();
            colDef.filterParams = (colDef.field === "parentId") ? null : containsFilterParams;
        });

        gridEvent.api.setFilterModel(gridEvent.context.filterModel);
    }

    function toggleChannelDrawerSrc(kind) {
        if (toggleChannelDrawer(kind) && logicalEndContext.isImpliedSrcMode()) {
            setSrcViewMode(false); // Auto-switch to basic mode when opening drawer.
        }
    }

    function toggleSrcViewMode() {
        setSrcViewMode(!logicalEndContext.isImpliedSrcMode());
    }

    function setSrcViewMode(showImplied) {
        if (showImplied) {
            toggleChannelDrawer("forceHide");
        }

        logicalEndContext.setImpliedSrcMode(showImplied);
        let gridConf = logicalEndContext.getGridOptions();

        resetSelectedCells(gridConf);
        updateGeneralButtons("setSrcViewMode:implied=" + showImplied);

        document.getElementById("srcGridDivBasic").style.display = showImplied ? "none" : "";
        document.getElementById("srcGridDivImplied").style.display = showImplied ? "" : "none";

        let button = document.getElementById("toggleImpliedSrcViewButton");
        if (button && !button.disabled) {
            button.style.backgroundColor = showImplied ? bgColorButtonSelected : bgColorButtonNormal;
        }
    }

    function loadImpliedSrcConfig() {
        $.ajax({
            url: urlGetImpliedSrcMode,
            success: result => {
                dbImpliedSourcesEnabled = result && String(result.value).toLowerCase() === "true";
                if (!dbImpliedSourcesEnabled && logicalEndContext.isImpliedSrcMode()) {
                    setSrcViewMode(false); // Switch to basic view if implied sources are disabled in configuration.
                    hideImpliedSrcSuffixModal(); // Close the Implied Suffix Rename dialog if it's open.
                }
                refreshImpliedSrcViewButtons();
            },
        });
    }

    function refreshImpliedSrcViewButtons() {
        // Show/Hide "Auto-configured audio sources" in toolbar and menu.
        document.querySelectorAll(".implied-src-mode-toggle").forEach(el => el.classList.toggle("implied-src-mode-toggle", !dbImpliedSourcesEnabled));
    }

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

<!-- Filler from device, slot, ports drawer -->
{{ template "logicalEndChannels" . }}

<div class="modal" id="addSourceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addSourceModalLabel">
    <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="addSourceModalLabel"><i class="icon-add icon-white"></i>Add Sources</span>
                <span class="btn btn-transparent" onclick="hideDialog('addSourceModal');"><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" id="startCount" value="1" tabindex="1" oninput="showSourcesPreview();" onpropertychange="showSourcesPreview();"/></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="sourceCount" id="sourceCount" value="1" tabindex="2" onchange="showSourcesPreview();" onpropertychange="showSourcesPreview();" min="1"/></span>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label">Preview:</td>
                        <td class="col-data-input">
                            <input class="form-control rounded-0 preview-size-sources read-only" placeholder="None" tabindex="3" name="sourcesToAdd" id="sourcesToAdd" readonly/>
                        </td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="5" onclick="hideDialog('addSourceModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="4" onclick="addSources();">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

{{ template "copyPaste" . }}

{{ template "templateEditor" . }}

{{ template "slotsSelectionEditor" . }}

{{ template "renameModal" . }}

{{ template "removeModal" . }}

{{ template "logicalImportExport" . }}

{{ template "impliedSrcSuffixDialog" . }}

{{ template "showColumnVisibilityModal" . }}

{{ template "progressbar" . }}

{{ template "uploadFile" . }}

{{ end }}