{{ define "paneldata" }}
<link href="/static/css/pages/panel.css" rel="stylesheet">

    <ul class="nav nav-subtabs" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="tablinks subtab-button active" id="levels-tab" data-bs-toggle="tab" data-bs-target="#levels" type="button" role="tab" aria-controls="data" aria-selected="true"><i class="icon-levels"></i>Levels</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="subtab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
        </li> 
        <li class="nav-item" role="presentation">
            <button class="tablinks subtab-button" id="sources-tab" data-bs-toggle="tab" data-bs-target="#sources" type="button" role="tab" aria-controls="Layout" aria-selected="false"><i class="icon-sources"></i>Sources</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="subtab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
        </li> 
        <li class="nav-item" role="presentation">
            <button class="tablinks subtab-button" id="destinations-tab" data-bs-toggle="tab" data-bs-target="#destinations" type="button" role="tab" aria-controls="Layout" aria-selected="false"><i class="icon-destinations"></i>Destinations</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="subtab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
        </li> 
        <li class="nav-item" role="presentation" id="salvoOption">
            <button class="tablinks subtab-button" id="salvos-tab" data-bs-toggle="tab" data-bs-target="#salvos" type="button" role="tab" aria-controls="Layout" aria-selected="false"><i class="icon-salvos"></i>Salvos</button>
        </li>
        <li class="nav-item" role="presentation" id="salvoOptionSeparator">
            <button class="subtab-separator" id="salvos-tabSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="tablinks subtab-button" id="mixers-tab" data-bs-toggle="tab" data-bs-target="#mixers" type="button" hidden="hidden" role="tab"  aria-controls="Layout" aria-selected="false"><i class="icon-mixer-partition"></i>Mixers</button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="subtab-separator" id="mixers-tabSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
        </li>
          <li class="nav-item" role="presentation">
              <button class="tablinks subtab-button" id="aliassets-tab" data-bs-toggle="tab" data-bs-target="#aliassets" type="button" role="tab" aria-controls="Layout" aria-selected="false"><i class="icon-aliases"></i>Alias Sets</button>
          </li>
          <li class="nav-item" role="presentation">
              <button class="subtab-separator" id="aliassets-tabSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
          </li>

          <li class="nav-item" role="presentation">
              <button class="tablinks subtab-button" id="favorites-tab" data-bs-toggle="tab" data-bs-target="#favorites" type="button" role="tab" aria-controls="Layout" aria-selected="false"><i class="icon-favorites"></i>Favorites</button>
          </li>
          <li class="nav-item" role="presentation">
              <button class="subtab-separator" id="favorites-tabSeparator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
          </li>
    </ul>
    <div class="tab-content panel-editor-data-style">
        <!-- Levels window -->
        <div class="tab-pane show active" id="levels" role="tabpanel" aria-labelledby="levels-tab" style="height:100%;width:100%">
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availableLevelsGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="this.disabled = true;onAssignChanged(availLevelsGridOptions, 'addElements', pLevelType, false)" class="btn btn-assign-icon" id="assignlevelButton"><i class="icon-assign" id="assignlevelImg"></i></button>
                        <button onclick="this.disabled = true;onAssignChanged(panelLevelsGridOptions, 'removeElements', pLevelType, false)" class="btn btn-assign-icon" id="unassignlevelButton"><i class="icon-unassign" id="unassignlevelImg"></i></button>
                        <button onclick="this.disabled = true;onAssignChanged(availLevelsGridOptions, 'addElements', pLevelType, true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAlllevelButton"><i class="icon-assign-all" id="assignAlllevelImg"></i></button>
                        <button onclick="this.disabled = true;onAssignChanged(panelLevelsGridOptions, 'removeElements', pLevelType, true)" class="btn btn-assign-icon" id="unassignAlllevelButton"><i class="icon-unassign-all" id="unassignAlllevelImg"></i></button>
                    </div>
                </div>
                <div class="col panel-data-table">
                    <nav class="navbar navbar-expand">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li>
                                    <button class="btn btn-nav-icon" id="levelUpButton" onclick="onAssignMoved(pLevelType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up"><i class="icon-up icon-btn" id="levelUpImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="levelDownButton" onclick="onAssignMoved(pLevelType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down"><i class="icon-down icon-btn" id="levelDownImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="levelTopButton" onclick="onAssignMoved(pLevelType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top"><i class="icon-top icon-btn" id="levelTopImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="levelBottomButton" onclick="onAssignMoved(pLevelType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom"><i class="icon-bottom icon-btn" id="levelBottomImg"></i></button>
                                </li>
                                <li>
                                    <span><i class="icon-separator"></i></span>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="levelAlphabeticSortButton" onclick="onSortChanged(pLevelType, alphabetSort)" data-toggle="tooltip" data-placement="top" title="Alphabet Sort"><i class="icon-sorting-alphabetical icon-btn" id="levelAlphabetSortImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="levelDatabaseSortButton" onclick="onSortChanged(pLevelType, databaseSort)" data-toggle="tooltip" data-placement="top" title="Database Sort"><i class="icon-sorting-db icon-btn" id="levelDatabaseSortImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="panelLevelsGrid" style="height: 100%;width: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Sources window -->
        <div class="tab-pane" id="sources" role="tabpanel" aria-labelledby="sources-tab" style="height:100%;width:100%">
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar" id="srcToolbarAvailFiller"></div>
                    <nav class="navbar navbar-expand" id="srcToolbarAvail">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li>
                                    <button class="btn btn-nav-icon" id="impliedSrcHide" onclick="onImpliedSrcHide(this, 'impliedSrcGroupAvail')" data-toggle="tooltip" data-placement="top" title="Hide auto-configured sources"><i class="icon-implied-src-hide icon-btn" id="impliedSrcHideImg"></i></button>
                                    <button class="btn btn-nav-icon" id="impliedSrcGroupAvail" onclick="onImpliedSrcGroup(this)" data-toggle="tooltip" data-placement="top" title="Assign auto-configured sources along with corresponding basic source"><i class="icon-implied-src-group icon-btn" id="impliedSrcGroupAvailImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availableSourcesGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="handleAddRemove(this, false, pSourceType, false)" class="btn btn-assign-icon" id="assignsourceButton"><i class="icon-assign" id="assignsourceImg"></i></button>
                        <button onclick="handleAddRemove(this, true, pSourceType, false)" class="btn btn-assign-icon" id="unassignsourceButton"><i class="icon-unassign" id="unassignsourceImg"></i></button>
                        <button onclick="handleAddRemove(this, false, pSourceType, true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAllsourceButton"><i class="icon-assign-all" id="assignAllsourceImg"></i></button>
                        <button onclick="handleAddRemove(this, true, pSourceType, true)" class="btn btn-assign-icon" id="unassignAllsourceButton"><i class="icon-unassign-all" id="unassignAllsourceImg"></i></button>
                    </div>
                </div>
                <div class="col panel-data-table">
                    <nav class="navbar navbar-expand">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li class="implied-src-mode-toggle">
                                    <button class="btn btn-nav-icon" id="impliedSrcGroupAssigned" onclick="onImpliedSrcGroup(this)" data-toggle="tooltip" data-placement="top" title="Unassign auto-configured sources along with corresponding basic source"><i class="icon-implied-src-group icon-btn" id="impliedSrcGroupAssignedImg"></i></button>
                                </li>
                                <li class="implied-src-mode-toggle">
                                    <span><i class="icon-separator"></i></span>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="sourceUpButton" onclick="onAssignMoved(pSourceType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up"><i class="icon-up icon-btn" id="sourceUpImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="sourceDownButton" onclick="onAssignMoved(pSourceType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down"><i class="icon-down icon-btn" id="sourceDownImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="sourceTopButton" onclick="onAssignMoved(pSourceType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top"><i class="icon-top icon-btn" id="sourceTopImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="sourceBottomButton" onclick="onAssignMoved(pSourceType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom"><i class="icon-bottom icon-btn" id="sourceBottomImg"></i></button>
                                </li>
                                <li>
                                    <span><i class="icon-separator"></i></span>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="sourceAlphabeticSortButton" onclick="onSortChanged(pSourceType, alphabetSort)" data-toggle="tooltip" data-placement="top" title="Alphabet Sort"><i class="icon-sorting-alphabetical icon-btn" id="sourceAlphabetSortImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="sourceDatabaseSortButton" onclick="onSortChanged(pSourceType, databaseSort)" data-toggle="tooltip" data-placement="top" title="Database Sort"><i class="icon-sorting-db icon-btn" id="sourceDatabaseSortImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="panelSourcesGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Destinations window -->
        <div class="tab-pane" id="destinations" role="tabpanel" aria-labelledby="destinations-tab" style="height:100%;width:100%">
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availableDestinationsGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="this.disabled = true;onAssignChanged(availDestinationsGridOptions, 'addElements', pDestinationType, false)" class="btn btn-assign-icon" id="assigndestButton"><i class="icon-assign" id="assigndestImg"></i></button>
                        <button onclick="this.disabled = true;onAssignChanged(panelDestinationsGridOptions, 'removeElements', pDestinationType, false)" class="btn btn-assign-icon" id="unassigndestButton"><i class="icon-unassign" id="unassigndestImg"></i></button>
                        <button onclick="this.disabled = true;onAssignChanged(availDestinationsGridOptions, 'addElements', pDestinationType, true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAlldestButton"><i class="icon-assign-all" id="assignAlldestImg"></i></button>
                        <button onclick="this.disabled = true;onAssignChanged(panelDestinationsGridOptions, 'removeElements', pDestinationType, true)" class="btn btn-assign-icon" id="unassignAlldestButton"><i class="icon-unassign-all" id="unassignAlldestImg"></i></button>
                    </div>
                </div>
                <div class="col panel-data-table">
                    <nav class="navbar navbar-expand">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li>
                                    <button class="btn btn-nav-icon" id="destUpButton" onclick="onAssignMoved(pDestinationType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up"><i class="icon-up icon-btn" id="destUpImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="destDownButton" onclick="onAssignMoved(pDestinationType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down"><i class="icon-down icon-btn" id="destDownImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="destTopButton" onclick="onAssignMoved(pDestinationType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top"><i class="icon-top icon-btn" id="destTopImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="destBottomButton" onclick="onAssignMoved(pDestinationType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom"><i class="icon-bottom icon-btn" id="destBottomImg"></i></button>
                                </li>
                                <li>
                                    <span><i class="icon-separator"></i></span>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="destinationAlphabeticSortButton" onclick="onSortChanged(pDestinationType, alphabetSort)" data-toggle="tooltip" data-placement="top" title="Alphabet Sort"><i class="icon-sorting-alphabetical icon-btn" id="destAlphabetSortImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="destinationDatabaseSortButton" onclick="onSortChanged(pDestinationType, databaseSort)" data-toggle="tooltip" data-placement="top" title="Database Sort"><i class="icon-sorting-db icon-btn" id="destDatabaseSortImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="panelDestinationsGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Salvos window -->
        <div class="tab-pane" id="salvos" role="tabpanel" aria-labelledby="salvos-tab" style="height:100%;width:100%">
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availableSalvosGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="this.disabled = true; onAssignChanged(availSalvosGridOptions, 'addElements', pSalvoType, false)" class="btn btn-assign-icon" id="assignsalvoButton"><i class="icon-assign" id="assignsalvoImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(panelSalvosGridOptions, 'removeElements', pSalvoType, false)" class="btn btn-assign-icon" id="unassignsalvoButton"><i class="icon-unassign" id="unassignsalvoImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(availSalvosGridOptions, 'addElements', pSalvoType, true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAllsalvoButton"><i class="icon-assign-all" id="assignAllsalvoImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(panelSalvosGridOptions, 'removeElements', pSalvoType, true)" class="btn btn-assign-icon" id="unassignAllsalvoButton"><i class="icon-unassign-all" id="unassignAllsalvoImg"></i></button>
                    </div>
                </div>
                <div class="col panel-data-table">
                    <nav class="navbar navbar-expand">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li>
                                    <button class="btn btn-nav-icon" id="salvoUpButton" onclick="onAssignMoved(pSalvoType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up"><i class="icon-up icon-btn" id="salvoUpImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="salvoDownButton" onclick="onAssignMoved(pSalvoType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down"><i class="icon-down icon-btn" id="salvoDownImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="salvoTopButton" onclick="onAssignMoved(pSalvoType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top"><i class="icon-top icon-btn" id="salvoTopImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="salvoBottomButton" onclick="onAssignMoved(pSalvoType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom"><i class="icon-bottom icon-btn" id="salvoBottomImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="panelSalvosGrid" style="height: 100%;width: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Mixers window -->
        <div class="tab-pane " id="mixers" role="tabpanel" aria-labelledby="mixers-tab" style="height:100%;width:100%">
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availMixerPartitionsGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="this.disabled = true; onAssignChanged(availMixerPartitionsGridOptions, 'addElements', pMixerType, false)" class="btn btn-assign-icon" id="assignmixerButton"><i class="icon-assign" id="assignmixerImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(mixerPartitionsGridOptions, 'removeElements', pMixerType, false)" class="btn btn-assign-icon" id="unassignmixerButton"><i class="icon-unassign" id="unassignmixerImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(availMixerPartitionsGridOptions, 'addElements', pMixerType, true)" class="btn btn-assign-icon" style="margin-top: 60px;" id="assignAllmixerButton"><i class="icon-assign-all" id="assignAllmixerImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(mixerPartitionsGridOptions, 'removeElements', pMixerType, true)" class="btn btn-assign-icon" id="unassignAllmixerButton"><i class="icon-unassign-all" id="unassignAllmixerImg"></i></button>
                    </div>
                </div>
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                    <div id="mixerPartitionsGrid" style="height: 100%;width: 100%" class="ag-theme-balham-dark"></div>
                </div>
                </div>
            </div>
        </div>

        <!-- Alias Sets window -->
        <div class="tab-pane" id="aliassets" role="tabpanel" aria-labelledby="aliassets-tab" style="height:100%;width:100%">
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availableAliasSetsGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="this.disabled = true; onAssignChanged(availAliasSetsGridOptions, 'addElements', pAliasType, false)" class="btn btn-assign-icon" id="assignaliasButton"><i class="icon-assign" id="assignaliasImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(panelAliasSetsGridOptions, 'removeElements', pAliasType, false)" class="btn btn-assign-icon" id="unassignaliasButton"><i class="icon-unassign" id="unassignaliasImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(availAliasSetsGridOptions, 'addElements', pAliasType, true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAllaliasButton"><i class="icon-assign-all" id="assignAllaliasImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(panelAliasSetsGridOptions, 'removeElements', pAliasType, true)" class="btn btn-assign-icon" id="unassignAllaliasButton"><i class="icon-unassign-all" id="unassignAllaliasImg"></i></button>
                    </div>
                </div>
                <div class="col panel-data-table">
                    <nav class="navbar navbar-expand">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li>
                                    <button class="btn btn-nav-icon" id="aliasUpButton" onclick="onAssignMoved(pAliasType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up"><i class="icon-up icon-btn" id="aliasUpImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="aliasDownButton" onclick="onAssignMoved(pAliasType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down"><i class="icon-down icon-btn" id="aliasDownImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="aliasTopButton" onclick="onAssignMoved(pAliasType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top"><i class="icon-top icon-btn" id="aliasTopImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="aliasBottomButton" onclick="onAssignMoved(pAliasType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom"><i class="icon-bottom icon-btn" id="aliasBottomImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="panelAliasSetsGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="tab-pane" id="favorites" role="tabpanel" aria-labelledby="favorites-tab" style="height:100%;width:100%">
            <!-- Favorites window - follows standard three-column layout pattern -->
            <div class="row container-data container-panel-data">
                <div class="col panel-data-table">
                    <div class="hide-navbar"></div>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="availableFavoritesGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
                
                <!-- Center Column with Assign/Unassign Buttons -->
                <div class="row-center data-transfer-center-column">
                    <div class="row row-center shift-down-25">
                        <button onclick="this.disabled = true; onAssignChanged(availFavoritesGridOptions, 'addElements', pFavoritesType, false)" class="btn btn-assign-icon" id="assignfavoriteButton"><i class="icon-assign" id="assignfavoriteImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(panelFavoritesGridOptions, 'removeElements', pFavoritesType, false)" class="btn btn-assign-icon" id="unassignfavoriteButton"><i class="icon-unassign" id="unassignfavoriteImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(availFavoritesGridOptions, 'addElements', pFavoritesType, true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAllfavoriteButton"><i class="icon-assign-all" id="assignAllfavoriteImg"></i></button>
                        <button onclick="this.disabled = true; onAssignChanged(panelFavoritesGridOptions, 'removeElements', pFavoritesType, true)" class="btn btn-assign-icon" id="unassignAllfavoriteButton"><i class="icon-unassign-all" id="unassignAllfavoriteImg"></i></button>
                    </div>
                </div>
                
                <div class="col panel-data-table">
                    <nav class="navbar navbar-expand">
                        <div class="container-fluid">
                            <ul class="navbar-nav me-auto">
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteUpButton" onclick="onAssignMoved(pFavoritesType, moveUp)" data-toggle="tooltip" data-placement="top" title="Move Up"><i class="icon-up icon-btn" id="favoriteUpImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteDownButton" onclick="onAssignMoved(pFavoritesType, moveDown)" data-toggle="tooltip" data-placement="top" title="Move Down"><i class="icon-down icon-btn" id="favoriteDownImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteTopButton" onclick="onAssignMoved(pFavoritesType, moveTop)" data-toggle="tooltip" data-placement="top" title="Move to Top"><i class="icon-top icon-btn" id="favoriteTopImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteBottomButton" onclick="onAssignMoved(pFavoritesType, moveBottom)" data-toggle="tooltip" data-placement="top" title="Move to Bottom"><i class="icon-bottom icon-btn" id="favoriteBottomImg"></i></button>
                                </li>
                                <li>
                                    <span><i class="icon-separator"></i></span>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteAlphabeticSortButton" onclick="onSortChanged(pFavoritesType, alphabetSort)" data-toggle="tooltip" data-placement="top" title="Alphabet Sort"><i class="icon-sorting-alphabetical icon-btn" id="favoriteAlphabetSortImg"></i></button>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteDatabaseSortButton" onclick="onSortChanged(pFavoritesType, databaseSort)" data-toggle="tooltip" data-placement="top" title="Database Sort"><i class="icon-sorting-db icon-btn" id="favoriteDatabaseSortImg"></i></button>
                                </li>
                                <li>
                                    <span><i class="icon-separator"></i></span>
                                </li>
                                <li>
                                    <button class="btn btn-nav-icon" id="favoriteLoadResourceButton" onclick="onLoadFavoriteMissingResources()" data-toggle="tooltip" data-placement="top" title="Load missing resources for selected favorite" disabled><i class="icon-load-disabled icon-btn" id="favoriteLoadResourceImg"></i></button>
                                </li>
                            </ul>
                        </div>
                    </nav>
                    <div class="grid-wrapper-panel-logical-ends">
                        <div id="panelFavoritesGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <script type="text/javascript" charset="utf-8">
        const actionAddElements = "addElements";
        const actionRemoveElements = "removeElements";

        const impliedSrcHideButtonId = "impliedSrcHide";
        const impliedSrcGroupAvailButtonId = "impliedSrcGroupAvail";
        const impliedSrcGroupAssignedButtonId = "impliedSrcGroupAssigned";

        const outputMonitorWindowId = 9
        
        // Define pFavoritesType if not already defined
        if (typeof pFavoritesType === 'undefined') {
            var pFavoritesType = 6;
        }
        
        // Sources, Destinations and levels grid columns
        const availPanelColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "parentId", hide: true, getQuickFilterText: () => ''},
            {field: "name", headerName: "Available", suppressMovable: true, comparator: naturalSort},
        ];

        const panelColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "elementId", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "parentId", hide: true, getQuickFilterText: () => ''},
            {field: "name", headerName: "Assigned", suppressMovable: true, comparator: naturalSort},
        ];

        const impliedSrcHideFilter = {
            parentId: {
                type: 'equals',
                filter: 0
            }
        };

        const salvoDivIdPrefix = "salvoTableSelector";
        const alphabetSort = 0;
        const databaseSort = 1;

        class SalvoNameRenderer {
            init(params) {
                this._destroyed = false;
                this.salvoId = params.data.elementId;

                this.eGui = document.createElement('div');

                const nameSpan = document.createElement('span');
                nameSpan.textContent = params.data.name;
                this.eGui.appendChild(nameSpan);

                this.emptyIcon = document.createElement('i');
                this.emptyIcon.className = salvoDivIdPrefix + this.salvoId + ' icon-alarm-warning';
                this.emptyIcon.style.cssText = 'display:none; float:right;';
                this.emptyIcon.setAttribute('data-toggle', 'tooltip');
                this.emptyIcon.setAttribute('data-placement', 'top');
                this.emptyIcon.setAttribute('title', 'Empty Salvo');
                this.eGui.appendChild(this.emptyIcon);

                // Fetch and update icon directly via element reference (avoids DOM search race condition)
                const icon = this.emptyIcon;
                const renderer = this;
                fetch('/salvo/mappings/size?salvoId=' + this.salvoId)
                    .then(response => response.json())
                    .then(data => {
                        if (!renderer._destroyed) {
                            icon.style.display = data ? 'initial' : 'none';
                        }
                    })
                    .catch(() => {});
            }

            getGui() { return this.eGui; }

            refresh(params) { return false; }

            destroy() { this._destroyed = true; }
        }

        const salvoPanelColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "Assigned", suppressMovable: true, comparator: naturalSort,
                cellRendererSelector: (params) => {
                    const salvoNameRendererField = {
                        component: SalvoNameRenderer,
                        params: {},
                    };
                    if (params.data) {
                        return salvoNameRendererField;
                    }
                    return undefined;
                }
            }
        ];

        const availableSalvoPanelColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "Available", suppressMovable: true, comparator: naturalSort,
                cellRendererSelector: (params) => {
                    const salvoNameRendererField = {
                        component: SalvoNameRenderer,
                        params: {},
                    };
                    if (params.data) {
                        return salvoNameRendererField;
                    }
                    return undefined;
                }
            }
        ];

        // Favorites warning icon support (matches Salvos pattern)
        const favoriteDivIdPrefix = "favoriteTableSelector";

        function fetchFavoriteData(favoriteId) {
            // Validate favoriteId before making API call
            if (!favoriteId || favoriteId <= 0) {
                return; // Skip invalid IDs
            }
            fetch('/favorite/details?id=' + favoriteId)
                .then((response) => response.json())
                .then((data) => {
                    updateFavoriteSelectorCell(data.empty, favoriteId);
                })
                .catch((err) => {
                    console.warn("fetchFavoriteData - Error fetching favorite details:", err);
                });
        }

        function updateFavoriteSelectorCell(isEmpty, favoriteId) {
            let divsToUpdate = document.getElementsByClassName(favoriteDivIdPrefix + favoriteId);
            if (divsToUpdate.length > 0) {
                for (let i = 0; i < divsToUpdate.length; i++){
                    // Show icon if favorite IS empty
                    divsToUpdate[i].style.display = isEmpty ? "initial" : "none";
                }
            } else {
                console.warn("updateFavoriteSelectorCell - Unable to find elements with Class: " + favoriteDivIdPrefix + favoriteId)
            }
        }

        class FavoriteNameRenderer {
            init(params) {
                this._destroyed = false;
                this.favoriteId = params.data.elementId;

                this.eGui = document.createElement('div');
                this.eGui.style.display = 'flex';
                this.eGui.style.alignItems = 'center';
                this.eGui.style.justifyContent = 'space-between';
                this.eGui.style.width = '100%';

                // Name span
                const nameSpan = document.createElement('span');
                nameSpan.textContent = params.data.name;
                this.eGui.appendChild(nameSpan);

                // Icons container
                const iconsContainer = document.createElement('span');
                iconsContainer.style.display = 'flex';
                iconsContainer.style.gap = '4px';

                // Red error icon for missing resources (shown immediately based on API data)
                const resourceMissingIcon = document.createElement('i');
                resourceMissingIcon.className = 'icon-alarm-error icon-status-error favResourceMissing' + params.data.elementId;
                resourceMissingIcon.style.display = params.data.resourceMissing ? 'inline-block' : 'none';
                resourceMissingIcon.setAttribute('data-toggle', 'tooltip');
                resourceMissingIcon.setAttribute('data-placement', 'top');
                resourceMissingIcon.setAttribute('title', 'Favorite resources not assigned to this panel');
                iconsContainer.appendChild(resourceMissingIcon);

                // Yellow warning icon for empty favorites (shown via AJAX)
                this.emptyIcon = document.createElement('i');
                this.emptyIcon.className = favoriteDivIdPrefix + params.data.elementId + ' icon-alarm-warning';
                this.emptyIcon.style.display = 'none';
                this.emptyIcon.setAttribute('data-toggle', 'tooltip');
                this.emptyIcon.setAttribute('data-placement', 'top');
                this.emptyIcon.setAttribute('title', 'Empty Favorite');
                iconsContainer.appendChild(this.emptyIcon);

                this.eGui.appendChild(iconsContainer);

                // Fetch and update icon directly via element reference (avoids DOM search race condition)
                if (this.favoriteId && this.favoriteId > 0) {
                    const icon = this.emptyIcon;
                    const renderer = this;
                    fetch('/favorite/details?id=' + this.favoriteId)
                        .then(response => response.json())
                        .then(data => {
                            if (!renderer._destroyed) {
                                icon.style.display = data.empty ? 'initial' : 'none';
                            }
                        })
                        .catch(() => {});
                }
            }

            getGui() { return this.eGui; }

            refresh(params) {
                // Update name
                const nameSpan = this.eGui.querySelector('span');
                if (nameSpan) nameSpan.textContent = params.data.name;

                // Update resourceMissing icon visibility
                const resourceIcon = this.eGui.querySelector('.icon-alarm-error');
                if (resourceIcon) {
                    resourceIcon.style.display = params.data.resourceMissing ? 'inline-block' : 'none';
                }
                return true; // Enable in-place refresh instead of full re-render
            }

            destroy() { this._destroyed = true; }
        }

        const favoritePanelColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "elementId", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "Assigned", suppressMovable: true, comparator: naturalSort,
                cellRendererSelector: (params) => {
                    const favoriteNameRendererField = {
                        component: FavoriteNameRenderer,
                        params: {},
                    };
                    if (params.data) {
                        return favoriteNameRendererField;
                    }
                    return undefined;
                }
            }
        ];

        const availableFavoritePanelColumnDefs = [
            {field: "id", hide: true, maxWidth: 80, getQuickFilterText: () => ''},
            {field: "name", headerName: "Available", suppressMovable: true, comparator: naturalSort,
                cellRendererSelector: (params) => {
                    const favoriteNameRendererField = {
                        component: FavoriteNameRenderer,
                        params: {},
                    };
                    if (params.data) {
                        return favoriteNameRendererField;
                    }
                    return undefined;
                }
            }
        ];

        // panelDataDefaultProps is used by grid options defined in paneleditor.html
        const panelDataDefaultProps = {
            flex: 1,
            resizable: false,
            sortable: true,
            filter: true,
            filterParams: multiFilterCondition,
        };

        // Grid options (availSourcesGridOptions, panelSourcesGridOptions, availMixerPartitionsGridOptions, etc.)
        // are defined in private.paneleditor.html for cross-template access

        function onAvailSourceChanged() {
            if (availSourcesGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assignsource");
            } else {
                disableUiButton("assignsource");
            }
        }

        function onPanelSourceChanged() {
            if (panelSourcesGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("unassignsource");
            } else {
                disableUiButton("unassignsource");
            }
        }

        function onAvailDestinationsChanged() {
            if (availDestinationsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assigndest");
            } else {
                disableUiButton("assigndest");
            }
        }

        function onPanelDestinationsChanged() {
            if (panelDestinationsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("unassigndest");
            } else {
                disableUiButton("unassigndest");
            }
        }

        function onAvailLevelsChanged() {
            if (availLevelsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assignlevel");
            } else {
                disableUiButton("assignlevel");
            }
        }

        function onPanelLevelsChanged() {
            if (panelLevelsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("unassignlevel");
            } else {
                disableUiButton("unassignlevel");
            }
        }

        function onMixerPartitionsChanged() {
            if (mixerPartitionsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("unassignmixer");
            } else {
                disableUiButton("unassignmixer");
            }
        }

        function onAvailSalvosChanged() {
            if (availSalvosGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assignsalvo");
            } else {
                disableUiButton("assignsalvo");
            }
        }

        function onAvailAliasSetsChanged() {
            if (availAliasSetsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assignalias");
            } else {
                disableUiButton("assignalias");
            }
        }

        function onPanelAliasSetsChanged() {
            if (panelAliasSetsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("unassignalias");
            } else {
                disableUiButton("unassignalias");
            }
        }

        function onAvailMixerPartitionsChanged() {
            if (availMixerPartitionsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assignmixer");
            } else {
                disableUiButton("assignmixer");
            }
        }

        function onPanelSalvosChanged() {
            if (panelSalvosGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("unassignsalvo");
            } else {
                disableUiButton("unassignsalvo");
            }
        }

        function onAvailFavoritesChanged() {
            if (availFavoritesGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("assignfavorite");
            } else {
                disableUiButton("assignfavorite");
            }
        }

        function onPanelFavoritesChanged() {
            const selectedRows = panelFavoritesGridOptions.api.getSelectedRows();
            const hasSelection = selectedRows.length > 0;

            if (hasSelection) {
                enableUiButton("unassignfavorite");
            } else {
                disableUiButton("unassignfavorite");
            }

            // Enable "Load Resource" button only if a favorite with missing resources is selected
            const loadBtn = document.getElementById('favoriteLoadResourceButton');
            if (loadBtn) {
                const hasResourceMissing = hasSelection && selectedRows.some(row => row.resourceMissing);
                loadBtn.disabled = !hasResourceMissing;
                const loadIcon = loadBtn.querySelector('i');
                if (loadIcon) {
                    loadIcon.className = hasResourceMissing ? 'icon-load icon-btn' : 'icon-load-disabled icon-btn';
                }
            }
        }

        // Load missing resources for selected favorites to the current panel
        function onLoadFavoriteMissingResources() {
            const panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            if (!panelId) {
                displayWarningDialog('No panel selected');
                return;
            }

            const selectedRows = panelFavoritesGridOptions.api.getSelectedRows();
            if (selectedRows.length === 0) {
                displayWarningDialog('No favorites selected');
                return;
            }

            // Filter to only favorites with missing resources
            const favoritesWithMissingResources = selectedRows.filter(row => row.resourceMissing);
            if (favoritesWithMissingResources.length === 0) {
                displayWarningDialog('Selected favorites have no missing resources');
                return;
            }

            // Call the backend to auto-assign resources (without creating duplicates)
            // Uses dedicated endpoint that only adds resources, not favorites
            const favoriteIds = favoritesWithMissingResources.map(fav => fav.elementId);

            displayDialog("LoadingModal");

            fetch(`/favorite/loadResources?panelId=${panelId}&ids=${favoriteIds.join(',')}`, {
                method: 'POST'
            })
            .then(response => response.json())
            .then(data => {
                hideDialog("LoadingModal");
                if (data.resourcesAdded > 0) {
                    displayInfoDialog(`Successfully added ${data.resourcesAdded} resource(s) to the panel`);
                } else {
                    displayInfoDialog('No new resources needed to be added');
                }
                // Refresh the favorites grid to update resourceMissing flags
                refreshFavoritesGrid();
            })
            .catch(error => {
                hideDialog("LoadingModal");
                console.error('Error loading missing resources:', error);
                displayErrorDialog('Failed to load missing resources: ' + error.message);
            });
        }

        // Refresh the panel favorites grid data
        function refreshFavoritesGrid() {
            const panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            if (panelId && panelFavoritesGridOptions.api) {
                fetch(`/panel/assignedElements?panelId=${panelId}&eTypes=${pFavoritesType}`)
                    .then(response => response.json())
                    .then(data => {
                        const rows = data[pFavoritesType] || [];
                        panelFavoritesGridOptions.api.setRowData(rows);
                        panelFavoritesGridOptions.api.refreshCells({ force: true });
                    })
                    .catch(error => {
                        console.error('Error refreshing favorites grid:', error);
                    });
            }
        }

        /**
         * Refresh resourceMissing flags for all favorites in the panel grid.
         * Called when FAVORITE_MAPPINGS_TABLE changes or resources are modified.
         */
        function refreshFavoritesResourceMissingFlags() {
            const panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            if (!panelId || !panelFavoritesGridOptions?.api) return;

            const selectedIds = panelFavoritesGridOptions.api.getSelectedRows().map(row => row.id);

            fetch(`/panel/assignedElements?panelId=${panelId}&eTypes=${pFavoritesType}`)
                .then(response => response.json())
                .then(data => {
                    if (!panelFavoritesGridOptions?.api) return;
                    const rows = data[pFavoritesType] || [];
                    panelFavoritesGridOptions.api.setRowData(rows);
                    panelFavoritesGridOptions.api.refreshCells({ force: true });
                    // Restore selection
                    panelFavoritesGridOptions.api.forEachNode(node => {
                        if (selectedIds.includes(node.data.id)) node.setSelected(true);
                    });
                    onPanelFavoritesChanged();
                })
                .catch(error => console.error('Error refreshing favorites resourceMissing flags:', error));
        }

        /**
         * Refresh the empty favorite warning icons for all favorites in the panel grid.
         */
        function refreshFavoritesEmptyWarningIcons() {
            if (!panelFavoritesGridOptions?.api) return;
            panelFavoritesGridOptions.api.forEachNode(node => {
                if (node.data?.elementId) fetchFavoriteData(node.data.elementId);
            });
        }

        document.addEventListener('DOMContentLoaded', function () {
            const tables = [
                {id: "availableSourcesGrid", agGridTable: availSourcesGridOptions},
                {id: "panelSourcesGrid", agGridTable: panelSourcesGridOptions},
                {id: "availableDestinationsGrid", agGridTable: availDestinationsGridOptions},
                {id: "panelDestinationsGrid", agGridTable: panelDestinationsGridOptions},
                {id: "availableLevelsGrid", agGridTable: availLevelsGridOptions},
                {id: "panelLevelsGrid", agGridTable: panelLevelsGridOptions},
                {id: "availMixerPartitionsGrid", agGridTable: availMixerPartitionsGridOptions},
                {id: "mixerPartitionsGrid", agGridTable: mixerPartitionsGridOptions},
                {id: "availableSalvosGrid", agGridTable: availSalvosGridOptions},
                {id: "panelSalvosGrid", agGridTable: panelSalvosGridOptions},
                {id: "availableAliasSetsGrid", agGridTable: availAliasSetsGridOptions},
                {id: "panelAliasSetsGrid", agGridTable: panelAliasSetsGridOptions},
                {id: "availableFavoritesGrid", agGridTable: availFavoritesGridOptions},
                {id: "panelFavoritesGrid", agGridTable: panelFavoritesGridOptions}
            ];

            for (let i = 0; i < tables.length; i++) {
                let gridDiv = document.querySelector("#" + tables[i].id);
                document.getElementById(tables[i].id).ag_grid = new agGrid.Grid(gridDiv, tables[i].agGridTable);
            }

            setupInitialButtonStates(); // Setup initial button states.
        });

        function onAssignChanged(grid, action, elementType, isAll) {
            // UR-11286: Need to add buttonElement as a passable ID parameter to set the button enable state
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            if (!panelId) {
                console.error("Panel ID not found in session storage.");
                if (buttonElement) buttonElement.disabled = false;
                return;
            }

            let currentOmDestId = -1;
            let protectedDestName = null;
            let isRemovingDestinations = (action === actionRemoveElements && elementType === pDestinationType);
            let protectedIdSkipped = false;

            if (isRemovingDestinations) {
                let omDestSelect = document.getElementById("outputMonitorDestination");
                if (omDestSelect && typeof omDestSelect.value !== 'undefined' && omDestSelect.value !== null && omDestSelect.value !== "") {
                    let parsedId = parseInt(omDestSelect.value, 10);
                    if (!isNaN(parsedId) && parsedId !== -1) {
                        currentOmDestId = parsedId;
                    } else {
                        console.warn("Could not parse OM Destination select value or it was 'None':", omDestSelect.value);
                        isRemovingDestinations = false;
                    }
                } else {
                    console.warn("OM Destination select not found or value is empty/invalid. Cannot perform check.");
                    isRemovingDestinations = false;
                }
            }

            let idsToSend = [];

            if (isAll) {
                grid.api.forEachNodeAfterFilterAndSort((node) => {
                    if (node && node.data && typeof node.data.id !== 'undefined') {
                        const nodeDataId = node.data.id;
                        if (isRemovingDestinations && nodeDataId === currentOmDestId) {
                            protectedIdSkipped = true;
                            if (!protectedDestName && node.data.name) {
                                protectedDestName = node.data.name;
                            }
                        } else {
                            idsToSend.push(nodeDataId);
                        }
                    }
                });
            } else {
                let selectedRows = grid.api.getSelectedRows();
                if (!selectedRows || selectedRows.length === 0) {
                    console.warn("onAssignChanged called with no rows selected.");
                    if (buttonElement) buttonElement.disabled = false;
                    return;
                }
                selectedRows.forEach(row => {
                    if (row && typeof row.id !== 'undefined') {
                        const rowId = row.id;
                        if (isRemovingDestinations && rowId === currentOmDestId) {
                            protectedIdSkipped = true;
                            if (!protectedDestName && row.name) {
                                protectedDestName = row.name;
                            }
                        } else {
                            idsToSend.push(rowId);
                        }
                    }
                });

                // Include related implied sources if applicable.
                if (grid.addMoreRowsToSend) {
                    idsToSend = grid.addMoreRowsToSend(idsToSend);
                }
            }

            if (protectedIdSkipped) {
                let finalProtectedName = protectedDestName || `ID ${currentOmDestId}`;
                displayWarningDialog(`Destination "${finalProtectedName}" is currently selected as the Output Monitor Destination and was not unassigned.`);
            }

            if (idsToSend.length > 0) {
                displayDialog("LoadingModal");
                $.ajax({
                    url: "/panel/" + action + "?panelId=" + panelId + "&ids=" + idsToSend.join(',') + "&eType=" + elementType,
                    method: 'POST',
                    success: () => {
                        hideDialog("LoadingModal");
                        // Button re-enable handled here as fallback to WebSocket update
                        document.querySelectorAll('.btn-assign-icon').forEach(btn => btn.disabled = false);
                    },
                    error: (err) => {
                        document.querySelectorAll('.btn-assign-icon').forEach(btn => btn.disabled = false); // Re-enable on error
                        displayErrorDialog(err.responseText || JSON.stringify(err));
                    }
                });
            } else {
                console.warn("No elements to process after filtering.");
                document.querySelectorAll('.btn-assign-icon').forEach(btn => btn.disabled = false); // Re-enable if nothing was sent
            }
        }

        function getTableGridForElement (elementType) {
            switch (elementType) {
                case pLevelType: return panelLevelsGridOptions;
                case pSourceType: return panelSourcesGridOptions;
                case pDestinationType: return panelDestinationsGridOptions;
                case pSalvoType: return panelSalvosGridOptions;
                case pAliasType: return panelAliasSetsGridOptions;
                case pFavoritesType: return panelFavoritesGridOptions;
                case pMixerType: return mixerPartitionsGridOptions;
                default:
                    console.error(arguments.callee + ": Element Type: '" + elementType + "' does not have support AG Grid table for panel configuration");
                    return null;
            }
        }

        function onAssignMoved(elementType, directionType) {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            if (!panelId) {
                console.error(arguments.callee + ": Unable to retrieve session data from key: " + sessionKeys.PANEL_SELECTED);
                return;
            }

            let grid = getTableGridForElement(elementType);
            if (!grid) {
                console.error(arguments.callee + ": Unable to find table for element: " + elementType);
                return;
            }

            let startIndex = -1;
            let index = 0;
            let foundStartingIndex = false;

            let selectedRows = [];
            let unselectedRows = [];
            let newOrderedRows = [];

            grid.api.forEachNode((node) => {
                if (node.isSelected()) {
                    selectedRows.push(node.data);
                    if (!foundStartingIndex) {
                        startIndex = index;
                        foundStartingIndex = true;
                    }
                } else {
                    unselectedRows.push(node.data);
                }
                index++;
            });

            if (selectedRows.length < 1) {
                console.warn(arguments.callee + ": No selected rows to move");
                return;
            }
            let firstElements, remainingElements = [];
            switch (directionType) {
                case moveTop:
                    newOrderedRows = selectedRows.concat(unselectedRows);
                    break;
                case moveUp:
                    firstElements = unselectedRows.slice(0, startIndex-1);
                    remainingElements = unselectedRows.slice(startIndex-1);
                    newOrderedRows = firstElements.concat(selectedRows, remainingElements);
                    break;
                case moveBottom:
                    newOrderedRows = unselectedRows.concat(selectedRows);
                    break;
                case moveDown:
                    firstElements = unselectedRows.slice(0, startIndex + 1);
                    remainingElements = unselectedRows.slice(startIndex + 2);
                    newOrderedRows = firstElements.concat(selectedRows, remainingElements);
                    break;
                default:
                    console.error(arguments.callee + ": Unsupported direction provided: " + directionType);
                    return;
            }
            updateElementOrder(panelId, elementType, newOrderedRows);
        }

        function onSortChanged(elementType, sortType) {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            if (!panelId) {
                console.error(arguments.callee + ": Unable to retrieve session data from key: " + sessionKeys.PANEL_SELECTED);
                return;
            }

            let grid = getTableGridForElement(elementType);
            if (!grid) {
                console.error(arguments.callee + ": Unable to find table for element: " + elementType);
                return;
            }

            let rowData = [];
            grid.api.forEachNode((node) => {
                rowData.push(node.data);
            });

            switch (sortType) {
                case alphabetSort:
                    rowData = rowData.sort((a, b) => {
                        return naturalSort(a.name, b.name);
                    });
                    break;
                case databaseSort:
                    rowData = rowData.sort((a, b) => {
                        return a.elementId - b.elementId;
                    });
                    break;
                default:
                    console.error(arguments.callee + ": Unsupported sort type provided: " + sortType);
                    return;
            }
            updateElementOrder(panelId, elementType, rowData);
        }

        function updateElementOrder(panelId, elementType, newElementData) {
            if (newElementData.length < 1) {
                console.warn(arguments.callee + ": No data to update for panel");
                return;
            }
            for (let i = 0; i < newElementData.length; i++) {
                newElementData[i].uiId = i;
            }
            const updatedData = {
                panelId: parseInt(panelId),
                eType: elementType,
                data: newElementData
            };
            displayDialog("LoadingModal");
            $.post("/panel/updateElements", JSON.stringify(updatedData))
                .done(() => {
                    hideDialog("LoadingModal");
                })
                .fail((err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                });
        }
        
        function handleAddRemove(obj, isRemove, dataType, isAll) {
            obj.disabled = true;
            const grid = getGridForType(dataType, isRemove);
            if (grid) {
                onAssignChanged(grid, isRemove ? actionRemoveElements : actionAddElements, dataType, isAll);
            }
        }   

        function getGridForType(dataType, isRemove) {
            let grid;
            switch (dataType) {
                case pSourceType:
                    grid = isRemove ? panelSourcesGridOptions : availSourcesGridOptions;
                    break;
                case pDestinationType:
                    grid = isRemove ? panelDestinationsGridOptions : availDestinationsGridOptions;
                    break;
                case pLevelType:
                    grid = isRemove ? panelLevelsGridOptions : availLevelsGridOptions;
                    break;
                case pSalvoType:
                    grid = isRemove ? panelSalvosGridOptions : availSalvosGridOptions;
                    break;
                case pAliasType:
                    grid = isRemove ? panelAliasSetsGridOptions : availAliasSetsGridOptions;
                    break;
                case pMixerType:
                    grid = isRemove ? mixerPartitionsGridOptions : availMixerPartitionsGridOptions;
                    break;
                default:
                    console.error("getGridForType - Unsupported data type: " + dataType);
                    return null;
            }
            return grid;
        }

        function setupInitialButtonStates() {
            // Some buttons are specific to implied source mode.
            $.ajax({
                url: urlGetImpliedSrcMode,
                success: (result) => {
                    const impliedMode = (result && String(result.value).toLowerCase() === "true");
                    refreshImpliedModeRelatedButtons(impliedMode);
                }
            });
        }

        function refreshImpliedModeRelatedButtons(impliedMode) {
            // Show/Hide ACA related buttons based on current DB.
            // Available: show/hide entire toolbar because there are no other buttons.
            setElementVisibleById("srcToolbarAvail", impliedMode)
            setElementVisibleById("srcToolbarAvailFiller", !impliedMode)
            // Assigned: show/hide buttons and separator.
            document.querySelectorAll(".implied-src-mode-toggle").forEach(el => el.classList.toggle("implied-src-mode-toggle", !impliedMode));

            // Enable/Disable buttons that depend on implied source mode.
            for (const id of [impliedSrcHideButtonId, impliedSrcGroupAvailButtonId, impliedSrcGroupAssignedButtonId]) {
                let button = document.getElementById(id);
                if (button) {
                    button.disabled = !impliedMode;
                    if (!button.disabled) {
                        const selected = getToggleButtonState(id); // Restore previous selection state upon load.
                        setToggleButtonState(button, selected);
                        if (id === impliedSrcHideButtonId) {
                            applyImpliedSrcHideState(selected, impliedSrcGroupAvailButtonId)
                        }
                    }
                }
            }
        }

        function onImpliedSrcHide(button, ...dependIds) {
            const selected = toggleButtonSelectedState(button.id);
            applyImpliedSrcHideState(selected, dependIds);
        }

        function onImpliedSrcGroup(button) {
            toggleButtonSelectedState(button.id); // Simply toggle state, which will be used during assign/unassign.
        }

        function applyImpliedSrcHideState(hiding, ...dependIds) {
            // Apply/Clear implied source filtering to available sources.
            availSourcesGridOptions.api.setFilterModel(hiding ? impliedSrcHideFilter : null);
            availSourcesGridOptions.api.onFilterChanged();

            // Make sure hidden rows are deselected.
            availSourcesGridOptions.api.forEachNode((node) => {
                if (!node.displayed) {
                    node.setSelected(false);
                }
            });

            // Refresh dependent buttons.
            for (let depId of dependIds) {
                const field = document.getElementById(depId);
                if (field) {
                    // Deselect and disable if hiding implied sources.
                    setToggleButtonState(field, false);
                    field.disabled = hiding;
                }
            }
        }

        function toggleButtonSelectedState(id) {
            const button = document.getElementById(id);
            if (button && !button.disabled) {
                const wasSelected = getToggleButtonState(id);
                return setToggleButtonState(button, !wasSelected);
            }
            return false;
        }

        function getToggleButtonState(id) {
            return sessionStorage.getItem(id) === "true"; // Get state from session storage.
        }

        function setToggleButtonState(button, selected) {
            button.style.backgroundColor = selected ? bgColorButtonSelected : bgColorButtonNormal;
            sessionStorage.setItem(button.id, String(selected)); // Save state. Will remain after reload.
            return selected;
        }

        function isImpliedSrcGroupActive(grid) {
            let buttonId;

            // Must compare api references, as grid objects may be different when passed via events.
            if (grid.api === availSourcesGridOptions.api) {
                buttonId = impliedSrcGroupAvailButtonId;
            } else if (grid.api === panelSourcesGridOptions.api) {
                buttonId = impliedSrcGroupAssignedButtonId;
            } else {
                return false;
            }

            return getToggleButtonState(buttonId);
        }

        function getSourceRowsToSend(grid, selectedIds) {
            if (!isImpliedSrcGroupActive(grid)) {
                return selectedIds;
            }

            // Implied grouping mode: include implied children along with selected parents.
            let selectedMap = new Map(); // id to rowData.
            for (let rowId of selectedIds) {
                selectedMap.set(rowId, true);
            }
            let selectedIdsNew = [];
            grid.api.forEachNode(node => {
                const rowData = node.data;
                const rowId = rowData.id;
                if (selectedMap.get(rowId) || isParentSourceSelected(grid, rowData, selectedMap)) {
                    selectedIdsNew.push(rowId);
                }
            });

            return selectedIdsNew;
        };

        function isParentSourceSelected(grid, rowData, selectedMap) {
            const parentId = rowData.parentId;
            if (parentId <= 0) {
                return false;
            }

            // Must handle differently, because Assigned entries have elementId as actual source ID.
            if (grid === availSourcesGridOptions) {
                return selectedMap.get(parentId);
            }
            if (grid === panelSourcesGridOptions) {
                return isAssignedRowSelected(grid, parentId, selectedMap);
            }

            // Not applicable grid.
            return false;
        }

        function isAssignedRowSelected(grid, dataId, selectedMap) {
            for (let key of selectedMap.keys()) {
                let node = grid.api.getRowNode(key); // getRowId() must be set properly in grid options.
                if (node && node.data.elementId === dataId) {
                    return true;
                }
            }
            return false;
        }

    </script>
{{ end }}