<!--
 This file is part of the bliss project

 Copyright (c) 2015-2023 Beamline Control Unit, ESRF
 Distributed under the GNU LGPLv3. See LICENSE for more info.
  -->
<div class="container">
<div class="row">
  <div class="btn-group btn-group" role="group" aria-label="global functionality">
    <a class="btn btn-default disabled-btn" href="javascript:void(0)">
      {{ config['name'] }}
    </a>
    <button id="apply" type="button" class="btn btn-primary"
	    data-toggle="tooltip" title="save changes">
      Save
     <span class="fa fa-save"></span>
    </button>
    <button id="revert" type="button" class="btn btn-info"
	    data-toggle="tooltip" title="revert changes">
      Revert
      <span class="fa fa-undo"></span>
    </button>
    <button type="button" class="btn btn-info"
      data-name="{{config['name']}}" data-filename="{{config.filename}}"
      data-toggle="tooltip" title="view in yaml file">
      Yaml
      <span class="fa fa-eye"></span>
    </button>
  </div>
</div>
<div style="height:10px;"></div>
<form id="device_form" class="form-horizontal">
  <fieldset>
    <div class="form-group">
      <label class="col-md-1 control-label" for="device-name"
  	     data-toggle="tooltip" title="card name">
	Name
      </label>
      <div class="col-md-4">
	<input id="device-name" name="device-name"
 	       class="form-control input-md" type="text"
	       value="{{ config['name']}}" />
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-1 control-label" for="device-name"
  	     data-toggle="tooltip" title="type of card">
	Type
      </label>
      <div class="col-md-4">
	<select class="selectpicker" id="device-type" name="device-type">
	  <option {{ "selected" if config["type"] == "P201"}}>P201</option>
	  <option {{ "selected" if config["type"] == "C208"}}>C208</option>
	</select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-1 control-label" for="device-address"
  	     data-toggle="tooltip" title="device address">
	Address
      </label>
      <div class="col-md-4">
	<input id="device-address" name="device-address"
 	       class="form-control input-md" type="text"
	       value="{{ config['address']}}" />
      </div>
    </div>

    <div class="form-group">
      <label class="col-md-1 control-label" for="device-clock"
  	     data-toggle="tooltip" title="internal clock speed">
	Clock
      </label>
      <div class="col-md-4">
	<select class="selectpicker" id="device-clock" name="device-clock">
	  {% for clock in card.Clock %}
	  <option {{ "selected" if clock.name == config["clock"] }}>{{ clock.name }}</option>
	  {% endfor %}
	</select>
      </div>
    </div>

    <div class="panel panel-default">

      <table id="ct2_channels_extra" class="table table-striped table-bordered"
	     data-toggle="table" data-show-toggle="true"
	     data-show-columns="true" style="tr, th, td {padding:2px;}">
	<thead>
	  <tr>
	    <th>#</th>
	    <th>Counter name</th>
	    <th>Usage</th>
	    <th>Level</th>
	    <th>50 &#8486;</th>
	  </tr>
	</thead>
	<tbody>
      {% set ch_trig_in_inv = config["external sync"]["input"].get("polarity inverted") %}
	  {% for ch in config["channels"] %}
	  {% set ch_id = ch["address"] %}
	  {% set in_out = ch_id in klass.INPUT_CHANNELS and ch_id in klass.OUTPUT_CHANNELS %}
      {% set ch_trig_in = ch_id == config["external sync"]["input"].get("channel") %}
      {% set ch_trig_out = ch_id == config["external sync"]["output"].get("channel") %}
	  <tr>
	    <td>{{ ch_id }}</td>
	    <td>
	      <input id="ch-{{ch_id}}-counter-name"
		     name="ch-{{ch_id}}-counter-name"
	             class="form-control input-sm" type="text"
	             value="{{ ch['counter name'] }}"
		    />
	    </td>
	    <td>

	      <select class="selectpicker" id="ch-{{ch_id}}-usage"
		          name="ch-{{ch_id}}-usage">
            <option value="0" selected>IN</option>
            <option value="1" {{ "selected" if ch_trig_in and not ch_trig_in_inv }}>IN Trig/Gate</option>
            <option value="2" {{ "selected" if ch_trig_in and ch_trig_in_inv }}>IN Trig/Gate Inv.</option>
            {% if in_out %}
		    <option value="3" {{ "selected" if ch_trig_out }}>OUT Gate</option>
		    {% endif %}
          </select>

	    </td>
	    <td>
	      <select class="selectpicker" id="ch-{{ch_id}}-level"
		      name="ch-{{ch_id}}-level">
		{% for level in card.Level %}
		<option {{ "selected" if ch["level"] == level.name }}>
		  {{ level.name }}
		</option>
		{% endfor %}
	      </select>
	    </td>
	    <td>
              <input id="ch-{{ch_id}}-50-ohm" name="ch-{{ch_id}}-50-ohm"
	             class="form-control input-sm" type="checkbox"
	             {{ "checked" if ch["50 ohm"] == True }} />
	    </td>
  	  </tr>
	  {% endfor %}
	</tbody>
      </table>
    </div>
  </fieldset>
</form>
</div>

<script type="text/javascript">

  function submit_form(form) {
    var formData = new FormData(form);
    formData.append("__original_name__", "{{ config['name'] }}");
    $.ajax({
      url: "plugin/ct2/device_edit",
      type: "POST",
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      success: function(result) {
        data = $.parseJSON(result);
        show_item(data.name);
        show_notification(data.message, data.type);
      }
    });
  }

  $(document).ready(function() {
    $(".selectpicker option").addClass("small");

    $(".selectpicker")
      .addClass("show-tick")
      .selectpicker({
        style: "btn-sm btn-default",
        selectedTextFormat: "count>6",
        width: "100%",
      });

    $("#apply").on("click", function() {
      submit_form($("#device_form")[0]);
      return false;
    });

    $("#revert").on("click", function() {
      show_item("{{ config['name'] }}");
      return false;
    });

    $("#reset").on("click", function() {
      // TODO
      return false;
    });

    $("select[name*=usage]").on("change", function(event) {
      var new_in_trig = event.target.value === "1" || event.target.value === "2"
      var any_in_trig = false;
      for(ch = 1; ch <= {{ klass.CHANNELS|length }}; ch++) {
        var id = "ch-" + ch + "-usage";
        var ch_widget = $("#" + id);
        var ch_in_trig = ch_widget.val() === "1" || ch_widget.val() === "2"
        any_in_trig |= ch_in_trig
        if (event.target.id !== id && new_in_trig && ch_in_trig) {
          ch_widget.selectpicker("val", "0");
        }
      }
      if (!any_in_trig) {
        $("#input-polarity").prop("checked", false);
      }
      $("#input-polarity").prop("disabled", !any_in_trig);
    });

    update_fields();
});

</script>
