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

<!-- levels tab -->
    <div class="tab-pane show active" id="levels" style="height:100%" role="tabpanel" aria-labelledby="levels-tab">
        <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="levelNavMenuButton" 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="levelNavMenuImage"></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="CreateCatIndexFromFirstSelected(availableLevelsGridOptions)" id="addLevelMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addLevelMenuImg"></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="SelectAllAvailable(availableLevelsGridOptions)" id="selectAllLevelMenuButton"><i class="icon-btn-nav-menu icon-plain icon-select-rows" id="selectAllLevelMenuImg"></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="DeselectAllAvailable(availableLevelsGridOptions)" id="deselectAllLevelMenuButton"><i class="icon-btn-nav-menu icon-plain icon-deselect-rows" id="deselectAllLevelMenuImg"></i>Deselect All</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="GenerateCatIndexFromAvailable(availableLevelsGridOptions)" id="generateLevelMenuButton"><i class="icon-btn-nav-menu icon-plain icon-auto" id="generateLevelMenuImg"></i>Generate</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="CreateCatIndexFromFirstSelected(availableLevelsGridOptions)" id="addLevelButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addLevelImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="SelectAllAvailable(availableLevelsGridOptions)" id="selectAllLevelButton" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-select-rows" id="selectAllLevelImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="DeselectAllAvailable(availableLevelsGridOptions)" id="deselectAllLevelButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All"><i class="icon-btn icon-deselect-rows" id="deselectAllLevelImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="GenerateCatIndexFromAvailable(availableLevelsGridOptions)" id="generateLevelButton" data-toggle="tooltip" data-placement="bottom" title="Generate"><i class="icon-btn icon-auto" id="generateLevelImg"></i></button>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" placeholder="Filter..." aria-label="Filter" id="availableLevelsFilter" oninput="onAvailableFilterTextBoxChanged(availableLevelsGridOptions, 'availableLevelsFilter')">
                    <span><i class=" icon-plain icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="row row-cat-index-available">
            <div class="grid-wrapper" style="height:100%;">
                <div id="availableLevelsGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row">
            <p class="text-end-cat-index" id="availableLevelsLabel">Available Levels:</p>
        </div>
    </div>
    <!-- sources tab -->
    <div class="tab-pane" id="sources" style="height:100%" role="tabpanel" aria-labelledby="sources-tab">
        <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="srcNavMenuButton" 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="srcNavMenuImage"></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="CreateCatIndexFromFirstSelected(availableSourcesGridOptions)" id="addSourceMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addSourceMenuImg"></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="SelectAllAvailable(availableSourcesGridOptions)" id="selectAllSourceMenuButton"><i class="icon-btn-nav-menu icon-plain icon-select-rows" id="selectAllSourceMenuImg"></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="DeselectAllAvailable(availableSourcesGridOptions)" id="deselectAllSourceMenuButton"><i class="icon-btn-nav-menu icon-plain icon-deselect-rows" id="deselectAllSourceMenuImg"></i>Deselect All</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="GenerateCatIndexFromAvailable(availableSourcesGridOptions)" id="generateSourceMenuButton"><i class="icon-btn-nav-menu icon-plain icon-auto" id="generateSourceMenuImg"></i>Generate</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="CreateCatIndexFromFirstSelected(availableSourcesGridOptions)" id="addSourceButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addSourceImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="SelectAllAvailable(availableSourcesGridOptions)" id="selectAllSourceButton" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-select-rows" id="selectAllSourceImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="DeselectAllAvailable(availableSourcesGridOptions)" id="deselectAllSourceButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All"><i class="icon-btn icon-deselect-rows" id="deselectAllSourceImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="GenerateCatIndexFromAvailable(availableSourcesGridOptions)" id="generateSourceButton" data-toggle="tooltip" data-placement="bottom" title="Generate"><i class="icon-btn icon-auto" id="generateSourceImg"></i></button>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" placeholder="Filter..." aria-label="Filter" id="availableSourcesFilter" oninput="onAvailableFilterTextBoxChanged(availableSourcesGridOptions, 'availableSourcesFilter')">
                    <span><i class="icon-plain icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="row row-cat-index-available">
            <div class="grid-wrapper" style="height:100%">
                <div id="availableSourcesGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row">
            <p class="text-end-cat-index" id="availableSourcesLabel">Available Sources:</p>
        </div>
    </div>
    <!-- destinations tab -->
    <div class="tab-pane" id="destinations" style="height:100%;" role="tabpanel" aria-labelledby="destinations-tab">
        <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="dstNavMenuButton" 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="dstNavMenuImage"></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="CreateCatIndexFromFirstSelected(availableDestinationsGridOptions)" id="addDestMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addDestMenuImg"></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="SelectAllAvailable(availableDestinationsGridOptions)" id="selectAllDestMenuButton"><i class="icon-btn-nav-menu icon-plain icon-select-rows" id="selectAllDestMenuImg"></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="DeselectAllAvailable(availableDestinationsGridOptions)" id="deselectAllDestMenuButton"><i class="icon-btn-nav-menu icon-plain icon-deselect-rows" id="deselectAllDestMenuImg"></i>Deselect All</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="GenerateCatIndexFromAvailable(availableDestinationsGridOptions)" id="generateDestMenuButton"><i class="icon-btn-nav-menu icon-plain icon-auto" id="generateDestMenuImg"></i>Generate</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="CreateCatIndexFromFirstSelected(availableDestinationsGridOptions)" id="addDestButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addDestImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="SelectAllAvailable(availableDestinationsGridOptions)" id="selectAllDestButton" data-toggle="tooltip" data-placement="bottom" title="Select All"><i class="icon-btn icon-select-rows" id="selectAllDestImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="DeselectAllAvailable(availableDestinationsGridOptions)" id="deselectAllDestButton" data-toggle="tooltip" data-placement="bottom" title="Deselect All"><i class="icon-btn icon-deselect-rows" id="deselectAllDestImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="GenerateCatIndexFromAvailable(availableDestinationsGridOptions)" id="generateDestButton" data-toggle="tooltip" data-placement="bottom" title="Generate"><i class="icon-btn icon-auto" id="generateDestImg"></i></button>
                    </li>
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" placeholder="Filter..." aria-label="Filter" id="availableDestinationsFilter" oninput="onAvailableFilterTextBoxChanged(availableDestinationsGridOptions, 'availableDestinationsFilter')">
                    <span><i class="icon-plain icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="row row-cat-index-available">
            <div class="grid-wrapper" style="height:100%">
                <div id="availableDestinationsGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row">
            <p class="text-end-cat-index" id="availableDestinationsLabel">Available Destinations:</p>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        const availableColumnDefs = [
            {field: "name", comparator: naturalSort},
        ];

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

        const availableLevelsGridOptions = {
            defaultColDef: availableDefaultProps,
            columnDefs: availableColumnDefs,
            suppressMenuHide: true,
            rowHeight: 31,
            rowSelection: 'multiple',
            headerHeight: 0,
            onSelectionChanged: onAvailableLevelsRowSelectionChanged,
        };

        const availableSourcesGridOptions = {
            defaultColDef: availableDefaultProps,
            columnDefs: availableColumnDefs,
            suppressMenuHide: true,
            rowHeight: 31,
            rowSelection: 'multiple',
            headerHeight: 0,
            onSelectionChanged: onAvailableSourcesRowSelectionChanged,
        };

        const availableDestinationsGridOptions = {
            defaultColDef: availableDefaultProps,
            columnDefs: availableColumnDefs,
            suppressMenuHide: true,
            rowHeight: 31,
            rowSelection: 'multiple',
            headerHeight: 0,
            onSelectionChanged: onAvailableDestinationsRowSelectionChanged,
        };

        function onAvailableLevelsRowSelectionChanged() {
            const selectedRows = availableLevelsGridOptions.api.getSelectedRows();
            if (selectedRows.length == 0) {
                disableUiButton("deselectAllLevel")
                disableUiButton("deselectAllLevelMenu")
                disableUiButton("generateLevel")
                disableUiButton("generateLevelMenu")
            } else {
                enableUiButton("deselectAllLevel")
                enableUiButton("deselectAllLevelMenu")
                enableUiButton("generateLevel")
                enableUiButton("generateLevelMenu")
            }
            if (dbMode == DBMode_Protect) {
                disableUiButton("generateLevel");
                disableUiButton("generateLevelMenu");
            }
        }

        function onAvailableSourcesRowSelectionChanged() {
            const selectedRows = availableSourcesGridOptions.api.getSelectedRows();
            if (selectedRows.length == 0) {
                disableUiButton("deselectAllSource")
                disableUiButton("deselectAllSourceMenu")
                disableUiButton("generateSource")
                disableUiButton("generateSourceMenu")
            } else {
                enableUiButton("deselectAllSource")
                enableUiButton("deselectAllSourceMenu")
                enableUiButton("generateSource")
                enableUiButton("generateSourceMenu")
            }
            if (dbMode == DBMode_Protect) {
                disableUiButton("generateSource");
                disableUiButton("generateSourceMenu");
            }
        }

        function onAvailableDestinationsRowSelectionChanged() {
            const selectedRows = availableDestinationsGridOptions.api.getSelectedRows();
            if (selectedRows.length == 0) {
                disableUiButton("deselectAllDest")
                disableUiButton("deselectAllDestMenu")
                disableUiButton("generateDest")
                disableUiButton("generateDestMenu")
            } else {
                enableUiButton("deselectAllDest")
                enableUiButton("deselectAllDestMenu")
                enableUiButton("generateDest")
                enableUiButton("generateDestMenu")
            }
            if (dbMode == DBMode_Protect) {
                disableUiButton("generateDest");
                disableUiButton("generateDestMenu");
            }
        }

        document.addEventListener('DOMContentLoaded', function () { // set up the grids after the page has finished loading
            const tables = [
                {divId: "availableLevelsGrid", grid: availableLevelsGridOptions},
                {divId: "availableSourcesGrid", grid: availableSourcesGridOptions},
                {divId: "availableDestinationsGrid", grid: availableDestinationsGridOptions}
            ];
            for (let i = 0; i < tables.length; i++) {
                document.getElementById(tables[i].divId).ag_grid = new agGrid.Grid(document.querySelector('#' + tables[i].divId), tables[i].grid);
            }
        });

        function updateAvailableLabels(destNum, srcNum, levelNum) {
            document.getElementById("availableDestinationsLabel").innerHTML = "Available Destinations: <span class='read-only-frame'>" + ((destNum != 0) ? destNum : "0") + "</span>";
            document.getElementById("availableSourcesLabel").innerHTML = "Available Sources: <span class='read-only-frame'>" + ((srcNum != 0) ? srcNum : "0") + "</span>";
            document.getElementById("availableLevelsLabel").innerHTML = "Available Levels: <span class='read-only-frame'>" + ((levelNum != 0) ? levelNum : "0") + "</span>";
        }

        function updateAvailableSelection(grid, firstSelectedIndex, dataNum) {
            if (dataNum > 0) {
                if(firstSelectedIndex < dataNum) {
                    grid.api.forEachNode((node) => {
                        if (node.rowIndex == firstSelectedIndex) {
                            node.setSelected(true, true);
                        }
                    });
                } else {
                    grid.api.forEachNode((node) => {
                        if (node.rowIndex == dataNum-1) {
                        node.setSelected(true, true);
                        }
                    });
                }
            }
        }

        function onAvailableFilterTextBoxChanged(grid, filterId) {
            grid.api.setQuickFilter(document.getElementById(filterId).value);
        }

        function GenerateCatIndexFromAvailable(grid) {
            const selectedRows = grid.api.getSelectedRows();
            const names = selectedRows.map(node => encodeURIComponent(node.name));
            if (names != "") {
                displayDialog("LoadingModal");
                $.ajax({url: '/categoryindex/generatefromavailable?names=' + names});
            }
        }

        function CreateCatIndexFromFirstSelected(grid) {
            const selectedRows = grid.api.getSelectedRows();
            if(selectedRows.length != 0) {
                const firstSelectName = selectedRows[0].name;
                let nameSplit = firstSelectName.split(' ');
                if(nameSplit.length == 1) {
                    document.getElementById('newCatIndexCategory').value = nameSplit[0];
                    document.getElementById('newCatIndexIndex').value = "";
                } else {
                    document.getElementById('newCatIndexCategory').value = nameSplit[0] + " ";
                    document.getElementById('newCatIndexIndex').value = nameSplit.slice(1).join(" ");
                }
            } else {
                document.getElementById('newCatIndexCategory').value = "";
                document.getElementById('newCatIndexIndex').value = "";
            }
            displayDialog("addCategoryIndexModal");
        }

        function addCategoryIndexFromAvailable() {
            let index = document.getElementById('newCatIndexIndex').value;
            let addIndex = false;
            let formatIndex;
            let indexCheck;
            const emptyTestIndex = index.trim();
            if (emptyTestIndex != "" && checkForSpecialCharacters(index)) {
                displayErrorDialog(SpecialCharactersNameErrorMessage);
                return;
            }
            formatIndex = encodeURIComponent(index);
            indexCheck = index.replace(/\s/g,SPACE_CHAR_ALT);
            let duplicate = false;
            indicesGridOptions.api.forEachNode((node) => {
                if (node.data.name === indexCheck) {
                    duplicate = true;
                }
            });
            if (duplicate) {
                indicesGridOptions.api.forEachNode((node) => {
                    if (node.data.name === indexCheck) {
                        node.setSelected(true, true);
                    }
                });
            } else if (formatIndex != "") {
                addIndex = true;
            }
            let category = document.getElementById('newCatIndexCategory').value;
            let addCategory = false;
            let formatCategory;
            let categoryCheck;
            const emptyTestCategory = category.trim();
            if (emptyTestCategory != "" && checkForSpecialCharacters(category)) {
                displayErrorDialog(SpecialCharactersNameErrorMessage);
                return;
            }
            formatCategory = encodeURIComponent(category);
            categoryCheck = category.replace(/\s/g,SPACE_CHAR_ALT);
            duplicate = false;
            categoriesGridOptions.api.forEachNode((node) => {
                if (node.data.name === categoryCheck) {
                    duplicate = true;
                }
            });
            if (duplicate) {
                categoriesGridOptions.api.forEachNode((node) => {
                    if (node.data.name === categoryCheck) {
                        node.setSelected(true, true);
                    }
                });
            } else if (formatCategory != "") {
                addCategory = true;
            }
            if (addIndex) {
                sessionStorage.setItem("newIndex", indexCheck);
                displayDialog("LoadingModal");
                $.ajax({url: "/categoryindex/index/add?index=" + formatIndex});
            }
            if (addCategory) {
                sessionStorage.setItem("newCategory", categoryCheck);
                displayDialog("LoadingModal");
                $.ajax({url: "/categoryindex/category/add?category=" + formatCategory});
            }
            hideDialog('addCategoryIndexModal');
        }

        function SelectAllAvailable(grid) {
            let allRowCount = grid.api.getDisplayedRowCount();
            if(allRowCount > 0) {
                grid.api.selectAllFiltered();
            }
        }

        function DeselectAllAvailable(grid) {
            grid.api.deselectAll();
        }
    </script>
    <div class="modal" id="addCategoryIndexModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="addCategoryIndexModelLabel"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="addCategoryIndexModelLabel"><i class="icon-add icon-white"></i>Add Category/Index</span>
                    <span class="btn btn-transparent" onclick="hideDialog('addCategoryIndexModal');"><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" tabindex="0" name="newCatIndexCategory" id="newCatIndexCategory"></td>
                        </tr>
                        <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="1" name="newCatIndexIndex" id="newCatIndexIndex"></td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('addCategoryIndexModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="2" onclick="addCategoryIndexFromAvailable()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{ end }}