{{ define "favorites-panels" }}
<div class="tab-pane" id="panelsPane" role="tabpanel" aria-labelledby="panels-tab" style="height:100%;width:100%;">

    <!-- Split container for three columns: Available | Buttons | Assigned -->
    <div class="row container-data container-panel-data">

        <!-- Available Panels Section -->
        <div class="col panel-data-table">
            <div class="hide-navbar"></div>
            <div class="grid-wrapper-panel-logical-ends">
                <div id="availablePanelsGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
            </div>
        </div>

        <!-- Arrow Buttons Center Column -->
        <div class="row-center data-transfer-center-column">
            <div class="row row-center shift-down-25">
                <button onclick="this.disabled = true; onAssignFavoriteToPanel(false)" class="btn btn-assign-icon" id="assignFavButton" disabled>
                    <i class="icon-assign" id="assignFavImg"></i>
                </button>
                <button onclick="this.disabled = true; onUnassignFavoriteFromPanel(false)" class="btn btn-assign-icon" id="unassignFavButton" disabled>
                    <i class="icon-unassign" id="unassignFavImg"></i>
                </button>
                <button onclick="this.disabled = true; onAssignFavoriteToPanel(true)" class="btn btn-assign-icon" style="margin-top: 60px" id="assignAllFavButton" disabled>
                    <i class="icon-assign-all" id="assignAllFavImg"></i>
                </button>
                <button onclick="this.disabled = true; onUnassignFavoriteFromPanel(true)" class="btn btn-assign-icon" id="unassignAllFavButton" disabled>
                    <i class="icon-unassign-all" id="unassignAllFavImg"></i>
                </button>
            </div>
        </div>

        <!-- Assigned Panels Section -->
        <div class="col panel-data-table">
            <nav class="navbar navbar-expand">
                <div class="container-fluid">
                    <ul class="navbar-nav me-auto">
                        {{/* TODO: Implement View Panel Resources feature - work in progress
                        <li class="nav-item">
                            <button class="btn btn-nav-icon" id="viewAssignedPanelResourcesBtn"
                                    data-bs-toggle="tooltip" data-bs-placement="bottom"
                                    title="View resources assigned to selected panel" disabled>
                                <i class="icon-btn icon-view-disabled"></i>
                            </button>
                        </li>
                        */}}
                        <li class="nav-item">
                            <button class="btn btn-nav-icon" id="importMissingResourceBtn"
                                    data-bs-toggle="tooltip" data-bs-placement="bottom"
                                    title="Load missing favorite resources to selected panel" disabled>
                                <i class="icon-btn icon-load-disabled"></i>
                            </button>
                        </li>
                        {{/* UR-3664: Import From Panel feature - hidden until fully implemented
                        <li class="nav-item">
                            <button class="btn btn-nav-icon" onclick="showImportFromPanelModal()" id="importFromPanelPanelBtn"
                                    data-bs-toggle="tooltip" data-bs-placement="bottom"
                                    title="Import favorites from other panels to selected panel" disabled>
                                <i class="icon-btn icon-import-disabled" id="importFromPanelPanelImg"></i>
                            </button>
                        </li>
                        */}}
                    </ul>
                </div>
            </nav>
            <div class="grid-wrapper-panel-logical-ends">
                <div id="assignedPanelsGrid" style="height: 100%" class="ag-theme-balham-dark"></div>
            </div>
        </div>
    </div>
</div>
{{ end }}