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

    <!-- Home Windows (top) -->
    <div class="col container-data container-panel-layout" id="homeWindow">
        <div class="row row-panel-layout">
            <div class="row-half">
                <p class="modal-title" id="homeWindowTitle"><b>Home Windows</b></p>
            </div>
            <div class="row row-half">
                <p class="text-end" id="homeWindowPercentLabel">Total width(%):<i class="icon-alarm-normal"></i></p>
            </div>
        </div>
        <nav class="navbar navbar-expand">
            <div class="container-fluid" id="HomeWindowNavbarToggler">
                <ul class="navbar-nav me-auto">
                    <li>
                        <button class="btn btn-nav-icon" id="windowAddButton" onclick="showAddLayoutModal('Home Layout', 'windowStyle', 'addWindowModal')" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="windowUpButton" onclick="moveLayoutWindow(panelLayoutWindowsGridOptions, 'windows/up')" data-toggle="tooltip" data-placement="bottom" title="Move Up" disabled><i class="icon-btn icon-up-disabled" id="windowUpImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="windowDownButton" onclick="moveLayoutWindow(panelLayoutWindowsGridOptions, 'windows/down')" data-toggle="tooltip" data-placement="bottom" title="Move Down" disabled><i class="icon-btn icon-down-disabled" id="windowDownImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="windowTopButton" onclick="moveLayoutWindow(panelLayoutWindowsGridOptions, 'windows/top')" data-toggle="tooltip" data-placement="bottom" title="Move to Top" disabled><i class="icon-btn icon-top-disabled" id="windowTopImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="windowBottomButton" onclick="moveLayoutWindow(panelLayoutWindowsGridOptions, 'windows/bottom')" data-toggle="tooltip" data-placement="bottom" title="Move to Bottom" disabled><i class="icon-btn icon-bottom-disabled" id="windowBottomImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="windowDeleteButton" onclick="removeLayoutWindow(panelLayoutWindowsGridOptions, 'windows')" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="windowDeleteImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="showDefaultLayoutModal()" data-toggle="tooltip" data-placement="bottom" title="Default"><i class="icon-btn icon-default"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-panel-layout">
            <div id="panelLayoutGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <!-- Home Windows Bottom -->
    <div class="col container-data container-panel-split-bottom" id="bottomHomeWindow">
        <div class="row row-panel-layout">
            <div class="row-half">
                <p class="modal-title"><b>Home Windows (bottom) </b></p>
            </div>
            <div class="row row-half">
                <p class="text-end" id="bottomHomeWindowPercentLabel">Total width(%):<i class="icon-alarm-normal"></i></p>
            </div>
        </div>
        <nav class="navbar navbar-expand">
            <div class="container-fluid" id="BottomHomeWindowNavbarToggler">
                <ul class="navbar-nav me-auto">
                    <li>
                        <button class="btn btn-nav-icon" id="bottomWindowAddButton" onclick="showAddLayoutModal('Bottom Home Layout', 'bottomWindowStyle', 'addBottomWindowModal')" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="bottomWindowUpButton" onclick="moveLayoutWindow(panelBottomLayoutWindowsGridOptions, 'bottomWindows/up')" data-toggle="tooltip" data-placement="bottom" title="Move Up" disabled><i class="icon-btn icon-up-disabled" id="bottomWindowUpImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="bottomWindowDownButton" onclick="moveLayoutWindow(panelBottomLayoutWindowsGridOptions, 'bottomWindows/down')" data-toggle="tooltip" data-placement="bottom" title="Move Down" disabled><i class="icon-btn icon-down-disabled" id="bottomWindowDownImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="bottomWindowTopButton" onclick="moveLayoutWindow(panelBottomLayoutWindowsGridOptions, 'bottomWindows/top')" data-toggle="tooltip" data-placement="bottom" title="Move to Top" disabled><i class="icon-btn icon-top-disabled" id="bottomWindowTopImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="bottomWindowBottomButton" onclick="moveLayoutWindow(panelBottomLayoutWindowsGridOptions, 'bottomWindows/bottom')" data-toggle="tooltip" data-placement="bottom" title="Move to Bottom" disabled><i class="icon-btn icon-bottom-disabled" id="bottomWindowBottomImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="bottomWindowDeleteButton" onclick="removeLayoutWindow(panelBottomLayoutWindowsGridOptions, 'bottomWindows')" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="bottomWindowDeleteImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="showDefaultBottomLayoutModal()" data-toggle="tooltip" data-placement="bottom" title="Default"><i class="icon-btn icon-default"></i></button>
                    </li>

                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-panel-layout">
            <div id="panelBottomLayoutGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>
    <!-- Drawer Windows -->
    <div class="col container-data container-panel-layout" id="drawerWindow">
        <div class="row row-panel-layout">
            <div class="row-half">
                <p class="modal-title"><b>Drawer Windows</b></p>
            </div>
        </div>
        <nav class="navbar navbar-expand">
            <div class="container-fluid" id="DrawerWindowNavbarToggler">
                <ul class="navbar-nav me-auto">
                    <li>
                        <button class="btn btn-nav-icon" id="drawerAddButton" onclick="showAddLayoutModal('Drawer', 'drawerStyle', 'addDrawerModal')" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="drawerUpButton" onclick="moveLayoutWindow(panelDrawerWindowsGridOptions, 'drawers/up')" data-toggle="tooltip" data-placement="bottom" title="Move Up" disabled><i class="icon-btn icon-up-disabled" id="drawerUpImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="drawerDownButton" onclick="moveLayoutWindow(panelDrawerWindowsGridOptions, 'drawers/down')" data-toggle="tooltip" data-placement="bottom" title="Move Down" disabled><i class="icon-btn icon-down-disabled" id="drawerDownImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="drawerTopButton" onclick="moveLayoutWindow(panelDrawerWindowsGridOptions, 'drawers/top')" data-toggle="tooltip" data-placement="bottom" title="Move to Top" disabled><i class="icon-btn icon-top-disabled" id="drawerTopImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="drawerBottomButton" onclick="moveLayoutWindow(panelDrawerWindowsGridOptions, 'drawers/bottom')" data-toggle="tooltip" data-placement="bottom" title="Move to Bottom" disabled><i class="icon-btn icon-bottom-disabled" id="drawerBottomImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" id="drawerDeleteButton" onclick="removeLayoutWindow(panelDrawerWindowsGridOptions,'drawers')" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="drawerDeleteImg"></i></button>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="showDefaultDrawerModal()"><i class="icon-btn icon-default" data-toggle="tooltip" data-placement="bottom" title="Default"></i></button>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="grid-wrapper-panel-layout">
            <div id="panelDrawerGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
        </div>
    </div>

    <script type="text/javascript" charset="utf-8">
        const panelWindowWidthNoneditableList = ["MV Pips"];
        const panelWindowColRowNoneditableList = ["Operations", "Filters", "Output Strip", "Monitor", "Audio Filters", "Channel Balance", "Output Monitor"];
        const panelWindowTitlebarNoneditableList = ["Filters", "Output Strip", "Monitor", "Audio Filters", "Channel Balance", "Output Monitor", "MV Layouts", "MV Heads", "MV Pips", "Destination Group", "Source Group"];

        const UltritouchPbWindowOptionsList = ["Destinations", "Sources", "Operations", "Status", "Filters", "Salvos", "Favorites", "Output Monitor", "Category/Index", "Presets", "Groups", "Destination Follow", "Aliases"];
        const UltritouchPbDefaultLayoutWindowList = ["Destinations", "Sources", "Operations"];
        const UltritouchPbDefaultCategoryLayoutWindowList = ["Category/Index", "Operations"];
        const UltritouchPbDefaultDrawerList = ["Status", "Filters"];

        const UltritouchMvDrawerOptionList = ["Aliases"];
        const UltritouchMvHomeLayoutOptionsList = ["Status"];

        const GroupPbDefaultLayoutWindowList = ["Destination Group", "Source Group", "Operations"];
        const GroupPbDefaultDrawerList = ["Status", "Filters", "Salvos", "Presets", "Aliases", "Output Monitor", "Favorites"];

        const AudiomixerLayoutOptionsList = ["Channel Strip", "Output Strip", "Monitor"];
        const AudiomixerDrawerOptionList = ["Mixer Outputs", "Mixer Partition", "Audio Filters", "Channel Balance", "Sources", "Mixer Destinations", "Monitor", "Aliases"];

        // Home Layout grid columns
        const panelWindowColumnDefs = [
            {field: "id", hide: true, editable: false},
            {field: "windowType", headerName: "Windows Data Type", suppressMovable: true, editable: false, minWidth: 150, maxWidth: 200},
            {field: "percent", headerName: "Percent (%)", suppressMovable: true, cellRenderer: LayoutWidthCell, editable: (params) => {return isCellEditable(params, panelWindowWidthNoneditableList);}},
            {field: "rows", headerName: "Rows", suppressMovable: true, cellRenderer: LayoutRowColCell, editable: (params) => {return isCellEditable(params, panelWindowColRowNoneditableList);}},
            {field: "columns", headerName: "Columns", suppressMovable: true, cellRenderer: LayoutRowColCell, editable: (params) => {return isCellEditable(params, panelWindowColRowNoneditableList);}},
            {field: "titleBar", headerName: "Titlebar", suppressMovable: true, editable: false, cellRenderer: LayoutCheckbox},
        ]

        // Drawer grid columns
        const panelDrawerColumnDefs = [
            {field: "id", hide: true, editable: false},
            {field: "position", headerName: "Position", suppressMovable: true, editable: true, singleClickEdit: true, cellEditor: 'agSelectCellEditor', cellEditorParams: {values: ["Left", "Right"],}},
            {field: "windowType", headerName: "Windows Data Type", suppressMovable: true, editable: false, minWidth: 150, maxWidth: 200},
            {field: "percent", headerName: "Percent (%)", suppressMovable: true, cellRenderer: LayoutWidthCell, editable: (params) => {return isCellEditable(params, panelWindowWidthNoneditableList);}},
            {field: "rows", headerName: "Rows", suppressMovable: true, cellRenderer: LayoutRowColCell, editable: (params) => {return isCellEditable(params, panelWindowColRowNoneditableList);}},
            {field: "columns", headerName: "Columns", suppressMovable: true, cellRenderer: LayoutRowColCell, editable: (params) => {return isCellEditable(params, panelWindowColRowNoneditableList);}},
            {field: "titleBar", headerName: "Titlebar", suppressMovable: true, editable: false, cellRenderer: LayoutCheckbox},
        ]

        const panelWindowDefaultProps = {
            flex: 1,
            resizable: true,
            sortable: true,
            filter: true,
            filterParams: multiFilterCondition,
            minWidth: 100,
            maxWidth: 150,
            editable: true
        };

        const panelLayoutWindowsGridOptions = {
            defaultColDef: panelWindowDefaultProps,
            columnDefs: panelWindowColumnDefs,
            suppressMenuHide: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'single',
            onSelectionChanged: onLayoutSelectionChanged,
            onCellValueChanged: onLayoutCellValueChanged
        };

        const panelBottomLayoutWindowsGridOptions = {
            defaultColDef: panelWindowDefaultProps,
            columnDefs: panelWindowColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'single',
            onSelectionChanged: onBottomLayoutSelectionChanged,
            onCellValueChanged: onBottomLayoutCellValueChanged
        };

        const panelDrawerWindowsGridOptions = {
            defaultColDef: panelWindowDefaultProps,
            columnDefs: panelDrawerColumnDefs,
            suppressMenuHide: true,
            suppressDragLeaveHidesColumns: true,
            headerHeight: 36,
            rowHeight: 31,
            rowSelection: 'single',
            onSelectionChanged: onDrawerLayoutSelectionChanged,
            onCellValueChanged: onDrawerCellValueChanged
        }

        document.addEventListener('DOMContentLoaded', function () { // Set up the grids after the page has finished loading
            const tables = [
                {id: "panelLayoutGrid", agGridTable: panelLayoutWindowsGridOptions},
                {id: "panelBottomLayoutGrid", agGridTable: panelBottomLayoutWindowsGridOptions},
                {id: "panelDrawerGrid", agGridTable: panelDrawerWindowsGridOptions},
            ];

            for (let i = 0; i < tables.length; i++) {
                let gridDiv = document.querySelector("#" + tables[i].id);
                document.getElementById(tables[i].id).ag_grid = new agGrid.Grid(gridDiv, tables[i].agGridTable);
            }
        });

        function onLayoutCellValueChanged(event){
            console.log("onLayoutCellValueChanged: data ", event.data);
            const panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            event.data.panelId = panelId;// add selected panelId to window row data so server could do the update
            $.post("/panel/windows/update", event.data);
        }

        function onLayoutSelectionChanged() {
            if (panelLayoutWindowsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("windowUp");
                enableUiButton("windowDown");
                enableUiButton("windowTop");
                enableUiButton("windowBottom");
                enableUiButton("windowDelete");
            } else {
                disableUiButton("windowUp");
                disableUiButton("windowDown");
                disableUiButton("windowTop");
                disableUiButton("windowBottom");
                disableUiButton("windowDelete");
            }
        }

        function onBottomLayoutSelectionChanged() {
            if (panelBottomLayoutWindowsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("bottomWindowUp");
                enableUiButton("bottomWindowDown");
                enableUiButton("bottomWindowTop");
                enableUiButton("bottomWindowBottom");
                enableUiButton("bottomWindowDelete");
            } else {
                disableUiButton("bottomWindowUp");
                disableUiButton("bottomWindowDown");
                disableUiButton("bottomWindowTop");
                disableUiButton("bottomWindowBottom");
                disableUiButton("bottomWindowDelete");
            }
        }

        function onDrawerLayoutSelectionChanged() {
            if (panelDrawerWindowsGridOptions.api.getSelectedRows().length > 0) {
                enableUiButton("drawerUp");
                enableUiButton("drawerDown");
                enableUiButton("drawerTop");
                enableUiButton("drawerBottom");
                enableUiButton("drawerDelete");
            } else {
                disableUiButton("drawerUp");
                disableUiButton("drawerDown");
                disableUiButton("drawerTop");
                disableUiButton("drawerBottom");
                disableUiButton("drawerDelete");
            }
        }

        function onBottomLayoutCellValueChanged(event){
            console.log("onBottomLayoutCellValueChanged: data ", event.data);
            const panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            event.data.panelId = panelId;// add selected panelId to window row data so server could do the update
            $.post("/panel/bottomWindows/update", event.data).done(() => { });
        }

        function onDrawerCellValueChanged(event){
            console.log("onDrawerCellValueChanged: data ", event.data);
            const panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            event.data.panelId = panelId;// add selected panelId to window row data so server could do the update
            $.post("/panel/drawers/update", event.data).done(() => { });
        }

        function moveLayoutWindow(grid, urlPrefix){
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            const selectedrows = grid.api.getSelectedRows();
            if(selectedrows.length == 1){
                $.ajax({url: "/panel/" + urlPrefix + "?panelId=" + panelId + "&id=" + selectedrows[0].id});
            }
        }

        function removeLayoutWindow(grid, windowType){
            const selectedRows = grid.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
                $.ajax({url: "/panel/" + windowType + "/remove?panelId=" + panelId + "&id=" + selectedRows[0].id});
            }
        }

        function showAddLayoutModal(style, styleId, modalId){
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let selectRow = selectedRows[0];
                let existWindows = [];
                let optionStr = "";
                if(selectRow.panelTypeId === UltritouchPbType || selectRow.panelTypeId === UltritouchMvType || selectRow.panelTypeId === AudioMixerDesktopType || selectRow.panelTypeId === AudioMixer4ruType || selectRow.panelTypeId === AudioMixer2ruType || selectRow.panelTypeId === Ultritouch4ruSplitType || selectRow.panelTypeId === GroupPbType) {
                    panelLayoutWindowsGridOptions.api.forEachNode((node) => {
                        existWindows.push(node.data.windowType);
                    })
                    panelBottomLayoutWindowsGridOptions.api.forEachNode((node) => {
                        existWindows.push(node.data.windowType);
                    })
                    panelDrawerWindowsGridOptions.api.forEachNode((node) => {
                        existWindows.push(node.data.windowType);
                    })
                    let optionList;
                    if (selectRow.panelTypeId === UltritouchPbType || selectRow.panelTypeId === Ultritouch4ruSplitType) {
                        optionList = UltritouchPbWindowOptionsList
                    } else if (selectRow.panelTypeId === UltritouchMvType) {
                        if (style == 'Home Layout') {
                            optionList = UltritouchMvHomeLayoutOptionsList;
                        } else if (style == 'Drawer') {
                            optionList = UltritouchMvDrawerOptionList;
                        }
                    } else if (selectRow.panelTypeId === AudioMixerDesktopType || selectRow.panelTypeId === AudioMixer4ruType || selectRow.panelTypeId === AudioMixer2ruType) {
                        if (style == "Home Layout") {
                            optionList = AudiomixerLayoutOptionsList;
                        } else if (style == 'Drawer') {
                            optionList = AudiomixerDrawerOptionList;
                        }
                    } else if (selectRow.panelTypeId === GroupPbType) {
                        if (style == 'Drawer') {
                            optionList = GroupPbDefaultDrawerList;
                        }
                    }
                    for (let i = 0; i < optionList.length; i++) {
                        if (!existWindows.includes(optionList[i])) {
                            optionStr += "<option>" + optionList[i] + "</option>";
                        }
                    }
                }
                // show warning message when there is no window to be added
                if(optionStr == ""){
                    document.getElementById("warningMessage").innerHTML = "There is no window to be added to " + style;
                    displayWarningDialog("There is no window to be added to " + style);
                    return;
                }
                document.getElementById(styleId).innerHTML = optionStr;
                displayDialog(modalId);
            }
        }

        function showDefaultLayoutModal() {
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let selectRow = selectedRows[0];
                let optionStr = "";
                if(selectRow.panelTypeId === GroupCategoryType || selectRow.panelTypeId === CatIndexCategoryType || selectRow.panelTypeId === PushButtonType) {
                    document.getElementById("defaultLayoutInstruction").innerHTML = "Resets window settings to factory defaults based on selected screen orientation.";
                    document.getElementById("defaulLayoutChoiceTable").style.display = '';
                    document.getElementById("defaultLayoutChoiceLabel").innerHTML = "Screen Orientation:";
                    optionStr = "<option>Portrait</option><option>Landscape</option>";
                    document.getElementById("defaultLayoutChoice").innerHTML = optionStr;
                } else if(selectRow.panelTypeId === UltritouchPbType || selectRow.panelTypeId === Ultritouch4ruSplitType) {
                    document.getElementById("defaultLayoutInstruction").innerHTML = "Resets window settings to factory defaults based on selected style.";
                    document.getElementById("defaulLayoutChoiceTable").style.display = '';
                    document.getElementById("defaultLayoutChoiceLabel").innerHTML = "Default style:";
                    optionStr = "<option>PB</option><option>Category/Index</option>";
                    document.getElementById("defaultLayoutChoice").innerHTML = optionStr;
                } else if(selectRow.panelTypeId === UltritouchMvType || selectRow.panelTypeId === AudioMixerDesktopType || selectRow.panelTypeId === AudioMixer4ruType || selectRow.panelTypeId === AudioMixer2ruType || selectRow.panelTypeId === GroupPbType) {
                    document.getElementById("defaulLayoutChoiceTable").style.display = 'none';
                    document.getElementById("defaultLayoutInstruction").innerHTML = "Are you sure you want to set Home Windows to default settings?";
                }
                displayDialog("defaultWindowModal");
            }
        }

        function showDefaultBottomLayoutModal() {
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let selectRow = selectedRows[0];
                let optionStr = "";
                if(selectRow.panelTypeId === Ultritouch4ruSplitType) {
                    document.getElementById("defaultBottomLayoutInstruction").innerHTML = "Resets window settings to factory defaults based on selected style.";
                    document.getElementById("defaulBottomLayoutChoiceTable").style.display = '';
                    document.getElementById("defaultBottomLayoutChoiceLabel").innerHTML = "Default style";
                    optionStr = "<option>PB</option><option>Category/Index</option>";
                    document.getElementById("defaultBottomLayoutChoice").innerHTML = optionStr;
                }
                displayDialog("defaultBottomWindowModal");
            }
        }

        function showDefaultDrawerModal() {
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                document.getElementById("defaultDrawerInstruction").innerHTML = "Are you sure you want to set Drawer Windows to default settings?";
                displayDialog("defaultDrawerModal");
            }
        }

        function defaultLayoutWindow() {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            let defaultLayoutChoice = document.getElementById("defaultLayoutChoice").value;
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let selectRow = selectedRows[0];
                let existWindows = [];
                if (selectRow.panelTypeId === UltritouchPbType) {
                    panelDrawerWindowsGridOptions.api.forEachNode((node) => {
                        if (defaultLayoutChoice == "PB") {
                            if(UltritouchPbDefaultLayoutWindowList.includes(node.data.windowType)){
                                existWindows.push(node.data.windowType)
                            }
                        } else if (defaultLayoutChoice == "Category/Index") {
                            if(UltritouchPbDefaultCategoryLayoutWindowList.includes(node.data.windowType)){
                                existWindows.push(node.data.windowType)
                            }
                        }
                    })
                } else if (selectRow.panelTypeId === AudioMixerDesktopType || selectRow.panelTypeId === AudioMixer4ruType || selectRow.panelTypeId === AudioMixer2ruType) {
                    panelDrawerWindowsGridOptions.api.forEachNode((node) => {
                        if(AudiomixerLayoutOptionsList.includes(node.data.windowType)){
                            existWindows.push(node.data.windowType)
                        }
                    })
                } else if (selectRow.panelTypeId === GroupPbType) {
                    panelDrawerWindowsGridOptions.api.forEachNode((node) => {
                        if(GroupPbDefaultLayoutWindowList.includes(node.data.windowType)){
                            existWindows.push(node.data.windowType)
                        }
                    })
                }

                if (existWindows.length != 0) {
                    let warnMessage = existWindows.toString() + " window is already being assigned to the Drawer.";
                    document.getElementById("warningMessage").innerHTML = warnMessage;
                    displayDialog("WarningPanelModal");
                } else {
                    $.ajax({
                        url: "/panel/windows/default?panelId=" + panelId + "&defaultLayoutChoice=" + defaultLayoutChoice,
                        success: (result) => {
                        }
                    });
                    hideDialog('defaultWindowModal');
                }
            }
        }

        function defaultBottomLayoutWindow() {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            let defaultLayoutChoice = document.getElementById("defaultBottomLayoutChoice").value;
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let selectRow = selectedRows[0];
                let existWindows = [];
                if (selectRow.panelTypeId === UltritouchPbType) {
                    panelDrawerWindowsGridOptions.api.forEachNode((node) => {
                        if (defaultLayoutChoice == "PB") {
                            if(UltritouchPbDefaultLayoutWindowList.includes(node.data.windowType)){
                                existWindows.push(node.data.windowType)
                            }
                        } else if (defaultLayoutChoice == "Category/Index") {
                            if(UltritouchPbDefaultCategoryLayoutWindowList.includes(node.data.windowType)){
                                existWindows.push(node.data.windowType)
                            }
                        }
                    })
                }

                if (existWindows.length != 0) {
                    let warnMessage = existWindows.toString() + " window is already being assigned to the Drawer.";
                    document.getElementById("warningMessage").innerHTML = warnMessage;
                    displayDialog("WarningPanelModal");
                } else {
                    $.ajax({
                        url: "/panel/bottomWindows/default?panelId=" + panelId + "&defaultLayoutChoice=" + defaultLayoutChoice,
                        success: (result) => {
                        }
                    });
                    hideDialog('defaultBottomWindowModal');
                }
            }
        }


        function defaultDrawerWindow() {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            const selectedRows = panelsGridOptions.api.getSelectedRows();
            if (selectedRows.length === 1) {
                let selectRow = selectedRows[0];
                let existWindows = [];
                if (selectRow.panelTypeId === UltritouchPbType || selectRow.panelTypeId === GroupPbType) {
                    panelLayoutWindowsGridOptions.api.forEachNode((node) => {
                        if(UltritouchPbDefaultDrawerList.includes(node.data.windowType)){
                            existWindows.push(node.data.windowType)
                        }
                    })
                } else if (selectRow.panelTypeId === GroupPbType) {
                    panelLayoutWindowsGridOptions.api.forEachNode((node) => {
                        if(GroupPbDefaultDrawerList.includes(node.data.windowType)){
                            existWindows.push(node.data.windowType)
                        }
                    })
                }

                if (existWindows.length != 0) {
                    let warnMessage = existWindows.toString() + " window is already being assigned to the Home Window.";
                    document.getElementById("warningMessage").innerHTML = warnMessage;
                    displayDialog("WarningPanelModal");
                } else {
                    $.ajax({
                        url: "/panel/drawers/default?panelId=" + panelId,
                        success: (result) => {
                        }
                    });
                    hideDialog('defaultDrawerModal');
                }
            }
        }

        function addLayoutWindow() {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            let windowStyle = document.getElementById("windowStyle").value;
            $.ajax({ url: "/panel/windows/add?panelId=" + panelId + "&windowStyle=" + windowStyle});
            hideDialog('addWindowModal');
        }

        function addBottomLayoutWindow() {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            let windowStyle = document.getElementById("bottomWindowStyle").value;
            $.ajax({url: "/panel/bottomWindows/add?panelId=" + panelId + "&windowStyle=" + windowStyle});
            hideDialog('addBottomWindowModal');
        }

        function addDrawerWindow() {
            let panelId = sessionStorage.getItem(sessionKeys.PANEL_SELECTED);
            let drawerType = document.getElementById("drawerType").value;
            let drawerStyle = document.getElementById("drawerStyle").value;
            $.ajax({url: "/panel/drawers/add?panelId=" + panelId + "&drawerType=" + drawerType + "&drawerStyle=" + drawerStyle});
            hideDialog('addDrawerModal');
        }

        function isCellEditable(params, windowTypeList) {
            if(windowTypeList.includes(params.data.windowType)){
                return false;
            }
            return true;
        }

        function LayoutCheckbox() {
        }

        LayoutCheckbox.prototype.init = function (params) {
            if (isCellEditable(params, panelWindowTitlebarNoneditableList)) {
                this.params = params;
                this.eGui = document.createElement('input');
                this.eGui.classList = 'form-check-input form-check-input-table';
                this.eGui.type = 'checkbox';
                this.eGui.checked = params.value;
                this.checkedHandler = this.checkedHandler.bind(this);
                this.eGui.addEventListener('click', this.checkedHandler);
            }
        }

        LayoutCheckbox.prototype.checkedHandler = function (e) {
            let checked = e.target.checked;
            let colId = this.params.column.colId;
            this.params.node.setDataValue(colId, checked);
        }

        LayoutCheckbox.prototype.getGui = function (params) {
            return this.eGui;
        }

        function LayoutRowColCell() {
        }

        LayoutRowColCell.prototype.init = function (params) {
            if (isCellEditable(params, panelWindowColRowNoneditableList)) {
                this.params = params;
                this.eGui = document.createElement('p');
                this.eGui.innerText = params.value;
            }
        }

        LayoutRowColCell.prototype.getGui = function (params) {
            return this.eGui;
        }

        function LayoutWidthCell() {
        }

        LayoutWidthCell.prototype.init = function (params) {
            if (isCellEditable(params, panelWindowWidthNoneditableList)) {
                this.params = params;
                this.eGui = document.createElement('p');
                this.eGui.innerText = params.value;
            }
        }

        LayoutWidthCell.prototype.getGui = function (params) {
            return this.eGui;
        }
    </script>

    <div class="modal" id="addWindowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
        <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"><i class="icon-add icon-white"></i>Add Window</span>
                    <span class="btn btn-transparent" onclick="hideDialog('addWindowModal');"><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 auto-size">Style:</td>
                            <td class="col-data-input">
                                    <div class="select-wrapper">
                                    <select class="custom-select" name="windowStyle" tabindex="0" id="windowStyle">
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addWindowModal');">Cancel</button>
                        <button class="btn btn-text" onclick="addLayoutWindow()" tabindex="1">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="addBottomWindowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
        <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"><i class="icon-add icon-white"></i>Add Window</span>
                    <span class="btn btn-transparent" onclick="hideDialog('addBottomWindowModal');"><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 auto-size">Style:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" name="bottomWindowStyle" tabindex="0" id="bottomWindowStyle">
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('addBottomWindowModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="1" onclick="addBottomLayoutWindow()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="addDrawerModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
        <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"><i class="icon-add icon-white"></i>Add Drawer</span>
                    <span class="btn btn-transparent" onclick="hideDialog('addDrawerModal');"><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 auto-size">Type:</td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" tabindex="0" name="drawerType" id="drawerType">
                                        <option>Left</option>
                                        <option>Right</option>
                                    </select>
                                </div>
                            </td>
                        </tr>
                        <tr class="row-data">
                            <td class="col-data-label auto-size">Style:</td>
                            <td class="col-data-input">
                                    <div class="select-wrapper">
                                    <select class="custom-select" tabindex="1" name="drawerStyle" id="drawerStyle">
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="3" onclick="hideDialog('addDrawerModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="2" onclick="addDrawerWindow()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="defaultWindowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
        <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"><i class="icon-default icon-white"></i>Confirm Reset Window to Default Settings</span>
                    <span class="btn btn-transparent" onclick="hideDialog('defaultWindowModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <p class="container-data" id="defaultLayoutInstruction"></p>
                    <table class="container-data" id="defaulLayoutChoiceTable">
                        <tr class="row-data">
                            <td class="col-data-label" id="defaultLayoutChoiceLabel"></td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" tabindex="0" name="defaultLayoutChoice" id="defaultLayoutChoice">
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('defaultWindowModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="1" onclick="defaultLayoutWindow()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="defaultBottomWindowModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
        <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"><i class="icon-default icon-white"></i>Confirm Reset Window to Default Settings</span>
                    <span class="btn btn-transparent" onclick="hideDialog('defaultBottomWindowModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <p class="container-data" id="defaultBottomLayoutInstruction"></p>
                    <table class="container-data" id="defaulBottomLayoutChoiceTable">
                        <tr class="row-data">
                            <td class="col-data-label" id="defaultBottomLayoutChoiceLabel"></td>
                            <td class="col-data-input">
                                <div class="select-wrapper">
                                    <select class="custom-select" tabindex="0" name="defaultBottomLayoutChoice" id="defaultBottomLayoutChoice">
                                    </select>
                                </div>
                            </td>
                        </tr>
                    </table>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="2" onclick="hideDialog('defaultBottomWindowModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="1" onclick="defaultBottomLayoutWindow()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="modal" id="defaultDrawerModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-max-content-size">
            <div class="modal-content">
                <div class="modal-header info-header">
                    <span class="modal-title"><i class="icon-default icon-white"></i>Confirm Reset Window to Default Settings</span>
                    <span class="btn btn-transparent" onclick="hideDialog('defaultDrawerModal');"><i class="icon-close-header"></i></span>
                </div>
                <div class="modal-body">
                    <p class="container-data" id="defaultDrawerInstruction"></p>
                    <div class="modal-footer justify-content-between">
                        <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('defaultDrawerModal');">Cancel</button>
                        <button class="btn btn-text" tabindex="0" onclick="defaultDrawerWindow()">Apply</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
{{ end }}