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

<div class="row" style="height: 100%;">
    <div class="col splitBorder db-left-pane-style">
        <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="menuButton" 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="menuImage"></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="showAddDeviceModal()" id="addDeviceMenuButton"><i class="icon-btn-nav-menu icon-plain icon-add" id="addDeviceMenuImg"></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="removeDevices()" id="deleteDeviceMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteDeviceMenuImg"></i>Delete</button>
                            </li>
                            {{ if eq .Discovery true }}
                            <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="listDiscoveredDevices()" id="discoverDeviceMenuButton" ><i class="icon-btn-nav-menu icon-plain icon-discovery" id="discoverDeviceMenuImg"></i>IP discovery</button>
                            </li>
                            {{ end }}

                        </ul>
                    </li>
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="showAddDeviceModal()" id="addDeviceButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addDeviceImg"></i></button>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="removeDevices()" id="deleteDeviceButton" data-toggle="tooltip" data-placement="bottom" title="Delete" disabled><i class="icon-btn icon-delete-disabled" id="deleteDeviceImg"></i></button>
                    </li>
                    {{ if eq .Discovery true }}
                    <li>
                        <span><i class="icon-separator"></i></span>
                    </li>
                    <li>
                        <button class="btn btn-nav-icon" onclick="listDiscoveredDevices()" id="discoverDeviceButton" data-toggle="tooltip" data-placement="bottom" title="IP discovery"><i class="icon-btn icon-discovery" id="discoverDeviceImg"></i></button>
                    </li>
                    {{ end }}
                </ul>
                <form class="d-flex">
                    <input class="form-control rounded-0" type="search" placeholder="Filter..." aria-label="Filter" id="deviceInputFilter" oninput="onDeviceFilterTextBoxChanged()">
                    <span><i class="icon-filter"></i></span>
                </form>
            </div>
        </nav>
        <div class="grid-wrapper-devices" id="devicesTable">
            <div id="devicesGrid" style="height: 100%;" class="ag-theme-balham-dark"></div>
        </div>

        <div id="deviceSummaryBar" class="grid-summary-bar" role="status" aria-live="polite">
            <span class="grid-summary-item">
                <span class="col-data-label">Devices:</span>
                <span id="deviceSummaryTotalValue" class="form-control" aria-label="Devices value">0</span>
            </span>
        </div>
    </div>

    <div class="col tab dev-editor-style" id="tabs">
        <ul class="nav nav-tabs" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button active" id="connPoint-tab" data-bs-toggle="tab" data-bs-target="#deviceConnectionPoint" type="button" role="tab" aria-controls="deviceConnectionPoint" aria-selected="true">Device Configuration</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab" id="matrixTabSeparator" hidden><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button" id="matrix-tab" data-bs-toggle="tab" data-bs-target="#matrix" type="button" role="tab" aria-controls="matrix" aria-selected="false" hidden>Matrix</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab" id="ndiMatrixTabSeparator"><i class="icon-tab-separator"></i></button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button" id="ndi-matrix-tab" data-bs-toggle="tab" data-bs-target="#ndiMatrix" type="button" role="tab" aria-controls="ndiMatrix" aria-selected="false" hidden>NDI Matrix</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>
            </li>
            <!-- Info tab disabled until data will be available for this tab-->
<!--            <li class="nav-item" role="presentation">-->
<!--                <button class="tablinks tab-button" id="info-tab" data-bs-toggle="tab" data-bs-target="#info" type="button" role="tab" aria-controls="info" aria-selected="false">Info</button>-->
<!--            </li>-->
<!--            <li class="nav-item" role="presentation">-->
<!--                <button class="tab-separator" type="button" role="tab"><i class="icon-tab-separator"></i></button>-->
<!--            </li>-->
            {{ if eq .OfflineDevice true }}
            <li class="nav-item" role="presentation">
                <button class="tablinks tab-button" id="frame-tab" data-bs-toggle="tab" data-bs-target="#frame" type="button" role="tab" aria-controls="frame" aria-selected="false">Frame</button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="tab-separator" type="button" role="tab" id="frameTabSeparator"><i class="icon-tab-separator"></i></button>
            </li>
            {{ end }}
        </ul>
        <div class="tab-content" style="height:100%" id="myTabContent">
            <div class="tab-pane content-padder show active " id="deviceConnectionPoint" role="tabpanel" aria-labelledby="connPoint-tab">
                {{ template "deviceConnectionPoint" . }}
            </div>
            <div class="tab-pane col container-data-device-matrix" id="matrix" role="tabpanel" aria-labelledby="matrix-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="matrixMenuButton" 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="matrixMenuImage"></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="addMatrix()" id="addMatrixMenuButton"><i class="icon-btn-nav-menu  icon-plain icon-add" id="addMatrixMenuImg"></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="showDeleteMatrixModal();" id="deleteMatrixMenuButton" disabled><i class="icon-btn-nav-menu icon-plain icon-delete-disabled" id="deleteMatrixMenuImg"></i>Delete</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="addMatrix()" id="addMatrixButton" data-toggle="tooltip" data-placement="bottom" title="Add"><i class="icon-btn icon-add" id="addMatrixImg"></i></button>
                            </li>
                            <li>
                                <button class="btn btn-nav-icon" onclick="showDeleteMatrixModal();" id="deleteMatrixButton" data-toggle="tooltip" data-placement="bottom" title="Delete"><i class="icon-btn icon-delete" id="deleteMatrixImg"></i></button>
                            </li>
                        </ul>
                    </div>
                </nav>
                <div class="grid-wrapper-device-matrix" id="matrixTable">
                    <div id="matrixGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
                </div>
            </div>
            <div class="tab-pane" id="info" role="tabpanel" aria-labelledby="info-tab">...</div>
            <div class="tab-pane col container-data-device-matrix" id="ndiMatrix" role="tabpanel" aria-labelledby="ndi-matrix-tab">
                {{ template "ndiMatrix" . }}
            </div>
            {{ if eq .OfflineDevice true }}
            <div class="tab-pane col container-data container-data-frame" id="frame" role="tabpanel" aria-labelledby="frame-tab">
                <table class="container-data">
                    <tr class="row-data">
                        <td class="col-data-label-frame-builder">Maximum system PiPs:</td>
                        <td class="col-data-input"><span class="number-wrapper"><input class="form-control rounded-0 number-size" name="startSource" id="maxPips" type="number" min="4" max="128" oninput="restrictNumberField(this)" onchange="updateDeviceSettings()" value="128"/></span></td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label-frame-builder">Mixer license:</td>
                        <td class="col-data-input">
                            <div class="select-wrapper">
                                <select class="custom-select" name="mixerLicenses" id="mixerLicenses" onchange="updateDeviceSettings(this.value)" value="4">
                                    <option value="0">none</option>
                                    <option value="1">1 seat</option>
                                    <option value="2">2 seats</option>
                                    <option value="3">3 seats</option>
                                    <option value="4" selected>4 seats</option>
                                </select>
                            </div>
                        </td>
                    </tr>
                    <tr class="row-data">
                        <td class="col-data-label-frame-builder">Virtual ports:</td>
                        <td class="col-data-input"><input class="form-check-input" name="startSource" id="virtualPorts" onchange="updateDeviceSettings(this.value)" type="checkbox" value=""/></td>
                    </tr>
                </table>
                <div class="grid-wrapper-frame" id="frameTable">
                    <div id="frameGrid" style="height:100%;" class="ag-theme-balham-dark"></div>
                </div>
                <div class="modal-footer frame-grid-footer-size justify-content-between" style="width:100%;">
                    <button class="btn btn-text" id="frameBuilderCancelButton" onclick="onFrameBuilderCancel()">Cancel</button>
                    <button class="btn btn-text" id="frameBuilderApplyButton" onclick="onFrameBuilderApply()">Apply</button>
                </div>
            </div>
            {{ end }}
        </div>
    </div>
</div>

<script src="/static/js/deviceStatusRenderer.js"></script>
<script src="/static/js/refreshIOCheckboxRenderer.js"></script>
<script src="/static/js/checkboxRenderer.js"></script>
<script src="/static/js/keystrokeHandling.js"></script>
{{ if eq .OfflineDevice true }}
<script src="/static/js/offlineEditor.js"></script>
{{ end }}
<script src="/static/js/inputFields.js"></script>
<script type="text/javascript" charset="utf-8">
    const localHostIp = "127.0.0.1";

    const protocolData = {
    {{ range .Protocols }}
    {{ .Id }}: { name: {{ .Name }}, type: {{ .Type }}, isRoss: {{ .IsRoss }}, hasMatrixTab: {{ .HasMatrixTab }}, hasFrameTab: {{ .HasFrameTab }} },
    {{ end }}
    };

    // specify the columns
    const columnDefs = [
        { field: "id", headerName: "ID", suppressMovable: true, hide: true, minWidth: 50, maxWidth: 80, getQuickFilterText: () => ''},
        { field: "name", suppressMovable: true, editable: false, minWidth: 150, maxWidth: 300, comparator: naturalSort},
        { field: "productType", headerName: "Product Type", suppressMovable: true, comparator: naturalSort},
        { field: "protocolId", suppressMovable: true, hide: true, getQuickFilterText: () => ''},
        { field: "protocolName", headerName: "Protocol", suppressMovable: true, valueGetter: getProtocolDisplayName, getQuickFilterText: () => ''},
        { field: "protocolType", suppressMovable: true, hide: true},
        { field: "status", suppressMovable: true, minWidth: 160, cellRenderer: DeviceStatusRenderer, cellStyle: {padding: 0}},
        { field: "severity", suppressMovable: true, hide: true},
    ];

    const deviceGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex:1,
        },
        columnDefs: columnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        getRowId: (params) => String(params.data.id),
        onCellValueChanged: onCellValueChanged,
        onSelectionChanged: onDeviceRowSelectionChanged,
    };

    const matrixColumnDefs = [
        { field: "id", hide: true, getQuickFilterText: () => ''},
        { field: "channelTypeId", hide: true, editable: true, getQuickFilterText: () => ''},
        { field: "channelTypeName", headerName: "Channel Type", singleClickEdit: true, suppressMovable: true, editable: true, getQuickFilterText: () => '', cellEditor: 'agSelectCellEditor', cellEditorParams: {values: []}},
        { field: "protocolLevelId", headerName: "Protocol Level", suppressMovable: true, editable: true, getQuickFilterText: () => ''},
        { field: "firstOutput", suppressMovable: true, editable: true, getQuickFilterText: () => ''},
        { field: "lastOutput", suppressMovable: true, editable: true, getQuickFilterText: () => ''},
        { field: "firstInput", suppressMovable: true, editable: true, getQuickFilterText: () => ''},
        { field: "lastInput", suppressMovable: true, editable: true, getQuickFilterText: () => ''}
    ];

    const refreshIOColumnDefs = [
        { field: "id", hide: true},
        { field: "number", headerName: "Slot", suppressMovable: true, minWidth: 70, maxWidth: 70},
        { field: "current", headerName: "Current Board", suppressMovable: true},
        { field: "discovered", headerName: "Discovered Board", suppressMovable: true},
        { field: "refresh", suppressMovable: true, minWidth: 70, maxWidth: 70, editable: false, cellRenderer: RefreshIOCheckboxRenderer}
    ];

    const matrixGridOptions = {
        defaultColDef: {
            resizable: true,
            sortable: true,
            flex:1,
        },
        columnDefs: matrixColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
        rowSelection: 'single',
        onSelectionChanged: onMatrixRowSelectionChanged,
        onCellValueChanged: onMatrixCellValueChanged,
    };

    const refreshIOGridOptions = {
        defaultColDef: {
            resizable: true,
            flex:1,
        },
        columnDefs: refreshIOColumnDefs,
        suppressMenuHide: true,
        suppressDragLeaveHidesColumns: true,
        headerHeight: 36,
        rowHeight: 31,
    };

    let added = false;
    let deleted = false;
    let deletedIndex = null;

    // Set up the grid after the page has finished loading
    document.addEventListener('DOMContentLoaded', function () {
        addWSDBListener();
        addNDIListener();

        const tableData = [
            {divId: "devicesGrid", table: deviceGridOptions},
            {divId: "matrixGrid", table: matrixGridOptions},
            {divId: "rossNkGrid", table: rossNkGridOptions},
            {divId: "ndiSourceGrid", table: ndiSourceGridOptions},
            {divId: "ndiDestGrid", table: ndiDestGridOptions},
            {{ if eq .OfflineDevice true }}
            {divId: "frameGrid", table: frameGridOptions},
            {{ end }}
        ];
        for (let i = 0; i < tableData.length; i++) {
            let gridDiv = document.querySelector("#" + tableData[i].divId);
            document.getElementById(tableData[i].divId).ag_grid = new agGrid.Grid(gridDiv, tableData[i].table);
        }

        deviceGridOptions.api.addEventListener('modelUpdated',   updateDeviceSummaryBar);
        deviceGridOptions.api.addEventListener('rowDataUpdated', updateDeviceSummaryBar);
        deviceGridOptions.api.addEventListener('filterChanged',  updateDeviceSummaryBar);
        deviceGridOptions.api.addEventListener('firstDataRendered', updateDeviceSummaryBar);

        fetch('/device/agdata')
            .then((response) => response.json())
            .then((data) => {
                deviceGridOptions.api.setRowData(data);
                selectFirstDevice();
                updateDeviceSummaryBar();
            });

        fetch('/matrix/agdata')
            .then((response) => response.json())
            .then((data) => {
                matrixGridOptions.api.setRowData(data);
            });

        {{ if eq .OfflineDevice true }}
        sessionStorage.setItem("deviceSlots", JSON.stringify({}));
        sessionStorage.setItem("deviceSettings", JSON.stringify({}));
        addFrameTypeOptions();
        {{ end }}

        window.addEventListener(DBMODE_TABLE, handleDeviceModeChange);
        refreshDiscoveryButton();
    });

    function updateDeviceSummaryBar() {
        const api = deviceGridOptions?.api;
        if (!api) return;

        const total = api.getDisplayedRowCount();

        const el = document.getElementById('deviceSummaryTotalValue');
        if (el) el.textContent = String(total);
    }


    function getProtocolDisplayName(params) {
        return params.data.protocolName + ' ' + params.data.protocolType
    }

    function selectFirstDevice() {
        deviceGridOptions.api.forEachNode((node) => {
            if (node.rowIndex === 0) {
                node.setSelected(true, true);
            }
        });
    }

    function updateMatrixColumnDef() {
        let columnDef = matrixGridOptions.api.getColumnDefs();
        for (let i = 0; i < columnDef.length; i++) {
            if (columnDef[i].field == "channelTypeName") {
                const protocolId = sessionStorage.getItem("protocolId");
                $.ajax({url: "/matrix/types?protocolId="+protocolId, success: (result) => {
                        let matrixTypeNames = [];
                        sessionStorage.setItem("matrixTypesIds", result.map(node => node.id));
                        result.forEach(node => {matrixTypeNames.push(node.name);});
                        columnDef[i].cellEditorParams.values = matrixTypeNames;
                        matrixGridOptions.api.setColumnDefs(columnDef);
                    }
                })
                break;
            }
        }
    }

    function onDeviceFilterTextBoxChanged() {
        deviceGridOptions.api.setQuickFilter(document.getElementById('deviceInputFilter').value);
        updateDeviceSummaryBar();
    }

    function removeDevices() {
        const selectedData = deviceGridOptions.api.getSelectedRows()
        if (selectedData.length > 0) {
            displayDialog("removeDeviceModal");
        } else {
            displayWarningDialog("Please select a device to delete.");
        }
    }

    function isDuplicateDeviceName(name) {
        let duplicate = false;
        deviceGridOptions.api.forEachNode((node) => {
            if (node.data.name == name) {
                duplicate = true;
            }
        });
        return duplicate;
    }

    function removeSelectedDevices() {
        const selectedData = deviceGridOptions.api.getSelectedRows();
        displayDialog("LoadingModal");
        hideDialog("removeDeviceModal");
        {{ if eq .OfflineDevice true }}
        selectedData.forEach(rowData => {
            removeCachedDeviceSlots(rowData.id)
        })
        {{ end }}
        selectedData.forEach(rowData => {
            $.ajax({url: "/device/remove?id="+rowData.id,
                success: () => {
                    hideDialog("LoadingModal");
                },
                error: (err) => {
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        });
    }

   function onCellValueChanged(event) { // use this function to update device
        $.ajax({ url: "/device/update?name=" + event.data.name + "&id=" + event.data.id + "&protocolId=" + event.data.protocolId,
            success: () => {}
        });
    }

    function onDeviceRowSelectionChanged() {
        const selectedRows = deviceGridOptions.api.getSelectedRows();
        if (selectedRows.length === 1) {
            //TODO maybe it will be simpler to save into sessionStorage just the selected RowID in device table
            sessionStorage.setItem("deviceId", selectedRows[0].id);
            sessionStorage.setItem("protocolId", selectedRows[0].protocolId);
            sessionStorage.setItem("protocolType", selectedRows[0].protocolType);
            hideShowMatrixTab(selectedRows[0].protocolId);
            hideShowNDIMatrixTab(selectedRows[0]);
            refreshSelectedDeviceProtocol();
            refreshSelectedDeviceMatrices();
            refreshSelectedDeviceGeneralInfo();
            {{ if eq .OfflineDevice true }}
            refreshSelectedDeviceSlots(selectedRows[0].id);
            hideShowFrameTab(selectedRows[0].protocolId)
            {{ end }}
            enableUiButton("deleteDevice");
            enableUiButton("deleteDeviceMenu");
        } else {
            NoneDeviceSelected();
            disableUiButton("deleteDevice");
            disableUiButton("deleteDeviceMenu");
        }
        if (dbMode == DBMode_Protect) {
            disableUiButton("deleteDevice");
            disableUiButton("deleteDeviceMenu");
        }
    }

    function onMatrixRowSelectionChanged() {
        const selectedRows = matrixGridOptions.api.getSelectedRows();
        if (selectedRows.length === 1) {
            sessionStorage.setItem("matrixId", selectedRows[0].id);
        }
    }

    function onMatrixCellValueChanged(event) { // use this function to update device
        if (dbMode == DBMode_Protect) {
            displayErrorDialog("The matrix cannot be edited while the database is in protect mode.");
            refreshMatrixTable();
            return;
        }
        if (event.column.colId == "protocolLevelId" || event.column.colId == "firstOutput" || event.column.colId == "lastOutput" || event.column.colId == "firstInput" || event.column.colId == "lastInput") {
            if (!isNumeric(event.newValue)) {
                displayErrorDialog("This value is invalid.  Only numbers are allowed for this field.");
                refreshMatrixTable();
                return;
            }
        }
        $.post("/matrix/update", event.data).done(function( data ) {
            console.log('onCellValueChanged: done updating device', data)
        });
    }

    function refreshMatrixTable() {
        const deviceId = sessionStorage.getItem("deviceId");
        fetch('/matrix/agdata?deviceId=' + deviceId)
            .then((response) => response.json())
            .then((data) => {
                const firstSelectedNodeIndex = matrixGridOptions.api.getSelectedNodes()[0].rowIndex;
                matrixGridOptions.api.setRowData(data);
                setNodeSelected(matrixGridOptions, firstSelectedNodeIndex);
        });
    }

    function hideShowMatrixTab(protocolId) {
        let hidden = !isMatrixTabVisible(protocolId);
        let matrixWindow = document.getElementById("matrix");
        if (hidden && matrixWindow.classList.contains('active')) {
            matrixWindow.classList.remove('active');
            let matrixTab = document.getElementById("matrix-tab");
            matrixTab.classList.remove('active');
            document.getElementById("deviceConnectionPoint").classList.add('active');
            document.getElementById("connPoint-tab").classList.add('active');
        }
        document.getElementById("matrix-tab").hidden = hidden;
        document.getElementById("matrixTabSeparator").hidden = hidden;
    }

    function hideShowNDIMatrixTab(device) {
        let hidden = (device.protocolName !== "NDIMatrix");
        let ndiMatrixWindow = document.getElementById("ndiMatrix");
        if (hidden && ndiMatrixWindow.classList.contains('active')) {
            ndiMatrixWindow.classList.remove('active');
            let ndiMatrixTab = document.getElementById("ndi-matrix-tab");
            ndiMatrixTab.classList.remove('active');
            document.getElementById("deviceConnectionPoint").classList.add('active');
            document.getElementById("connPoint-tab").classList.add('active');
        }
        document.getElementById("ndi-matrix-tab").hidden = hidden;
        document.getElementById("ndiMatrixTabSeparator").hidden = hidden;
        if (!hidden) {
            loadNDIMatrixWindow(device.id);
        }
    }

    function hideShowFrameTab(protocolId) {
        let hidden = !isFrameTabVisible(protocolId);
        let frameWindow = document.getElementById("frame");
        if (hidden && frameWindow.classList.contains('active')) {
            frameWindow.classList.remove('active');
            let frameTab = document.getElementById("frame-tab");
            frameTab.classList.remove('active');
            document.getElementById("deviceConnectionPoint").classList.add('active');
            document.getElementById("connPoint-tab").classList.add('active');
        }
        document.getElementById("frame-tab").hidden = hidden;
        document.getElementById("frameTabSeparator").hidden = hidden;
    }

    function isMatrixTabVisible(protocolId) {
        if (protocolData[protocolId]) {
            return protocolData[protocolId].hasMatrixTab;
        }
        return false;
    }

    function isFrameTabVisible(protocolId) {
        if (protocolData[protocolId]) {
            return protocolData[protocolId].hasFrameTab;
        }
        return false;
    }

    function refreshSelectedDeviceProtocol() {
        const urlParameters = [
            "deviceId=" + sessionStorage.getItem("deviceId"),
            "protocolId=" + sessionStorage.getItem("protocolId")
        ];
        $.ajax({
            url: "/device/connectionPoint?" + urlParameters.join("&"),
            success: (result) => {
                $('#deviceConnectionPoint').html(result);
                if (result.includes("Extra")) {
                    populateExtraFields();
                }
                const selectedRows = deviceGridOptions.api.getSelectedRows();
                let protocolName = "";
                if (selectedRows.length !== 0) {
                    protocolName = selectedRows[0].protocolName;
                    disableCommunicationSettings(protocolName);
                }
                let iPAddress = document.getElementById("IPAddress");
                if ((protocolName === "Ultrix" || protocolName === "NRG") && iPAddress && iPAddress.value === localHostIp) {
                    disableUiButton("deleteDevice");
                    disableUiButton("deleteDeviceMenu");
                }

                if (dbMode == DBMode_Protect) {
                    updateProtocolButtonsInProtection();
                }
                {{ if .FreeSourceAvailable }}
                populateFreeSourceOptions();
                const freeSourceUnsupportedProtocolIds = [10, 11, 12, 13, 14, 15, 16, 17, 18]; // These are the ids for TSL UMD protocols
                changeFreeSourceDisplay(!freeSourceUnsupportedProtocolIds.includes(selectedRows[0].protocolId));
                {{ end }}
            },
            error: (result) => {
                console.log("problem getting connection point:", result);
                //TODO maybe clear Protocol Tab
            }
        });
    }

    function refreshDiscoveryButton() {
        const discoveryButton = document.getElementById("discoverDeviceButton");
        if (discoveryButton != null) {
            fetch('/device/discovery/list')
                .then((response) => response.json())
                .then((data) => {
                    if (data.length > 0) {
                        document.getElementById("discoverDeviceImg").className ="icon-btn icon-discovery-warning";
                        document.getElementById("discoverDeviceMenuImg").className ="icon-btn icon-discovery-warning";
                    } else {
                        document.getElementById("discoverDeviceImg").className ="icon-btn icon-discovery";
                        document.getElementById("discoverDeviceMenuImg").className ="icon-btn icon-discovery";
                    }
                });
        }
    }

    function updateProtocolButtonsInProtection() {
        setInputsReadOnly(["deviceName", "IPAddress", "Port", "Offset", "BatchCollationSplitAtSize", "batchCollationWindowTime_ms", "followLevel"]);
        setSelectsReadOnly(["deviceStatus", "ProtocolVariant", "MatrixMode", "UnusedField", "layer4Echo", "DoNotWaitForAckResponse", "wrapping", "ProbelFilter", "ComPort", "ConnType", "BaudRate", "Parity","followLevelEnabled"]);
    }

    function refreshSelectedDeviceMatrices() {
        const deviceId = sessionStorage.getItem("deviceId");
        if (deviceId) {
            fetch('/matrix/agdata?deviceId=' + deviceId)
                .then((response) => response.json())
                .then((data) => {
                    matrixGridOptions.api.setRowData(data);
                    if (added) {
                        deselectAllDeviceMatrices();
                        matrixGridOptions.api.getDisplayedRowAtIndex(matrixGridOptions.api.getLastDisplayedRow()).setSelected(true);
                        added = false;
                    } else if (deleted) {
                        let lastSelection = matrixGridOptions.api.getDisplayedRowAtIndex(matrixGridOptions.api.getLastDisplayedRow());
                        if (lastSelection && deletedIndex === lastSelection.rowIndex + 1) {
                            matrixGridOptions.api.getDisplayedRowAtIndex(matrixGridOptions.api.getLastDisplayedRow()).setSelected(true);
                        } else {
                            if (matrixGridOptions.api.getDisplayedRowAtIndex(deletedIndex)) {
                                matrixGridOptions.api.getDisplayedRowAtIndex(deletedIndex).setSelected(true);
                            }
                        }
                        deleted = false;
                        deletedIndex = null;
                    } else if (matrixGridOptions.api.getDisplayedRowAtIndex(0) && matrixGridOptions.api.getSelectedRows().length === 0) {
                        matrixGridOptions.api.getDisplayedRowAtIndex(0).setSelected(true);
                    }
                    updateMatrixColumnDef();
                });
        }
    }

    function refreshSelectedDeviceGeneralInfo() {
        //TODO get the data for Device General Info and update that UI section
    }

    function deselectAllDeviceMatrices() {
        const selectedData = matrixGridOptions.api.getSelectedRows();
        if (selectedData.length > 0) {
            matrixGridOptions.api.forEachNode((node) => { node.setSelected(false); });
        }
    }

    function addWSDBListener() {
        var socket = new WebSocket("ws://"+window.location.hostname+":8080/dsws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            if (msg.table) {
                if (msg.table === DEVICE_TABLE) {
                    let firstSelectedNodeIndex = getFirstSelectedNodeIndex(deviceGridOptions);
                    fetch('/device/agdata')
                        .then((response) => response.json())
                        .then((data) => {
                            if (msg.operation === INSERT_OP) {
                                // For new devices, append to existing data
                                const existingData = [];
                                const existingIds = new Set();
                                deviceGridOptions.api.forEachNode(node => {
                                    existingData.push(node.data);
                                    existingIds.add(node.data.id);
                                });
                                const newDevices = data.filter(d => !existingIds.has(d.id));
                                if (newDevices.length > 0) {
                                    deviceGridOptions.api.setRowData([...existingData, ...newDevices]);
                                    deviceGridOptions.api.forEachNode((node) => {
                                        if (node.data.id === newDevices[0].id) {
                                            node.setSelected(true, true);
                                        }
                                    });
                                }
                            } else {
                                if (data.length === 0) {
                                    deviceGridOptions.api.setRowData(data);
                                    NoneDeviceSelected();
                                    disableUiButton("deleteDevice");
                                    disableUiButton("deleteDeviceMenu");
                                    return
                                }
                                if (msg.operation === UPDATE_OP) {
                                    deviceGridOptions.api.setRowData(data);
                                    deviceGridOptions.api.redrawRows();
                                } else if (msg.operation === DELETE_OP) {
                                    const removedItems = [];
                                    deviceGridOptions.api.forEachNode((node) => {
                                        if (!data.find(d => d.id === node.data.id)) {
                                            removedItems.push(node.data);
                                        }
                                    });
                                    if (removedItems.length > 0) {
                                        deviceGridOptions.api.applyTransaction({ remove: removedItems });
                                    }
                                    setNodeSelected(deviceGridOptions, firstSelectedNodeIndex);
                                }
                            }

                            if (msg.operation == INSERT_OP) {
                                {{ if .OfflineDevice }}
                                deviceGridOptions.api.forEachNode((node) => {
                                    if (node.isSelected() && isFrameTabVisible(node.data.protocolId)) {
                                        sessionStorage.setItem("deviceId", node.data.id);
                                        onFrameBuilderApply();
                                    }
                                });
                                {{ end }}
                            }
                        });
                } else if (msg.table === DATABASE_TABLE) {
                    handleDatabaseTableChange(msg, () => {
                        location.reload();
                    });
                } else if (msg.table.includes(CONNECTION_POINT_TABLE) && (msg.operation === UPDATE_OP || msg.operation === INSERT_OP)) {
                    refreshSelectedDeviceProtocol();
                } else if (msg.table.includes(MATRIX_TABLE)) {
                    refreshSelectedDeviceMatrices();
                } else if (msg.table === DISCOVERY_TABLE) {
                    refreshDiscoveryButton();
                } else if (msg.table === NDI_ALIAS_TABLE || msg.table === CHANNEL_TABLE) {
                    refreshNdiChannels();
                } else if (msg.table === SOURCE_TABLE) {
                    {{ if .FreeSourceAvailable }}
                    populateFreeSourceOptions();
                    {{ end }}
                }
            }
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addWSDBListener();
            }, 1000);
        };
    }

    function addNDIListener() {
        var socket = new WebSocket("ws://"+window.location.hostname+":8080/ndiws");
        socket.onopen = function () {
            console.log("Status: Connected\n");
        };
        socket.onmessage = function (event) {
            const msg = JSON.parse(event.data);
            console.log("page got msg: " + JSON.stringify(msg));
            updateNdiSourceStatuses();
            
        };
        socket.onerror = function(event) {
            console.log("Connection Error: " + JSON.stringify(event));
        };
        socket.onclose = function (event) {
            console.log("Socket is closed. Reconnect will be attempted in 1 second. Error Code: " +  event.code + ", Reason: " + event.reason);
            setTimeout(function() {
                addNDIListener();
            }, 1000);
        };
    }

    function handleProtocolIdChanged(id) {
        const deviceId = sessionStorage.getItem("deviceId");
        const protocol = protocolData[id];
        sessionStorage.setItem("protocolId", id);
        if (protocol) {
            sessionStorage.setItem("protocolType", protocol.type);
        }
        $.ajax({
            url: "/device/updateProtocol?deviceId=" + deviceId + "&protocolId=" + id,
            success: (result) => {
                $('#deviceConnectionPoint').html(result);
            }
        });
    }

    function isAlphaNumeric(str) {
        var code, i, len;
        for (i = 0, len = str.length; i < len; i++) {
            code = str.charCodeAt(i);
            if (!(code > 47 && code < 58) && // numeric (0-9)
                !(code > 64 && code < 91) && // upper alpha (A-Z)
                !(code > 96 && code < 123) && // lower alpha (a-z)
                !(code == 95 || code == 45)) { // underscore and hyphen
                return false;
            }
        }
        return true;
    }

    function handleConnectionPointChanged() {
        const protocolType = sessionStorage.getItem("protocolType");
        switch (protocolType) {
            case "tcp":
            case "udp":
                handleIPConnectionPointChanged();
                break;
            case "serial":
                handleSerialConnectionPointChanged();
                break;
            case "tbus":
                handleTBusConnectionPointChanged();
                break;
        }
    }

    function buildExtraField() {
        const extra = JSON.parse(sessionStorage.getItem("extra_properties"));
        if (!extra) {
            return "";
        }
        if (extra.hasOwnProperty("protocolVariant")) {
             extra.protocolVariant = document.getElementById("ProtocolVariant").value;
        }
        if (extra.hasOwnProperty("matrixMode")) {
             extra.matrixMode = document.getElementById("MatrixMode").value;
        }
        if (extra.hasOwnProperty("unusedField")) {
             extra.unusedField = document.getElementById("UnusedField").value;
        }
        if (extra.hasOwnProperty("offset")) {
            extra.offset = document.getElementById("Offset").value;
        }
        if (extra.hasOwnProperty("layer4Echo")) {
            extra.layer4Echo = document.getElementById("layer4Echo").value;
        }
        if (extra.hasOwnProperty("wrapping")) {
            extra.wrapping = document.getElementById("wrapping").value;
        }
        if (extra.hasOwnProperty("DoNotWaitForAckResponse")) {
            extra.DoNotWaitForAckResponse = document.getElementById("DoNotWaitForAckResponse").value;
        }
        if (extra.hasOwnProperty("BatchCollationSplitAtSize")) {
            extra.BatchCollationSplitAtSize = document.getElementById("BatchCollationSplitAtSize").value;
        }
        if (extra.hasOwnProperty("batchCollationWindowTime_ms")) {
            extra.batchCollationWindowTime_ms = document.getElementById("batchCollationWindowTime_ms").value;
        }
        if (extra.hasOwnProperty("followLevelEnabled")) {
            extra.followLevelEnabled = document.getElementById("followLevelEnabled").value;
        }
        if (extra.hasOwnProperty("followLevel")) {
            extra.followLevel = document.getElementById("followLevel").value;
        }
        if (extra.hasOwnProperty("probelFilter")) {
             extra.probelFilter = document.getElementById("ProbelFilter").value;
        }
        if (extra.hasOwnProperty("discoveryserver")) {
            let discoveryserver = [];
            let discoveryserverList = document.getElementById("DiscoveryServer");
            for (let i=0; i<discoveryserverList.options.length; i++) {
                discoveryserver.push(discoveryserverList.options[i].value);
            }
            extra.discoveryserver = discoveryserver
        }
        if (extra.hasOwnProperty("group")) {
            extra.group = document.getElementById("groupName").value;
        }
        if (extra.hasOwnProperty("maxinputs") && Number.isInteger(Number(document.getElementById("ndiSrcCount").value))) {
            extra.maxinputs = document.getElementById("ndiSrcCount").value;
        }
        if (extra.hasOwnProperty("maxoutputs") && Number.isInteger(Number(document.getElementById("ndiDstCount").value))) {
            extra.maxoutputs = document.getElementById("ndiDstCount").value;
        }
        return JSON.stringify(extra)
    }

    function handleSerialConnectionPointChanged() {
        const deviceId = sessionStorage.getItem("deviceId");
        const comPort = document.getElementById("ComPort").value;
        const conType = document.getElementById("ConnType").value;
        const baudRate = document.getElementById("BaudRate").value;
        const parity = document.getElementById("Parity").value;
        const enable = document.getElementById("deviceStatus").value;
        //TODO add extra with check for undefined
        $.ajax({
            url: "/device/updateserialconnectionpoint?deviceId=" + deviceId + "&com=" + comPort +"&type=" + conType +"&baud=" + baudRate + "&parity=" + parity + "&enable=" + enable,
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function handleTBusConnectionPointChanged() {
        const deviceId = sessionStorage.getItem("deviceId");
        const comPort = document.getElementById("ComPort").value;
        const enable = document.getElementById("deviceStatus").value;
        //TODO add extra with check for undefined
        $.ajax({
            url: "/device/updatetbusconnectionpoint?deviceId=" + deviceId + "&com=" + comPort + "&enable=" + enable,
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function addMatrix(){
        const deviceId = sessionStorage.getItem("deviceId");
        let channelTypeId = getAddMatrixChannelTypeId();
        let protocolLevelId = getAddMatrixProtocolLevelId();
        displayDialog("LoadingModal");
        $.ajax({
            url: "/matrix/add?deviceId=" + deviceId + "&channelTypeId=" + channelTypeId + "&protocolLevelId=" + protocolLevelId,
            success: () => {
                hideDialog("LoadingModal");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
        added = true;
    }

    function getAddMatrixChannelTypeId() {
        const mTypesIds = sessionStorage.getItem("matrixTypesIds");
        let matrixTypeIds = [];
        let channelTypeId = 1;
        if (mTypesIds) {
            matrixTypeIds = mTypesIds.split(',');
            channelTypeId = matrixTypeIds[0];
            matrixGridOptions.api.forEachNode((node) => {
                let index = matrixTypeIds.indexOf(String(node.data.channelTypeId));
                if (index !== -1) {
                    matrixTypeIds.splice(index, 1);
                }
            });
            if (matrixTypeIds.length > 0) {
                channelTypeId = matrixTypeIds[0];
            }
        }
        return channelTypeId;
    }

    function getAddMatrixProtocolLevelId() {
        let maxLevelId = 1;
        matrixGridOptions.api.forEachNode((node) => {
            if (parseInt(node.data.protocolLevelId) >= maxLevelId) {
                maxLevelId = parseInt(node.data.protocolLevelId) + 1;
            }
        });
        return maxLevelId;
    }

    function deleteMatrix(){
        const selectedRows = matrixGridOptions.api.getSelectedRows();
        if (selectedRows.length > 0) {
            deletedIndex = matrixGridOptions.api.getSelectedNodes()[0].rowIndex;
            const matrixId = sessionStorage.getItem("matrixId");
            $.ajax({
                url: "/matrix/delete?matrixId=" + matrixId,
                success: () => {}
            });
            deleted = true;
        } else {
            displayWarningDialog("Please select a matrix to delete.");
        }
    }

	function showDeleteMatrixModal() {
		const selectedMatrixData = matrixGridOptions.api.getSelectedRows();
		const message = "Are you sure you want to delete the matrix '" + selectedMatrixData[0].longName + "' from " + selectedMatrixData[0].name + "?";
		displayConfirmationDialog(message, "Delete", "deleteMatrix()", "Delete Matrix", "icon-white icon-delete");
	}

    function showAddDeviceModal() {
        {{ if eq .IsUltrixDevice true }}
        // UR-5791 says we should be hiding the "Ross" tab for Ultrix frames (not BCS frames) as an Ultrix frame should not make
        // outgoing connections, but this might change in the future
        // Hides the Ross tab and clicks the next visible tab
        $(".rossDevices").css("display", "none");
        $("#rossNk-tab").click();
        console.log("should make everything hide");
        {{ else }}
        // Click the "Ross" tab
        $("#rossDevice-tab").click();
        {{ end }}

        document.getElementById("rossProtocolId").value = document.getElementById("rossProtocolId").options[0].value;
        $("#rossNkProtocolId").val($("#rossNkProtocolId option:first").val()).trigger("change");
        document.getElementById("thirdPartyProtocolId").value = document.getElementById("thirdPartyProtocolId").options[0].value;
        {{ if eq .OfflineDevice false }}
        document.getElementById("rossIP").value = "";
        document.getElementById("rossNkIP").value = "";
        document.getElementById("thirdPartyIP").value = "";
        {{ else }}
        selectFirstRossDeviceModelOption();
        {{ end }}
        document.getElementById("rossName").value = "";
        document.getElementById("thirdPartyName").value = "";
        clearRossNKTable();
        onRossProtocolChange();
        onThirdPartyProtocolChange();
        displayDialog('addDeviceModal');
    }

    function NoneDeviceSelected() {
        $('#deviceConnectionPoint').html("");
        let communicationWindow = document.getElementById("deviceConnectionPoint");
        let communicationTab = document.getElementById("connPoint-tab");
        let matrixWindow = document.getElementById("matrix");
        if (matrixWindow.classList.contains('active')) {
            matrixWindow.classList.remove('active');
            let matrixTab = document.getElementById("matrix-tab");
            matrixTab.classList.remove('active');
            communicationWindow.classList.add('active');
            communicationTab.classList.add('active');
        }
        document.getElementById("matrix-tab").hidden = true;
        document.getElementById("matrixTabSeparator").hidden = true;
        document.getElementById("ndi-matrix-tab").hidden = true;
        document.getElementById("ndiMatrixTabSeparator").hidden = true;
        {{ if .OfflineDevice }}
            let frameWindow = document.getElementById("frame");
            if (frameWindow.classList.contains('active')) {
                frameWindow.classList.remove('active');
                let frameTab = document.getElementById("frame-tab");
                frameTab.classList.remove('active');
                communicationWindow.classList.add('active');
                communicationTab.classList.add('active');
            }
            document.getElementById("frame-tab").hidden = true;
            document.getElementById("frameTabSeparator").hidden = true;
        {{ end }}
        // TODO: hide Device General Info tab data
    }

    function showRefreshIOModal(id, name) {
        displayDialog("refreshIOConfirmModal");
    }

    function refreshIO() {
        const id = deviceGridOptions.api.getSelectedRows()[0].id;
        hideDialog('refreshIOConfirmModal');
        displayDialog("LoadingModal");
        $.ajax({url: "/device/refreshIO/add?devId=" + id,
            success: (data) => {
                hideDialog("LoadingModal");
                displayInfoDialog((data.msg || "").trim() || "Refresh I/O done.");
            },
            error: (err) => {
                displayErrorDialog(err.responseText || JSON.stringify(err));
            }
        });
    }

    function disableCommunicationSettings(protocolName) {
        if (protocolName === "IPMatrix" || protocolName === "NDIMatrix") {
            document.getElementById("deviceName").readOnly = true;
            document.getElementById("IPAddress").readOnly = true;
            document.getElementById("Port").readOnly = true;
            document.getElementById("deviceStatus").disabled = true;
            document.getElementById("deviceControl").style.visibility = "hidden";
        } else if (protocolName === "Emulator") {
            document.getElementById("deviceStatus").disabled = true;
        } else {
            document.getElementById("deviceStatus").disabled = false;
        }
    }

    function handleDeviceModeChange(eventData) {
        dbMode = eventData.detail.dbMode;
        if (eventData.detail.dbMode == DBMode_Protect) {
            disableButtonIds(["addDevice", "addDeviceMenu", "deleteDevice", "deleteDeviceMenu", "addMatrix", "addMatrixMenu", "deleteMatrix", "deleteMatrixMenu"]);
        } else {
            enableButtonIds(["addDevice", "addDeviceMenu", "addMatrix", "addMatrixMenu", "deleteMatrix", "deleteMatrixMenu"]);
        }
        deviceGridOptions.api.refreshCells({force: true});
        onDeviceRowSelectionChanged();
    }

    function setFreeSourceLoading(loading) {
        let inputField = document.getElementById("freeSourceInput");
        if (inputField) {
            inputField.disabled = loading;
            if (loading) {
                inputField.value = "";
                inputField.placeholder = "Loading sources...";
            } else {
                inputField.placeholder = "";
            }
        }
    }

    function populateFreeSourceOptions () {
        const deviceId = sessionStorage.getItem("deviceId");
        if (deviceId) {
            setFreeSourceLoading(true);
            const urlParameters = [
                "deviceId=" + deviceId
            ];
            $.ajax({
                url: "/device/sources?" + urlParameters.join("&"),
                success: (data) => {
                    const listId = "freeSourceInput";
                    let inputField = $("#" + listId);
                    const noFreeSourceString = "None";
                    let selectedObject = noFreeSourceString;

                    let deviceSources = [{value: 0, label: "", displayLabel: noFreeSourceString}];
                    for (let i = 0; i < data.length; i++) {
                        if (data[i].selected) {
                            selectedObject = data[i].name;
                        }
                        deviceSources.push({value: data[i].sourceId, label: data[i].name});
                    }
                    inputField.val(selectedObject);
                    let listElem = document.getElementById(listId)
                    if (listElem) {
                        autocomplete(listElem, deviceSources, function (sourceId, sourceName) {
                            if (sourceName == selectedObject) {
                                return;
                            }

                            if (sourceId == null) {
                                displayWarningDialog("'" + sourceName + "' is not a valid source on this device.  The currently designated free source will remain '" + selectedObject + "'.")
                                inputField.val(selectedObject);
                            } else {
                                // If sourceId is valid, update the value in the system
                                updateFreeSourceForDevice(sourceId);
                            }
                        }, false, 0);  // Do not boldface the matching text input, show all items
                    }
                    setFreeSourceLoading(false);
                },
                error: (err) => {
                    setFreeSourceLoading(false);
                    displayErrorDialog(err.responseText || JSON.stringify(err));
                }
            });
        }
    }

    function changeFreeSourceDisplay (display) {
        $(".freeSourceRows").css("display", (display === true) ? "table-row" : "none");
    }
</script>

{{ template "deviceAdd" . }}
{{ template "deviceDiscovery" . }}

<div class="modal" id="removeDeviceModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="removeDeviceModalLabel" 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" id="removeDeviceModalLabel"><i class="icon-delete icon-white"></i>Confirm Delete Device</span>
                <span class="btn btn-transparent" onclick="hideDialog('removeDeviceModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">Are you sure you want to delete the selected devices?</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button id="deleteDeviceCancelBtn" class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('removeDeviceModal')">Cancel</button>
                <button id="deleteDeviceApplyBtn" class="btn btn-text" tabindex="0" onclick="removeSelectedDevices()">Apply</button>
            </div>
        </div>
    </div>
</div>

<div class="modal" id="refreshIOConfirmModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="refreshIOConfirmModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-max-content-size">
        <div class="modal-content">
            <div class="modal-header">
                <span class="modal-title" id="refreshIOConfirmModalLabel"><i class="icon-refresh icon-white"></i>Refresh I/O</span>
                <span class="btn btn-transparent" onclick="hideDialog('refreshIOConfirmModal');"><i class="icon-close-header"></i></span>
            </div>
            <div class="modal-body">
                <p class="container-data">If new I/Os are discovered, they will be added to the database. No I/Os will be removed from the database.</p>
            </div>
            <div class="modal-footer justify-content-between">
                <button class="btn btn-text btn-outline-secondary" tabindex="1" onclick="hideDialog('refreshIOConfirmModal')">Cancel</button>
                <button class="btn btn-text" tabindex="0" onclick="refreshIO()">Apply</button>
            </div>
        </div>
    </div>
</div>

{{ template "autocomplete" . }}

{{ template "progressbar" . }}

{{ end }}