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

    <div class="col" style="height:100%;width:33%;">
        <nav class="navbar navbar-expand-sm">
                    <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="icon-menu"></i>Menu</span>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <button class="btn btn-nav-icon-text" onclick="findCategoriesByType(TypeLevel);" id="showLevelsButton"><i class="icon-levels" id="showLevelsImg"></i>Show Levels</button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="row row-cat-index-assigned">
            <div class="grid-wrapper" style="height:100%">
                <div id="assignedLevelsGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row">
            <p class="text-end-cat-index" id="assignedLevelsLabel">Assigned:</p>
        </div>
    </div>
    <div class="col" style="height:100%;width:33%;">
        <nav class="navbar navbar-expand-sm">
                    <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="icon-menu"></i>Menu</span>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <button class="btn btn-nav-icon-text" onclick="findCategoriesByType(TypeSource);" id="showSourcesButton"><i class="icon-sources" id="showSourcesImg"></i>Show Sources</button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="row row-cat-index-assigned">
            <div class="grid-wrapper" style="height:100%;">
                <div id="assignedSourcesGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row">
            <p class="text-end-cat-index" id="assignedSourcesLabel">Assigned:</p>
        </div>
    </div>
    <div class="col" style="height:100%;width:33%;">
        <nav class="navbar navbar-expand-sm">
                    <span class=" btn btn-nav-icon-text navbar-toggler" role="button" data-bs-toggle="collapse" data-bs-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="icon-menu"></i>Menu</span>
            <div class="collapse navbar-collapse">
                <ul class="navbar-nav me-auto mb-lg-0">
                    <li>
                        <button class="btn btn-nav-icon-text" onclick="findCategoriesByType(TypeDestination);" id="showDestinationsButton"><i class="icon-destinations" id="showDestinationsImg"></i>Show Destinations</button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="row row-cat-index-assigned">
            <div class="grid-wrapper" style="height:100%;">
                <div id="assignedDestinationsGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
            </div>
        </div>
        <div class="row">
            <p class="text-end-cat-index" id="assignedDestinationsLabel">Assigned:</p>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        const assignedLevelsColumnDefs = [
            {field: "name", headerName: "Levels in Categories", suppressMovable: true, comparator: naturalSort, getQuickFilterText: () => ''},
        ];

        const assignedSourcesColumnDefs = [
            {field: "name", headerName: "Sources in Categories", suppressMovable: true, comparator: naturalSort, getQuickFilterText: () => ''},
        ];

        const assignedDestinationsColumnDefs = [
            {field: "name", headerName: "Destinations in Categories", suppressMovable: true, comparator: naturalSort, getQuickFilterText: () => ''},
        ];

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

        const assignedLevelsGridOptions = {
            defaultColDef: assignedDefaultProps,
            columnDefs: assignedLevelsColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        const assignedSourcesGridOptions = {
            defaultColDef: assignedDefaultProps,
            columnDefs: assignedSourcesColumnDefs,
            suppressMenuHide: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        const assignedDestinationsGridOptions = {
            defaultColDef: assignedDefaultProps,
            columnDefs: assignedDestinationsColumnDefs,
            suppressMenuHide: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'multiple',
        };

        document.addEventListener('DOMContentLoaded', function () {// set up the grids after the page has finished loading
            const tables = [
                {divId: "assignedLevelsGrid", grid: assignedLevelsGridOptions},
                {divId: "assignedSourcesGrid", grid: assignedSourcesGridOptions},
                {divId: "assignedDestinationsGrid", grid: assignedDestinationsGridOptions}
            ];
            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 updateAssignedLabels(destNum, srcNum, levelNum) {
            document.getElementById("assignedDestinationsLabel").innerHTML = "Assigned: <span class='read-only-frame'>" + ((destNum != 0) ? destNum : "0") + "</span>";
            document.getElementById("assignedSourcesLabel").innerHTML = "Assigned: <span class='read-only-frame'>" + ((srcNum != 0) ? srcNum : "0") + "</span>";
            document.getElementById("assignedLevelsLabel").innerHTML = "Assigned: <span class='read-only-frame'>" + ((levelNum != 0) ? levelNum : "0") + "</span>";
        }

        function findCategoriesByType(type) {
            fetch('/categoryindex/category/findByType?type=' + type)
                .then((response) => response.json())
                .then((data) => {
                    if(data.ids) {
                        let ids = [];
                        for(let i = 0; i < data.ids.length; i++) {
                            ids.push(data.ids[i].id);
                        }
                        categoriesGridOptions.api.forEachNode((node) => {
                            if (ids.includes(node.data.id)) {
                                node.setSelected(true);
                            } else {
                                node.setSelected(false);
                            }
                        });
                    } else {
                        categoriesGridOptions.api.forEachNode((node) => {
                            node.setSelected(false);
                        });
                    }
            });
        }
    </script>
{{ end }}