{{ define "favorites-config" }}
<div class="tab-pane show active config-pane-wrapper" id="configurationPane" role="tabpanel" aria-labelledby="config-tab">
    <div class="config-pane-content">
        <div style="flex-shrink: 0;">
            <table class="container-data">
                <tr class="row-data">
                    <td class="col-data-label">Name:</td>
                    <td class="col-data-input"><input class="form-control rounded-0 name-size" id="favoriteName" readonly/></td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label">Type:</td>
                    <td class="col-data-input">
                        <div class="select-wrapper">
                            <select class="custom-select" id="favoriteType" disabled>
                                {{ range .FavoriteTypes }}
                                <option value="{{ .Id }}">{{ .Name }}</option>
                                {{ end }}
                            </select>
                        </div>
                    </td>
                </tr>
                <tr class="row-data">
                    <td class="col-data-label" style="width: 160px;">Assigned Resources:</td>
                    <td class="col-data-input">
                        <input class="form-control rounded-0 read-only name-size" id="configSelectedResourceName" placeholder="None" readonly>
                    </td>
                </tr>
            </table>

            <input type="hidden" id="favoriteUiid" value="">
        </div>

        <div id="resourceDetailsContainer">
            <div id="destSelectionSection" class="selection-section-hidden">
                <div class="ag-theme-balham-dark" style="height: calc(100% - 30px);">
                    <div id="destSelectionGrid" style="height: 100%;"></div>
                </div>
            </div>

            <div id="sourceSelectionSection" class="selection-section-hidden">
                <div class="ag-theme-balham-dark" style="height: calc(100% - 30px);">
                    <div id="sourceSelectionGrid" style="height: 100%;"></div>
                </div>
            </div>

            <div id="crosspointSelectionSection" class="selection-section-hidden">
                <div style="display: flex; gap: 10px; height: 100%;">
                    <div style="flex: 1;">
                        <div class="ag-theme-balham-dark" style="height: calc(100% - 30px);">
                            <div id="crosspointDestSelectionGrid" style="height: 100%;"></div>
                        </div>
                    </div>
                    <div style="flex: 1;">
                        <div class="ag-theme-balham-dark" style="height: calc(100% - 30px);">
                            <div id="crosspointSourceSelectionGrid" style="height: 100%;"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="salvoSelectionSection" class="selection-section-hidden">
                <div class="ag-theme-balham-dark" style="height: calc(100% - 30px);">
                    <div id="salvoSelectionGrid" style="height: 100%;"></div>
                </div>
            </div>

            <div id="groupCategorySelectionSection" class="selection-section-hidden">
                <div class="ag-theme-balham-dark" style="height: calc(100% - 30px);">
                    <div id="groupCategorySelectionGrid" style="height: 100%;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
{{ end }}