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

<!-- levels tab -->
<div class="tab-pane show active" id="levels" style="height:100%; width:100%" role="tabpanel" aria-labelledby="levels-tab">
    <div class="grid-wrapper drawer-wrapper" style="width:100%;">
        <div id="availableLevelsGrid" style="height:100%; width:100%;" class="ag-theme-balham-dark"></div>
    </div>
    <div class="modal-footer panel-footer drawer-modal-footer-size" style="width:100%;">
        <button class="btn btn-text btn-close-canvas" id="GroupCatLevelAddButton" onclick="addAvailables(availableLevelsGridOptions, TypeLevel)">Assign</button>
    </div>
</div>
<!-- sources tab -->
<div class="tab-pane" id="sources" style="height:100%; width:100%" role="tabpanel" aria-labelledby="sources-tab">
    <div class="grid-wrapper drawer-wrapper" style="width:100%;">
        <div id="availableSourcesGrid" style="height:100%; width:100%;" class="ag-theme-balham-dark"></div>
    </div>
    <div class="modal-footer panel-footer drawer-modal-footer-size" style="width:100%;">
        <button class="btn btn-text btn-close-canvas" id="GroupCatSourceAddButton" onclick="addAvailables(availableSourcesGridOptions, TypeSource)">Assign</button>
    </div>
</div>
<!-- destinations tab -->
<div class="tab-pane" id="destinations" style="height:100%; width:100%;" role="tabpanel" aria-labelledby="destinations-tab">
    <div class="grid-wrapper drawer-wrapper" style="width:100%;">
        <div id="availableDestinationsGrid" style="height:100%; width:100%;" class="ag-theme-balham-dark"></div>
    </div>
    <div class="modal-footer panel-footer drawer-modal-footer-size" style="width:100%;">
        <button class="btn btn-text btn-close-canvas" id="GroupCatDestinationAddButton" onclick="addAvailables(availableDestinationsGridOptions, TypeDestination)">Assign</button>
    </div>
</div>

<script type="text/javascript" charset="utf-8">
    const availableDestColumnDefs = [
        {field: "id", hide: true},
        {field: "name", headerName: "Available Destinations", suppressMovable: true, comparator: naturalSort, getQuickFilterText: () => ''},
    ];

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

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

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

    const availableLevelsGridOptions = {
        defaultColDef: availableDefaultProps,
        columnDefs: availableLevelColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple'
    };

    const availableSourcesGridOptions = {
        defaultColDef: availableDefaultProps,
        columnDefs: availableSrcColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple'
    };

    const availableDestinationsGridOptions = {
        defaultColDef: availableDefaultProps,
        columnDefs: availableDestColumnDefs,
        suppressMenuHide: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'multiple'
    };

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

    function addAvailables(grid, type) {
        const availableSelectedRows = grid.api.getSelectedRows();
        if (availableSelectedRows.length < 1) {
            displayWarningDialog("Please make a selection of a level, source, or destination to assign to a " + objectTypeName + ".");
            return;
        }

        const groupSelectedRows = groupCatGridOptions.api.getSelectedRows();
        if (groupSelectedRows.length != 1) {
            displayWarningDialog("Please make a selection of a " + objectTypeName + " to assign level, source, or destination information to.");
            return;
        } else if (isRootGroupSelected(groupSelectedRows[0])) {
            displayWarningDialog("Assigning a level, source, or destination to the root group is not allowed. Please select a sub-group instead.");
            return;
        }

        const groupId = (groupSelectedRows[0].Type === TypeGroup) ? groupSelectedRows[0].Id : groupSelectedRows[0].ParentId;
        expandMap.set(groupId, true);
        const urlParameters = [
            "groupId=" + groupId,
            "ids=" + availableSelectedRows.map(node => node.id),
            "type=" + type
        ];
        displayDialog("LoadingModal");
        // 'Assign' gets re-enabled after changes get applied
        disableButtonIds(["GroupCatLevelAdd", "GroupCatSourceAdd", "GroupCatdestinationAdd"]);
        $.ajax({url: "/groupcategory/addLeaves?" + urlParameters.join("&"),
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }
</script>

{{ end }}