{{ define "favorites-modals" }}
{{/* --- Modals --- */}}
<!-- Add Favorite Modal -->
<div class="modal" id="addFavoriteModal" data-testid="favorites-add-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addFavoriteModalLabel">
    <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="addFavoriteModalLabel"><i class="icon-add icon-white"></i>Add Favorite</span>
                <span class="btn btn-transparent" onclick="hideDialog('addFavoriteModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr>
                        <td class="col-data-label">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" id="addFavoriteName" data-testid="favorites-add-name-input" tabindex="0"/></td>
                    </tr>
                    <tr>
                        <td class="col-data-label">ID:</td>
                        <td class="col-data-input"><input type="number" min="0" class="form-control rounded-0 count-size" id="addFavoriteUiid" data-testid="favorites-add-uiid-input" tabindex="1"/></td>
                    </tr>
                    <tr>
                        <td class="col-data-label">Type:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" id="addFavoriteType" data-testid="favorites-add-type-select" tabindex="2">
                                    {{ range .FavoriteTypes }}
                                    <option value="{{ .Id }}">{{ .Name }}</option>
                                    {{ end }}
                                </select>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="addFavoriteCancelButton" data-testid="favorites-add-cancel-button" class="btn btn-text btn-outline-secondary" tabindex="4" onclick="hideDialog('addFavoriteModal');">Cancel</button>
                <button id="addFavoriteApplyButton" data-testid="favorites-add-apply-button" class="btn btn-text" tabindex="3" onclick="addFavorite()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Rename Favorite Modal -->
<div class="modal" id="renameFavoriteModal" data-testid="favorites-rename-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="renameFavoriteModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-rename-source-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="renameFavoriteModalLabel"><i class="icon-rename icon-white"></i>Rename Favorite</span>
                <span class="btn btn-transparent" onclick="hideDialog('renameFavoriteModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <input type="hidden" id="renameFavoriteIdHidden">
                <table class="container-data">
                    <tr>
                        <td class="col-data-label">Name:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" id="renameFavoriteName" data-testid="favorites-rename-name-input" tabindex="0"/></td>
                    </tr>
                    <tr>
                        <td class="col-data-label">ID:</td>
                        <td class="col-data-input"><input type="number" min="0" class="form-control rounded-0 count-size" id="renameFavoriteUiid" data-testid="favorites-rename-uiid-input" tabindex="1"/></td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="renameFavoriteCancelButton" data-testid="favorites-rename-cancel-button" class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('renameFavoriteModal');">Cancel</button>
                <button id="renameFavoriteApplyButton" data-testid="favorites-rename-apply-button" class="btn btn-text" tabindex="2" onclick="renameFavorite()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Remove Favorite Confirmation Modal -->
<div class="modal" id="removeFavoriteModal" data-testid="favorites-delete-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeFavoriteModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removeFavoriteModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Favorite(s)</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeFavoriteModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body-info">
                <p class="container-data" id="deleteFavoriteConfirmText" data-testid="favorites-delete-confirm-text">Are you sure you want to delete the selected favorite(s)?</p>
                <p class="container-data warning-text" id="deleteFavoriteWarning" data-testid="favorites-delete-warning" style="display: none;">Warning: This favorite is assigned to one or more panels and will be removed from them.</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="removeFavoriteCancelButton" data-testid="favorites-delete-cancel-button" class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeFavoriteModal');">Cancel</button>
                <button id="removeFavoriteApplyButton" data-testid="favorites-delete-confirm-button" class="btn btn-text" tabindex="0" onclick="deleteFavorite()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Export Favorites Modal -->
<div class="modal" id="exportFavoriteModal" data-testid="favorites-export-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="exportFavoriteModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="exportFavoriteModalLabel"><i class="icon-export icon-white"></i>Export Favorites</span>
                <span class="btn btn-transparent" onclick="hideDialog('exportFavoriteModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr>
                        <td class="col-data-label">Save As:</td>
                        <td class="col-data-input">
                            <input tabindex="0" class="form-control rounded-0 name-size" id="exportFavoriteFilename" data-testid="favorites-export-filename-input" placeholder="favorites" required/>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="exportFavoriteCancelButton" data-testid="favorites-export-cancel-button" class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('exportFavoriteModal');">Cancel</button>
                <button id="exportFavoriteApplyButton" data-testid="favorites-export-apply-button" class="btn btn-text" type="button" tabindex="1" onclick="exportFavorites()">Apply</button>
            </div>
        </div>
    </div>
</div>

<!-- Import Favorites Modal -->
<div class="modal" id="importFavoriteModal" data-testid="favorites-import-modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="importFavoriteModalLabel">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="importFavoriteModalLabel"><i class="icon-import icon-white"></i>Import Favorites</span>
                <span class="btn btn-transparent" onclick="hideDialog('importFavoriteModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="container-data">
                    <!-- Favorites import -->
                    <div class="row-data">
                        <input type="file" tabindex="0" name="importFavoriteFile" id="importFavoriteFile" data-testid="favorites-import-file-input" required />
                    </div>
                    <div class="row-data-src-dst-import">
                        <p class="row-text">Note that, the imported file needs to have all columns with headers named as per the Favorites and in the same order. The sheet name containing the table must be named <b>favorites</b>. Alternatively, you can export the current table, modify it, and reimport it to ensure you have the correct formatting.</p>
                    </div>
                </div>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="importFavoriteCancelButton" data-testid="favorites-import-cancel-button" class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('importFavoriteModal');">Cancel</button>
                <button id="importFavoriteApplyButton" data-testid="favorites-import-apply-button" class="btn btn-text" type="button" tabindex="1" onclick="importFavoriteExcel()">Apply</button>
            </div>
        </div>
    </div>
</div>

{{/* TODO: UR-3664 - Import Favorites From Panel Modal (uncomment when ready)
<div class="modal" id="importFromPanelModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="importFromPanelModalLabel">
    <div class="modal-dialog modal-dialog-centered" style="max-width: 850px;">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="importFromPanelModalLabel"><i class="icon-add icon-white"></i>Add favorites</span>
                <span class="btn btn-transparent" onclick="hideDialog('importFromPanelModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <div class="form-check mb-2">
                        <input class="form-check-input" type="radio" name="importFromPanelFilter" id="importFilterAll" checked onchange="onImportFromPanelFilterChanged()">
                        <label class="form-check-label" for="importFilterAll">
                            Show all favorites (adding favorites will also import its resources if those are not already part of this panel)
                        </label>
                    </div>
                    <div class="form-check">
                        <input class="form-check-input" type="radio" name="importFromPanelFilter" id="importFilterPanel" onchange="onImportFromPanelFilterChanged()">
                        <label class="form-check-label" for="importFilterPanel">
                            Show all favorites for resources on this panel only
                        </label>
                    </div>
                </div>
                <div id="importFromPanelGrid" class="ag-theme-balham-dark" style="height: 350px; width: 100%;"></div>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('importFromPanelModal');">Cancel</button>
                <button class="btn btn-text" id="importFromPanelAddBtn" tabindex="0" onclick="importSelectedFavoritesFromPanel()" disabled>Add</button>
            </div>
        </div>
    </div>
</div>
*/}}

<!-- Panel Resources Modal -->
<div class="modal" id="panelResourcesModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="panelResourcesModalTitle">
    <div class="modal-dialog modal-xl" role="document">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="panelResourcesModalTitle">Panel Resources</span>
                <span class="btn btn-transparent" onclick="hideDialog('panelResourcesModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <div class="ag-theme-balham-dark" style="height: 400px;">
                    <div id="panelResourcesGrid" style="height: 100%;"></div>
                </div>
            </div>
            <div class="modal-footer justify-content-end">
                <button id="panelResourcesCloseButton" class="btn btn-text btn-outline-secondary" tabindex="0" onclick="hideDialog('panelResourcesModal');">Close</button>
            </div>
        </div>
    </div>
</div>
{{ end }}