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

<div aria-hidden="true" aria-labelledby="deviceDiscoveryModalLabel" class="modal" data-bs-backdrop="static" data-bs-keyboard="false" id="deviceDiscoveryModal" role="dialog" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-add-device-size">
    <div class="modal-content" >
      <div class="modal-header justify-content-between">
        <span class="modal-title" id="deviceDiscoveryModalLabel"><i class="icon-discovery icon-white"></i>IP discovery</span>
        <span class="btn btn-transparent" onclick="closeDeviceDiscoveryModal()"><i class="icon-close-header"></i></span>
      </div>
      <div class="modal-body">
        <div class="row container-data-discovery">
          <div class="col">
            <div class="grid-wrapper-discovery" id="devDiscTable">
              <div class="ag-theme-balham-dark" id="deviceDiscoveryGridDiv" style="height: 100%;, width:100%" ></div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer justify-content-between">
        <button class="btn btn-text btn-outline-secondary" onclick="closeDeviceDiscoveryModal()" tabindex="1">Cancel</button>
        <button class="btn btn-text" onclick="addDiscoveredDevices()" tabindex="0">Apply</button>
      </div>
    </div>
  </div>
</div>
<script charset="utf-8" type="text/javascript">

    let discoveredDevicesColDefs = [
      {field: "Device", suppressMovable: true, minWidth: 370, maxWidth: 370},
      {field: "Product", suppressMovable: true, hide: true},
      {field: "Serial", suppressMovable: true, hide: true},
      {field: "Add", suppressMovable: true, editable: false, minWidth: 70, maxWidth: 70, filter: false, cellRenderer: CheckboxRendererAG},
    ]

    let devDiscoveryGridOptions = {
      defaultColDef: {
        resizable: true,
      },
      columnDefs: discoveredDevicesColDefs,
      suppressMenuHide: true,
      suppressDragLeaveHidesColumns: true,
      headerHeight: 36,
      rowHeight: 31,
    };

    function listDiscoveredDevices() {
        const devDiscDiv = document.querySelector('#deviceDiscoveryGridDiv');
        document.getElementById("deviceDiscoveryGridDiv").ag_grid = new agGrid.Grid(devDiscDiv, devDiscoveryGridOptions);
        fetch('/device/discovery/list')
                .then((response) => response.json())
                .then((data) => {
                  devDiscoveryGridOptions.api.setRowData(data);
                });
        displayDialog("deviceDiscoveryModal");
    }

    function addDiscoveredDevices() {
      let serialList = [];
      devDiscoveryGridOptions.api.forEachNode((node) => {
        if (node.data.Add && node.data.Device !== "All") {
          serialList.push(node.data.Serial);
        }
      });
      if (serialList.length > 0) {
        const fData = new FormData();
        fData.append("deviceSerial", serialList.join(","));
        const httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', '/device/discovery/add');
        httpRequest.send(fData);
        httpRequest.onreadystatechange = () => {
          if (httpRequest.readyState === 4 && httpRequest.status === 500) {
            displayErrorDialog(httpRequest.responseText);
          } else if (httpRequest.readyState === 4 && httpRequest.status === 200) {
            displayInfoDialogAfterLoading("Discovered devices are added");
          }
        }
        displayDialog("LoadingModal");
        hideDialog('deviceDiscoveryModal');
        devDiscoveryGridOptions.api.destroy();
      }
    }

    function closeDeviceDiscoveryModal() {
        devDiscoveryGridOptions.api.destroy();
        hideDialog('deviceDiscoveryModal');
    }
</script>
{{ end }}