{{ define "connectionPoint" }}
{{- /*gotype: rossvideo.com/rcs/internal/ross/webserver.ipConnectionPointDataType*/ -}}
{{ $showGVG := eq .ProtocolId 2 }}

<link href="/static/css/pages/device.css" rel="stylesheet">

<script type="text/javascript" charset="utf-8">
  {{ if .Extra }}
    sessionStorage.setItem("extra_properties", {{ .Extra }});
  {{ end }}

  function populateExtraFields() {
    const extra = JSON.parse(sessionStorage.getItem("extra_properties"));
    //console.log("extra" + JSON.stringify(extra));
    if (extra) {
      if (extra.hasOwnProperty("protocolVariant")) {
        document.getElementById("ProtocolVariant").value = extra.protocolVariant;
      }
      if (extra.hasOwnProperty("matrixMode")) {
        document.getElementById("MatrixMode").value = extra.matrixMode;
      }
      if (extra.hasOwnProperty("unusedField")) {
        document.getElementById("UnusedField").value = extra.unusedField;
      }
      if (extra.hasOwnProperty("offset")) {
        document.getElementById("Offset").value = extra.offset;
      }
{{ if $showGVG }}
      if (extra.hasOwnProperty("layer4Echo")) {
        document.getElementById("layer4Echo").value = extra.layer4Echo;
      }
{{ end }}
      if (extra.hasOwnProperty("wrapping")) {
        document.getElementById("wrapping").value = extra.wrapping;
      }
      if (extra.hasOwnProperty("DoNotWaitForAckResponse")) {
        document.getElementById("DoNotWaitForAckResponse").value = extra.DoNotWaitForAckResponse;
      }
      if (extra.hasOwnProperty("BatchCollationSplitAtSize")) {
        document.getElementById("BatchCollationSplitAtSize").value = extra.BatchCollationSplitAtSize;
      }
      if (extra.hasOwnProperty("batchCollationWindowTime_ms")) {
        document.getElementById("batchCollationWindowTime_ms").value = extra.batchCollationWindowTime_ms;
      }
      if (extra.hasOwnProperty("probelFilter")) {
        document.getElementById("ProbelFilter").value = extra.probelFilter;
      }
      if (extra.hasOwnProperty("discoveryserver")) {
        removeAllOptions("#DiscoveryServer");
        let select = document.getElementById("DiscoveryServer");
        for (let i=0; i < extra.discoveryserver.length; i++) {
          let option = new Option(extra.discoveryserver[i], extra.discoveryserver[i]);
          select.add(option, undefined);
        }
      }
      if (extra.hasOwnProperty("group")) {
        document.getElementById("groupName").value = extra.group;
      }
      if (extra.hasOwnProperty("maxinputs")) {
        document.getElementById("ndiSrcCount").value = extra.maxinputs;
      }
      if (extra.hasOwnProperty("maxoutputs")) {
        document.getElementById("ndiDstCount").value = extra.maxoutputs;
      }
    }
  }

  function handleIPConnectionPointChanged() {
    const ipAddress = document.getElementById("IPAddress").value;
    if (!validateIp(ipAddress)) {
      displayErrorDialog(IpErrorMessage);
      document.getElementById("IPAddress").value = {{ .IpAddress }};
      return;
    }
    const port = document.getElementById("Port").value;
    if (!isNumeric(port)) {
      displayErrorDialog("Port value is invalid.  Only numbers are allowed for this field.");
      document.getElementById("Port").value = {{ .Port }};
      return;
    }
    const urlParameters = [
        "deviceId=" + sessionStorage.getItem("deviceId"),
        "ip=" + ipAddress,
        "port=" + port,
        "enable=" + document.getElementById("deviceStatus").value,
        "extra=" + buildExtraField()
     ];
    $.ajax({
      url: "/device/updateipconnectionpoint?" + urlParameters.join("&"),
        success: (result) => {
            $('#connPointId').html(result);
        }
    });
  }
</script>

<tr class="row-data">
  <td class="col-data-label">IP Address:</td>
  <td class="col-data-input">
      <input class="form-control rounded-0 ip-address-size" name="IPAddress" id="IPAddress" value="{{ .IpAddress }}" {{if .Enable }}readonly {{ end }}onchange="handleIPConnectionPointChanged();">
  </td>
</tr>
<tr class="row-data">
  <td class="col-data-label">Port:</td>
  <td class="col-data-input">
      <input class="form-control rounded-0 number-size" type="number" min="1" name="Port" id="Port" value="{{ .Port }}" {{if .PortDisabled }}readonly {{ end }}onchange="handleIPConnectionPointChanged();">
  </td>
</tr>
{{if contains .Extra "protocolVariant"}}
  <tr class="row-data">
    <td class="col-data-label">Protocol Variant:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select {{if .Enable }} custom-select-read-only {{ end }}" name="Protocol variant" id="ProtocolVariant" onchange="handleIPConnectionPointChanged();">
          <option value="0" selected>Use Last Req</option>
          <option value="1">Non Extended:</option>
          <option value="2">Extended:</option>
        </select>
      </div>
    </td>
  </tr>
{{ end }}
{{if contains .Extra "matrixMode"}}
  <tr class="row-data">
    <td class="col-data-label">Matrix Mode:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select {{if .Enable }} custom-select-read-only {{ end }}" name="Matrix mode" id="MatrixMode" onchange="handleIPConnectionPointChanged();">
          <option value="true" selected>true</option>
          <option value="false">false</option>
        </select>
      </div>
    </td>
  </tr>
{{ end }}
{{if contains .Extra "unusedField"}}
  <tr class="row-data">
    <td class="col-data-label">Unused Field:</td>
    <td class="col-data-input">
      <span class="number-wrapper">
        <input class="form-control rounded-0 auto-size" type="number" name="Unused field" id="UnusedField" {{if .Enable }} readonly {{ end }} value="0" onchange="handleIPConnectionPointChanged();">
      </span>
    </td>
  </tr>
{{ end }}
{{if contains .Extra "layer4Echo"}}
{{if $showGVG }}
  <tr class="row-data">
    <td class="col-data-label">Layer 4 Echo:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select {{if .Enable }} custom-select-read-only {{ end }}" name="Layer 4 echo" id="layer4Echo" onchange="handleIPConnectionPointChanged()">
          <option value="true" selected>true</option>
          <option value="false">false</option>
        </select>
      </div>
    </td>
  </tr>
{{ end }}
{{ end }}
{{if contains .Extra "offset"}}
  <tr class="row-data">
    <td class="col-data-label">Offset:</td>
    <td class="col-data-input">
      <span class="number-wrapper">
        <input class="form-control rounded-0 auto-size" type="number" name="Offset" id="Offset" {{if .Enable }} readonly {{ end }} value="0" onchange="handleIPConnectionPointChanged();">
      </span>
    </td>
  </tr>
{{ end }}
{{if contains .Extra "DoNotWaitForAckResponse"}}
<tr class="row-data">
  <td class="col-data-label">Don't Wait for ACK:</td>
  <td class="col-data-input">
    <div class="select-wrapper">
      <select class="custom-select {{if .Enable }} custom-select-read-only {{ end }}" name="Don't wait for ACK" id="DoNotWaitForAckResponse" onchange="handleIPConnectionPointChanged();">
        <option value="true" selected>true</option>
        <option value="false">false</option>
      </select>
    </div>
  </td>
</tr>
{{ end }}
{{if contains .Extra "wrapping"}}
<tr class="row-data">
  <td class="col-data-label">Wrapping:</td>
  <td class="col-data-input">
    <div class="select-wrapper">
      <select class="custom-select {{if .Enable }} custom-select-read-only {{ end }}" name="Wrapping" id="wrapping" onchange="handleIPConnectionPointChanged();">
        <option value="true" selected>enabled</option>
        <option value="false">disabled</option>
      </select>
    </div>
  </td>
</tr>
{{ end }}
{{if contains .Extra "BatchCollationSplitAtSize"}}
<tr class="row-data">
  <td class="col-data-label">Collate Split Size:</td>
  <td class="col-data-input">
    <span class="number-wrapper">
      <input class="form-control rounded-0 auto-size" type="number" name="Collation split size" id="BatchCollationSplitAtSize" {{if .Enable }} readonly {{ end }} value="0" onchange="handleIPConnectionPointChanged();">
    </span>
  </td>
</tr>
{{ end }}

{{if contains .Extra "batchCollationWindowTime_ms"}}
<tr class="row-data">
  <td class="col-data-label">Collate Time (ms):</td>
  <td class="col-data-input">
    <span class="number-wrapper">
      <input class="form-control rounded-0 auto-size" type="number" name="Collate time (ms)" id="batchCollationWindowTime_ms" value="0" {{if .Enable }} readonly {{ end }} onchange="handleIPConnectionPointChanged();">
    </span>
  </td>
</tr>
{{ end }}

{{if contains .Extra "probelFiter"}}
  <tr class="row-data">
    <td class="col-data-label">Probel Filter:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select" name="Probel Filter" id="ProbelFilter" onchange="handleIPConnectionPointChanged();">
          <option value="true" selected>true</option>
          <option value="false">false</option>
        </select>
      </div>
    </td>
  </tr>
{{ end }}

{{ end }}