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

<table class="container-data-device-config">
  <tr class="row-data">
    <td class="col-data-label">Device Name:</td>
    <td class="col-data-input">
      <input class="form-control rounded-0 name-size" id="deviceName" onchange="handleDeviceNameChanged(this.value);" {{ if and (not .Enable) (not .OfflineDevice) }} readonly {{ end }} value={{ .DeviceName }}>
    </td>
  </tr>
  {{ if .Enable }}
  <tr class="row-data row-data-note">
    <td class="col-data-label"></td>
    <td class="note-under-input">Device name change is kept local except for Ultrix devices.</td>
  </tr>
  {{ end }}
</table>
<table class="container-data-device-config" id="deviceCommunication">
  <tr class="row-data">
    <td colspan="2"><nav class="header"><div>Communication</div></nav></td>
  </tr>
  <tr class="row-data">
    <td class="col-data-label">Protocol:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select {{if .Enable }} custom-select-read-only {{ end }}"  onclick="return false;" onkeydown="return false;" name="deviceType" id="deviceType" onchange="handleProtocolIdChanged(this.value)">
          {{$protocolSelectedId := .ProtocolId}}
          {{ range .Protocols }}
              <option value={{ .Id }} {{if eq $protocolSelectedId .Id}} selected="selected" {{end}}>
                {{ .Name }} {{ if ne .Type "simulated" }} {{ .Type }} {{ end }}
              </option>
          {{ end }}
        </select>
      </div>
    </td>
  </tr>
</table>
<table class="container-data-device-config" id="connPointId">
  {{ template "connectionPoint" . }}
</table>

<table class="container-data-device-config" id="deviceControl">
  <tr class="row-data">
    <td colspan="2"><nav class="header"><div>Control</div></nav></td>
  </tr>
  <tr class="row-data">
    <td class="col-data-label">Device State:</td>
    <td class="col-data-input">
      <div class="select-wrapper">
        <select class="custom-select {{if eq .OfflineDevice true }} custom-select-read-only {{ end }}" name="deviceStatus" id="deviceStatus" onchange="handleConnectionPointChanged();" >
          {{if .Enable }}
            <option value="1" selected>enabled</option>
            <option value="0">disabled</option>
          {{else}}
            <option value="1">enabled</option>
            <option value="0" selected>disabled</option>
          {{end}}
        </select>
      </div>
    </td>
  </tr>
  {{ if .Enable }}
  <tr class="row-data row-data-note">
    <td class="col-data-label"></td>
    <td class="note-under-input">Communication settings can only be edited when the device is disabled.</td>
  </tr>
  {{ end }}
  {{ if .FreeSourceAvailable }}
  <tr class="row-data freeSourceRows">
<!--    <td class="col-data-label fw-bold">Routing</td>-->
  </tr>
  <tr class="row-data freeSourceRows">
    <td class="col-data-label" style="vertical-align: top;">Free Source:</td>
    <td class="col-data-input" style="display: ruby-text;">
      <div class="autocomplete">
        <input id="freeSourceInput" type="text" name="freeSourceInput" class="form-control rounded-0 auto-size fake-dropdown-input" autocomplete="off" value="">
      </div>
    </td>
  </tr>
  {{ end }}
</table>

<script type="text/javascript" charset="utf-8">
  function handleDeviceNameChanged(name) {
    const deviceId = sessionStorage.getItem("deviceId");
    if (isAlphaNumeric(name)){
      if (isDuplicateDeviceName(name)){
        displayWarningDialog("Database cannot have duplicate device names.");
        document.getElementById("deviceName").value = {{ .DeviceName }};
        return;
      }
      $.ajax({
        url: "/device/updateName?deviceId=" + deviceId + "&name=" + name,
        success: (result) => {
          if (sessionStorage.getItem("deviceId") === deviceId) {
            $('#deviceConnectionPoint').html(result);
            populateFreeSourceOptions();
          }
        }
      });
    } else{
      displayWarningDialog("Bad Device Name");
      document.getElementById("deviceName").value = {{ .DeviceName }};
    }
  }

  function updateFreeSourceForDevice (sourceId) {
    const urlParameters = [
      "deviceId=" + sessionStorage.getItem("deviceId"),
      "sourceId=" + sourceId
    ];
    displayDialog("LoadingModal");
    $.post("/device/setFreeSource?" + urlParameters.join("&"))
      .done(() => {
        hideDialog("LoadingModal");
      })
      .fail((err) => {
        displayErrorDialog(err.responseText || JSON.stringify(err));
      });
  }
</script>
{{ end }}