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

<div class="row" style="height: 100%">
    <div class="col splitBorder cat-index-left-pane-style">
        <div class="row" style="height:50%;">
            <nav class="navbar navbar-expand">
                <div class="container-fluid">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item dropdown">
                            <button onclick="" class="btn btn-nav-icon" id="navMenuButton" data-bs-toggle="dropdown" role="button" aria-expanded="false" data-toggle="tooltip" data-placement="bottom" title="Navigation Menu"><i class="icon-btn icon-menu" id="navMenuImage"></i></button>
                            <ul class="dropdown-menu dropdown-menu-nav">
                                <li><hr class="dropdown-item-divider" /></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="addCategoryIndex()" id="addMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addMenuImg"></i>Add</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="selectAllCatIndex()" id="selectAllMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-select-rows-disabled" id="selectAllMenuImg"></i>Select All</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="deselectAllCatIndex()" id="deselectAllMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-deselect-rows-disabled" id="deselectAllMenuImg"></i>Deselect All</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="removeCategoryIndex()" id="deleteMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteMenuImg"></i>Delete</button>
                                </li>
                                <li><div class="dropdown-section-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="displayDialog('autoGenerateModal');" id="generateMenuButton"><i class="icon-btn-nav-menu icon-plain icon-auto" id="generateMenuImg"></i>Generate</button>
                                </li>
                                <li><div class="dropdown-item-divider"></div></li>
                                <li class="dropdown-item dropdown-item-nav">
                                    <button class="dropdown-item dropdown-item-nav btn-item-text-nav" onclick="displayDialog('defaultIndexModal');" id="defaultIndexMenuButton"><i class="icon-btn-nav-menu icon-plain icon-default" id="defaultIndexMenuImg"></i>Default Index</button>
                                </li>
                                <li><hr class="dropdown-item-divider" /></li>
                            </ul>
                        </li>
                        <li>
                            <span><i class="icon-separator"></i></span>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="addCategoryIndex()" id="addButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="selectAllCatIndex()" id="selectAllButton" data-toggle="tooltip" data-placement="bottom" title="Select All" disabled><i class="icon-btn icon-select-rows-disabled" id="selectAllImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="deselectAllCatIndex()" id="deselectAllButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All" disabled><i class="icon-btn icon-deselect-rows-disabled" id="deselectAllImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="removeCategoryIndex()" id="deleteButton" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="deleteImg"></i></button>
                        </li>
                        <li>
                            <span><i class="icon-separator"></i></span>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="displayDialog('autoGenerateModal');" id="generateButton" data-toggle="tooltip" data-placement="bottom" title="Generate"><i class="icon-btn icon-auto" id="generateImg"></i></button>
                        </li>
                        <li>
                            <button class="btn btn-nav-icon" onclick="displayDialog('defaultIndexModal');" id="defaultIndexButton" data-toggle="tooltip" data-placement="bottom" title="Default Index"><i class="icon-btn icon-default" id="defaultIndexImg"></i></button>
                        </li>
                    </ul>
                </div>
            </nav>
            <div class="grid-wrapper" style="height:90%;width:50%;">
                <div id="categoryGrid" style="height:100%;width:100%;" class="ag-theme-balham-dark" onclick="onCategoryGridClick()"></div>
            </div>
            <div class="grid-wrapper" style="height:90%;width:50%;">
                <div id="indexGrid" style="height:100%;width:100%;" class="ag-theme-balham-dark" onclick="onIndexGridClick()"></div>
            </div>
        </div>
        <div class="row" style="height:50%;">
            {{ template "categoryindexassigned" . }}
        </div>
    </div>
    <div class="col tab cat-index-editor-style">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button active" id="levels-tab" data-bs-toggle="tab" data-bs-target="#levels" type="button" role="tab" aria-controls="levels" aria-selected="false">Levels</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button" id="sources-tab" data-bs-toggle="tab" data-bs-target="#sources" type="button" role="tab" aria-controls="sources" aria-selected="true">Sources</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation" id="layoutOption">
                <button class="tablinks tab-button" id="destinations-tab" data-bs-toggle="tab" data-bs-target="#destinations" type="button" role="tab" aria-controls="destinations" aria-selected="false">Destinations</button>
            </li>
            <li class="nav-item" role="presentation" id="layoutOptionSeparator">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
        </ul>
        <div class="tab-content grid-wrapper-cat-index-available-tab">
            {{ template "categoryindexavailable" . }}
        </div>
    </div>
</div>

<div id="catIndexSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
    <div class="grid-summary-item">
        <span id="catSummaryTotalLabel" class="col-data-label">Categories:</span>
        <span id="catSummaryTotalValue" class="form-control rounded-0 auto-size" aria-labelledby="catSummaryTotalLabel"></span>
    </div>
    <span class="grid-summary-sep"><i class="icon-separator" aria-hidden="true"></i></span>
    <div class="grid-summary-item">
        <span id="idxSummaryTotalLabel" class="col-data-label">Indices:</span>
        <span id="idxSummaryTotalValue" class="form-control rounded-0 auto-size" aria-labelledby="idxSummaryTotalLabel"></span>
    </div>
</div>

<script src="/static/js/keystrokeHandling.js"></script>

<script type="text/javascript" charset="utf-8">
    const objectTypeName = "Category Index";

    const SPACE_CHAR_ALT = '\u2423';

    const categoryColumnDefs = [
        {field: "id", hide: true},
        {field: "name", headerName: "Category", suppressMovable: true, comparator: naturalSort, getQuickFilterText: () => ''},
    ];

    const indexColumnDefs = [
        {field: "id", hide: true},
        {field: "name", headerName: "Index", suppressMovable: true, comparator: naturalSort, getQuickFilterText: () => ''},
    ];

    const categoryIndexDefaultProps = {
        resizable: true,
        editable: false,
        sortable: true,
        flex: 1,
        filter: false,
    }

    const categoriesGridOptions = {
        defaultColDef: categoryIndexDefaultProps,
        columnDefs: categoryColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onCategoryRowSelectionChanged,
    };

    const indicesGridOptions = {
        defaultColDef: categoryIndexDefaultProps,
        columnDefs: indexColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple',
        onSelectionChanged: onIndicesRowSelectionChanged,
    };

    function updateCatIndexSummaryBar() {
        const catApi = categoriesGridOptions?.api;
        const idxApi = indicesGridOptions?.api;

        const catTotal = catApi ? catApi.getDisplayedRowCount() : 0;
        const idxTotal = idxApi ? idxApi.getDisplayedRowCount() : 0;

        const catEl = document.getElementById('catSummaryTotalValue');
        const idxEl = document.getElementById('idxSummaryTotalValue');
        if (catEl) catEl.textContent = String(catTotal);
        if (idxEl) idxEl.textContent = String(idxTotal);
    }

    document.addEventListener('DOMContentLoaded', function () {// set up the grids after the page has finished loading
        addWSDBListener();
        document.getElementById("categoryGrid").ag_grid =  new agGrid.Grid(document.querySelector('#categoryGrid'), categoriesGridOptions);

        fetch('/categoryindex/category/all')
            .then((response) => response.json())
            .then((data) => {
                if(data && data.length != 0) {
                    categoriesGridOptions.api.setRowData(data);
                    if (isCategoryGridSelected()) {
                        if (categoriesGridOptions.api.getDisplayedRowCount() == 0) {
                            disableUiButton("selectAll");
                            disableUiButton("selectAllMenu");
                        } else {
                            enableUiButton("selectAll");
                            enableUiButton("selectAllMenu");
                        }
                    }
                    categoriesGridOptions.api.forEachNode((node) => {
                        if (node.rowIndex == 0) {
                            node.setSelected(true, true);
                        }
                    });
                } else {
                    clearGrid(categoriesGridOptions);
                    clearGrid(assignedLevelsGridOptions);
                    clearGrid(assignedSourcesGridOptions);
                    clearGrid(assignedDestinationsGridOptions);
                    updateAssignedLabels(0, 0, 0);
                }
                updateAssignedButtons();
                updateCatIndexSummaryBar();
            });

        document.getElementById("indexGrid").ag_grid = new agGrid.Grid(document.querySelector('#indexGrid'), indicesGridOptions);
        fetch('/categoryindex/index/all')
            .then((response) => response.json())
            .then((data) => {
                if(data && data.length != 0) {
                    indicesGridOptions.api.setRowData(data);
                } else {
                    clearGrid(indicesGridOptions);
                }
                updateCatIndexSummaryBar();
            });

        document.getElementById("categoryGrid").classList.add('grid-selected');
        refreshAvailableLists();
        window.addEventListener(DBMODE_TABLE, handleCatIndexModeChange);
    });

    function onCategoryRowSelectionChanged(event) {
        if (event && event.source == "api") {
            return;
        }
        const selectedRows = categoriesGridOptions.api.getSelectedRows();
        if (isCategoryGridSelected()) {
            if (selectedRows.length == 0) {
                disableButtonIds(["deselectAll", "deselectAllMenu", "delete", "deleteMenu"]);
            } else {
                enableButtonIds(["deselectAll", "deselectAllMenu", "delete", "deleteMenu"]);
            }
            if (categoriesGridOptions.api.getDisplayedRowCount() == 0) {
                disableUiButton("selectAll");
                disableUiButton("selectAllMenu");
            } else {
                enableUiButton("selectAll");
                enableUiButton("selectAllMenu");
            }
        }
        if (dbMode == DBMode_Protect) {
            disableUiButton("delete");
            disableUiButton("deleteMenu");
        }
        const ids = selectedRows.map(node => node.id);
        if (ids != "") {
            displayDialog("LoadingModal");
            fetch("/categoryindex/category/selectionchange?ids=" + ids)
                .then((response) => response.json())
                .then((data) => {
                    updateAssignedLabels(
                        updateGridNames(assignedDestinationsGridOptions, data.destNames),
                        updateGridNames(assignedSourcesGridOptions, data.srcNames),
                        updateGridNames(assignedLevelsGridOptions, data.LevelNames)
                    );
                    hideDialog("LoadingModal");
                });
        } else {
            clearGrid(assignedDestinationsGridOptions);
            clearGrid(assignedSourcesGridOptions);
            clearGrid(assignedLevelsGridOptions);
            updateAssignedLabels(0, 0, 0);
        }
    }

    function onIndicesRowSelectionChanged() {
        const selectedRows = indicesGridOptions.api.getSelectedRows();
        if (!isCategoryGridSelected()) {
            if (selectedRows.length == 0) {
                disableButtonIds(["deselectAll", "deselectAllMenu", "delete", "deleteMenu"]);
            } else {
                enableButtonIds(["deselectAll", "deselectAllMenu", "delete", "deleteMenu"]);
            }
            if (indicesGridOptions.api.getDisplayedRowCount() == 0) {
                disableUiButton("selectAll");
                disableUiButton("selectAllMenu");
            } else {
                enableUiButton("selectAll");
                enableUiButton("selectAllMenu");
            }
            if (dbMode == DBMode_Protect) {
                disableUiButton("delete");
                disableUiButton("deleteMenu");
            }
        }
    }

    function selectAllCatIndex(){
        if(isCategoryGridSelected()) {
            let allRowCount = categoriesGridOptions.api.getDisplayedRowCount();
            if(allRowCount > 0) {
                categoriesGridOptions.api.selectAllFiltered();
            }
        } else {
            let allRowCount = indicesGridOptions.api.getDisplayedRowCount();
            if(allRowCount > 0) {
                indicesGridOptions.api.selectAllFiltered();
            }
        }
    }

    function deselectAllCatIndex(){
        if(isCategoryGridSelected()) {
            categoriesGridOptions.api.deselectAll();
        } else {
            indicesGridOptions.api.deselectAll();
        }
    }

    function onCategoryGridClick() {
        let categoryGrid = document.getElementById("categoryGrid");
        if (!categoryGrid.classList.contains('grid-selected')) {
            document.getElementById("indexGrid").classList.remove('grid-selected');
            indicesGridOptions.api.deselectAll();
            categoryGrid.classList.add('grid-selected');
        }
    }

    function onIndexGridClick() {
        let indexGrid = document.getElementById("indexGrid");
        if (!indexGrid.classList.contains('grid-selected')) {
            document.getElementById("categoryGrid").classList.remove('grid-selected');
            categoriesGridOptions.api.deselectAll();
            indexGrid.classList.add('grid-selected');
        }
        onIndicesRowSelectionChanged();
    }

    function isCategoryGridSelected() {
        let categoryGrid = document.getElementById("categoryGrid");
        return categoryGrid.classList.contains('grid-selected');
    }

    function addWSDBListener() {
        var socket = new WebSocket("ws://" + window.location.hostname + ":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            console.log(event.data);
            const msg = JSON.parse(event.data);
            switch (msg.table) {
                case CAT_INDEX_CATEGORY_TABLE:
                    refreshCategoryWindow(msg);
                    break;
                case CAT_INDEX_INDICES_TABLE:
                    refreshIndexWindow(msg);
                    break;
                case SOURCE_TABLE:
                case DESTINATION_TABLE:
                case LEVEL_TABLE:
                    location.reload();
                    break;
                case DATABASE_TABLE:
                    handleDatabaseTableChange(msg, () => {
                        location.reload();
                    });
                    break;
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addWSDBListener();
            }, 1000);
        };
    }

    function refreshCategoryWindow(msg) {
        let firstSelectedNodeIndex = getFirstSelectedNodeIndex(categoriesGridOptions);
        fetch('/categoryindex/category/all')
            .then((response) => response.json())
            .then((data) => {
                if(data && data.length !== 0) {
                    categoriesGridOptions.api.setRowData(data);
                    if (isCategoryGridSelected()) {
                        if (categoriesGridOptions.api.getDisplayedRowCount() == 0) {
                            disableUiButton("selectAll");
                            disableUiButton("selectAllMenu");
                        } else {
                            enableUiButton("selectAll");
                            enableUiButton("selectAllMenu");
                        }
                    }
                } else {
                    clearGrid(categoriesGridOptions)
                }
                updateAssignedButtons();
                if(msg.operation === INSERT_OP) {
                    sessionStorage.removeItem("newCategory");
                    categoriesGridOptions.api.forEachNode((node) => {
                        node.setSelected(msg.rowIds.includes(node.data.id), false, "api");
                    });
                    onCategoryRowSelectionChanged(null);
                } else if(msg.operation === DELETE_OP) {
                    let rowCount = categoriesGridOptions.api.getDisplayedRowCount();
                    if(firstSelectedNodeIndex < rowCount) {
                        categoriesGridOptions.api.forEachNode((node) => {
                            if (node.rowIndex === firstSelectedNodeIndex) {
                                node.setSelected(true, true);
                            }
                        });
                    } else {
                        categoriesGridOptions.api.forEachNode((node) => {
                            if (node.rowIndex === rowCount-1) {
                                node.setSelected(true, true);
                            }
                        });
                    }
                    onCategoryRowSelectionChanged(null);
                } else {
                    onCategoryGridClick();
                    categoriesGridOptions.api.forEachNode((node) => {
                        if (node.rowIndex === 0) {
                            node.setSelected(true, true);
                        }
                    });
                }
            })
            .then(() => {
                updateCatIndexSummaryBar();
                hideDialog('LoadingModal');
            })
            .catch((err) => {
                console.error('refreshCategoryWindow failed:', err);
            });
        refreshAvailableLists();
    }

    function refreshIndexWindow(msg) {
        let firstSelectedNodeIndex = getFirstSelectedNodeIndex(indicesGridOptions);
        fetch('/categoryindex/index/all')
            .then((response) => response.json())
            .then((data) => {
                if(data && data.length !== 0) {
                    indicesGridOptions.api.setRowData(data);
                    if (!isCategoryGridSelected()) {
                        if (indicesGridOptions.api.getDisplayedRowCount() == 0) {
                            disableUiButton("selectAll");
                            disableUiButton("selectAllMenu");
                        } else {
                            enableUiButton("selectAll");
                            enableUiButton("selectAllMenu");
                        }
                    }
                } else {
                    clearGrid(indicesGridOptions);
                }
                if(msg.operation === INSERT_OP) {
                    let newIndex = sessionStorage.getItem("newIndex");
                    indicesGridOptions.api.forEachNode((node) => {
                        if (node.data.name === newIndex) {
                            node.setSelected(true, true);
                        }
                    });
                    sessionStorage.removeItem("newIndex");
                } else if(msg.operation === DELETE_OP) {
                    let rowCount = indicesGridOptions.api.getDisplayedRowCount();
                    if(firstSelectedNodeIndex < rowCount) {
                        indicesGridOptions.api.forEachNode((node) => {
                            if (node.rowIndex === firstSelectedNodeIndex) {
                                node.setSelected(true, true);
                            }
                        });
                    } else {
                        indicesGridOptions.api.forEachNode((node) => {
                            if (node.rowIndex === rowCount-1) {
                                node.setSelected(true, true);
                            }
                        });
                    }
                }
            }).then(() => {
            if (isCategoryGridSelected()) {
                onCategoryRowSelectionChanged(null);
            } else {
                onIndicesRowSelectionChanged();
            }
        })
        .then(() => {
            updateCatIndexSummaryBar();
            hideDialog('LoadingModal');
        })
        .catch((err) => {
            console.error('refreshCategoryWindow failed:', err);
        });
        refreshAvailableLists();
    }

    function addCategoryIndex() {
        if(isCategoryGridSelected()) {
            displayDialog("addCategoryModal");
            document.getElementById('newCategory').value = '';
        } else {
            displayDialog("addIndexModal");
            document.getElementById('newIndex').value = '';
        }
    }

    function removeCategoryIndex() {
        if(isCategoryGridSelected()) {
            const selectedRows = categoriesGridOptions.api.getSelectedRows();
            if (selectedRows.length > 0) {
                displayDialog("removeCategoryModal");
            } else {
                displayWarningDialog("Please select at least one category to delete.");
            }
        } else {
            const selectedRows = indicesGridOptions.api.getSelectedRows();
            if (selectedRows.length > 0) {
                displayDialog("removeIndexModal");
            } else {
                displayWarningDialog("Please select at least one index to delete.");
            }
        }
    }

    function addCategory() {
        let category = document.getElementById('newCategory').value;
        if (!validateString(category)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }
        // Category Index also replace space characters with SPACE_CHAR_ALT
        const categoryCheck = category.replace(/\s/g,SPACE_CHAR_ALT);
        if (checkForDuplicateNames (categoriesGridOptions, "id", categoryCheck, null) > -1) {
            displayErrorDialog("'" + category + "' Category already existed.");
            return;
        }
        sessionStorage.setItem("newCategory", categoryCheck);
        displayDialog("LoadingModal");
        $.ajax({
            url: "/categoryindex/category/add?category=" + encodeURIComponent(category),
            success: () => {
                hideDialog('addCategoryModal');
            },
            error: (error) => {
                displayErrorDialog(error.responseText || JSON.stringify(error));
            }
        });
    }

    function removeSelectedCategories() {
        const selectedRows = categoriesGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            hideDialog('removeCategoryModal');
            displayDialog("LoadingModal");
            $.ajax({url: "/categoryindex/category/remove?ids=" + selectedRows.map(node => node.id),
                success: () => {
                    hideDialog("LoadingModal");
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        } else {
            displayWarningDialog("Please select at least one category to delete.");
        }
    }

    function addIndex() {
        let index = document.getElementById('newIndex').value;
        if (!validateString(index)) {
            displayErrorDialog(NameErrorMessage);
            return;
        }
        const indexCheck = index.replace(/\s/g,SPACE_CHAR_ALT);
        if (checkForDuplicateNames (indicesGridOptions, "id", indexCheck, null) > -1) {
            displayErrorDialog("'" + index + "' Index already existed.");
            return;
        }
        sessionStorage.setItem("newIndex", indexCheck);
        displayDialog("LoadingModal");
        $.ajax({
            url: "/categoryindex/index/add?index=" + encodeURIComponent(index),
            success: () => {
                hideDialog('addIndexModal');
            },
            error: (error) => {
                displayErrorDialog(error.responseText || JSON.stringify(error));
            }
        });
    }

    function removeSelectedIndices() {
        const selectedRows = indicesGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            hideDialog('removeIndexModal');
            displayDialog("LoadingModal");
            $.ajax({url: "/categoryindex/index/remove?ids=" + selectedRows.map(node => node.id),
                success: () => {
                    hideDialog("LoadingModal");
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        } else {
            displayWarningDialog("Please select at least one index to delete.");
        }
    }

    function autoGenerateCategories() {
        hideDialog('autoGenerateModal');
        displayDialog("LoadingModal");
        $.ajax({ url: "/categoryindex/autogenerate",
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err))
            }
        });
    }

    function defaultIndex() {
        hideDialog('defaultIndexModal');
        displayDialog("LoadingModal");
        $.ajax({ url: "/categoryindex/defaultindices",
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });

    }

    function refreshAvailableLists() {
        fetch("/categoryindex/available/update")
            .then((response) => response.json())
            .then((data) => {
                const destFirstSelectedIndex = getFirstSelectedNodeIndex(availableDestinationsGridOptions);
                const srcFirstSelectedIndex = getFirstSelectedNodeIndex(availableSourcesGridOptions);
                const levelFirstSelectedIndex = getFirstSelectedNodeIndex(availableLevelsGridOptions);
                const destNum = updateGridNames(availableDestinationsGridOptions, data.destNames);
                const srcNum = updateGridNames(availableSourcesGridOptions, data.srcNames);
                const levelNum = updateGridNames(availableLevelsGridOptions, data.LevelNames);
                updateAvailableLabels(destNum, srcNum, levelNum);
                updateAvailableSelection(availableDestinationsGridOptions, destFirstSelectedIndex, destNum);
                updateAvailableSelection(availableSourcesGridOptions, srcFirstSelectedIndex, srcNum);
                updateAvailableSelection(availableLevelsGridOptions, levelFirstSelectedIndex, levelNum);
                updateButtonsForAvailable();
                hideDialog("LoadingModal");
            });
    }

    function updateGridNames(grid, names) {
        let num = 0;
        if(names){
            grid.api.setRowData(names);
            num = names.length;
        } else {
            clearGrid(grid);
        }
        return num;
    }

    function updateButtonsForAvailable() {
        if (availableLevelsGridOptions.api.getDisplayedRowCount() == 0 &&
            availableSourcesGridOptions.api.getDisplayedRowCount() == 0 &&
            availableDestinationsGridOptions.api.getDisplayedRowCount() == 0) {
            disableUiButton("generate");
            disableUiButton("generateMenu");
        } else {
            enableUiButton("generate");
            enableUiButton("generateMenu");
        }
        if (availableLevelsGridOptions.api.getDisplayedRowCount() == 0) {
            disableButtonIds(["addLevel", "addLevelMenu", "selectAllLevel", "selectAllLevelMenu", "deselectAllLevel", "deselectAllLevelMenu", "generateLevel", "generateLevelMenu"]);
        } else {
            enableButtonIds(["addLevel", "addLevelMenu", "selectAllLevel", "selectAllLevelMenu", "deselectAllLevel", "deselectAllLevelMenu", "generateLevel","generateLevelMenu"]);
        }
        if (availableSourcesGridOptions.api.getDisplayedRowCount() == 0) {
            disableButtonIds(["addSource", "addSourceMenu", "selectAllSource", "selectAllSourceMenu", "deselectAllSource", "deselectAllSourceMenu", "generateSource", "generateSourceMenu"]);
        } else {
            enableButtonIds(["addSource", "addSourceMenu", "selectAllSource", "selectAllSourceMenu", "deselectAllSource", "deselectAllSourceMenu", "generateSource", "generateSourceMenu"]);
        }
        if (availableDestinationsGridOptions.api.getDisplayedRowCount() == 0) {
            disableButtonIds(["addDest", "addDestMenu", "selectAllDest", "selectAllDestMenu", "deselectAllDest", "deselectAllDestMenu", "generateDest", "generateDestMenu"]);
        } else {
            enableButtonIds(["addDest", "addDestMenu", "selectAllDest", "selectAllDestMenu", "deselectAllDest", "deselectAllDestMenu", "generateDest", "generateDestMenu"]);
        }
        if (dbMode == DBMode_Protect) {
            disableButtonIds(["generate", "generateMenu", "addLevel", "addLevelMenu", "generateLevel", "generateLevelMenu", "addSource", "addSourceMenu", "generateSource", "generateSourceMenu", "addDest", "addDestMenu", "generateDest", "generateDestMenu"]);
        }
    }

    function updateAssignedButtons() {
        if (categoriesGridOptions.api.getDisplayedRowCount() == 0) {
            disableButtonIds(["showLevels", "showLevelsMenu", "showSources", "showSourcesMenu", "showDestinations", "showDestinationsMenu"]);
        } else {
            enableButtonIds(["showLevels", "showLevelsMenu", "showSources", "showSourcesMenu", "showDestinations", "showDestinationsMenu"]);
        }
    }

    function clearGrid(grid) {
        grid.api.setRowData([]);
        grid.api.hideOverlay();
    }

    function handleCatIndexModeChange(eventData) {
        dbMode = eventData.detail.dbMode;
        if (eventData.detail.dbMode == DBMode_Protect) {
            disableButtonIds(["add", "addMenu", "delete", "deleteMenu", "generate", "generateMenu", "defaultIndex", "defaultIndexMenu", "addLevel", "addLevelMenu", "generateLevel", "generateLevelMenu", "addSource", "addSourceMenu", "generateSource", "generateSourceMenu", "addDest", "addDestMenu", "generateDest", "generateDestMenu"]);
        } else {
            enableButtonIds(["add", "addMenu", "generate", "generateMenu", "defaultIndex", "defaultIndexMenu", "addLevel", "addLevelMenu", "addSource", "addSourceMenu", "addDest", "addDestMenu"]);
            if(isCategoryGridSelected()) {
                onCategoryRowSelectionChanged(null);
            } else {
                onIndicesRowSelectionChanged();
            }
            onAvailableLevelsRowSelectionChanged();
            onAvailableSourcesRowSelectionChanged();
            onAvailableDestinationsRowSelectionChanged();
        }
    }
</script>

<div class="modal" id="addCategoryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addCategoryModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-cat-index-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addCategoryModalLabel"><i class="icon-add icon-white"></i>Add Category</span>
                <span class="btn btn-transparent" onclick="hideDialog('addCategoryModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label col-data-label-60">Category:</td>
                        <td class="col-data-input"><input class="form-control rounded-0  name-size" name="newCategory" tabindex="0" id="newCategory"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addCategoryModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="1" onclick="addCategory()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removeCategoryModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeCategoryModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-category-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removeCategoryModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Category</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeCategoryModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to remove the selected category?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeCategoryModal');">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="removeSelectedCategories()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="addIndexModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addIndexModalLabel"aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-cat-index-size">
        <div class="modal-content">
            <div class="modal-header justify-content-between">
                <span class="modal-title" id="addIndexModalLabel"><i class="icon-add icon-white"></i>Add Index</span>
                <span class="btn btn-transparent" onclick="hideDialog('addIndexModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label col-data-label-60">Index:</td>
                        <td class="col-data-input"><input class="form-control rounded-0 name-size" tabindex="0" name="newIndex" id="newIndex"></td>
                    </tr>
                </table>
                <div class="modal-footer justify-content-between">
                    <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addIndexModal');">Cancel</button>
                    <button class="btn btn-text" tabindex="1" onclick="addIndex()">Apply</button>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="removeIndexModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeIndexModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-remove-index-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="removeIndexModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Index</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeIndexModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to remove the selected index?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeIndexModal');">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="removeSelectedIndices()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="autoGenerateModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="autoGenerateModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-autogenerate-cat-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="autoGenerateModalLabel"><i class="icon-auto icon-white"></i>Generate Categories and Indices</span>
                <span class="btn btn-transparent" onclick="hideDialog('autoGenerateModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">All existing categories and indices will be deleted. New ones will be generated based on the active database.</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('autoGenerateModal');">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="autoGenerateCategories()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="defaultIndexModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="defaultIndexModalModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-default-index-size">
        <div class="modal-content">
            <div class="modal-header info-header justify-content-between">
                <span class="modal-title" id="defaultIndexModalLabel"><i class="icon-default icon-white"></i>Default Index</span>
                <span class="btn btn-transparent" onclick="hideDialog('defaultIndexModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">All indices will be deleted and replaced with factory defaults.</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('defaultIndexModal');">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="defaultIndex()">Apply</button>
            </div>
        </div>
    </div>
</div>

{{ end }}