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

<style>
    {{ range .Levels }}
    .level{{ .Id }} {
    background-color: {{ .Color }} !important;
    color: var(--text-bg);
    font-weight: normal;
    }
    {{ end }}
</style>

<script type="text/javascript" charset="utf-8">
    const viewColumnDefs = [
        {field: "id", hide: true, maxWidth: 50, getQuickFilterText: () => ''},
        {field: "destinationName", headerName: "", pinned: "left", suppressMovable: true, filter: true, minWidth: 71, maxWidth:71, getQuickFilterText: () => ''},
        {{ range .Levels }}
    {field: "{{ .Name }}", colId: {{ .Id }}, headerClass: "level{{ .Id }}", suppressMovable: true, filter: true, editable: false, minWidth: 71, maxWidth:71},
    {{ end }}
    ]

    const viewGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex:1,
            wrapText: true,
            lockPinned: true,
            autoHeaderHeight: true,
            wrapHeaderText: true,
            headerClass: 'header-one'
        },
        columnDefs: viewColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 37,
        rowHeight: 50,
        rowSelection: 'single',
        onRowDataChanged: onViewDataChanged,
    };

    function onViewDataChanged() {
        const columns = viewGridOptions.columnApi.getAllColumns();
        const rowsNodes = viewGridOptions.api.getRenderedNodes();
        var isColumnEmpty = true;
        columns.forEach(column => {
            isColumnEmpty = !rowsNodes.some(rowNode => {
                const value = viewGridOptions.api.getValue(column, rowNode);
                return typeof value !== 'undefined' && value !== null;
            });
            column.columnApi.setColumnVisible(column.colDef.colId, !isColumnEmpty);
        });
    }

    function toggleView() {
        let salvoId = sessionStorage.getItem("selectedSalvoId");
        if (!document.getElementById("view").hidden) {
            document.getElementById("viewButton").style.backgroundColor = "var(--button-bg)"
        } else {
            document.getElementById("viewButton").style.backgroundColor = "var(--selected)";
            displayDialog("LoadingModal");
            fetch('/salvo/view?salvoId=' + salvoId)
                .then((response) => response.json())
                .then((data) => {
                    viewGridOptions.api.setRowData(data);
                    hideDialog("LoadingModal");
                });
        }
        document.getElementById("view").hidden = !document.getElementById("view").hidden
        document.getElementById("default").hidden = !document.getElementById("default").hidden
        resizeAll();
    }

    function refreshSalvoView(salvoMappings) {
        let salvoId = sessionStorage.getItem("selectedSalvoId");
        if (salvoId) {
            if (salvoMappings) {
                viewGridOptions.api.setRowData(salvoMappings);
            } else {
                fetch('/salvo/view?salvoId=' + salvoId)
                    .then((response) => response.json())
                    .then((data) => {
                        viewGridOptions.api.setRowData(data);
                    });
            }
        } else {
            disableUiButton("duplicateSalvo");
            disableUiButton("removeSalvo");
            disableUiButton("view");
            viewGridOptions.api.setRowData([]);
        }
    }

    function initializeSalvoView() {
        let gridDiv = document.querySelector('#viewGrid');
        let viewGrid = new agGrid.Grid(gridDiv, viewGridOptions);
        document.getElementById("viewGrid").ag_grid = viewGrid;
    }
</script>

<div class="grid-wrapper-salvo" id="viewTable">
    <div id="viewGrid" class="ag-theme-balham-dark"></div>
</div>
{{ end }}