<!--
 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.
-->
{% block toolbar %}

<div class="row">
  <div class="btn-group" role="group" aria-label="global functionality">
    <button id="apply" class="btn btn-primary">
      <span class="fa fa-save"></span>
      Save
    </button>
    <button id="apply" class="btn btn-info"
      data-filename="{{filename}}"
      data-toggle="tooltip" title="view in yaml file">
      <span class="fa fa-eye"></span>
      Yaml
    </button>
  </div>
</div>

{% endblock %}

<div style="height:10px;"></div>

<form id="beamline_form" class="form-horizontal">
<fieldset>

{% block params %}

<div class="col-md-10">
{% for name, value in params.items() %}
<!-- Text input-->
<div class="form-group">
  <label class="col-md-2 control-label" for="{{ name }}">{{ name.capitalize() }}</label>
  <div class="col-md-4">
    <input id="{{ name }}" name="{{ name }}" type="text"
           class="form-control input-md"
           placeholder="{{ value }}" value="{{ value }}">
    </input>
  </div>
</div>
{% endfor %}
</div>

<div class="col-md-2">
  <img src="{{ logo }}" width="128"></img>
</div>

{% endblock %}

</fieldset>
</form>

<script type="text/javascript">

  function submit_form(form) {
    var formData = new FormData(form);

    $.ajax({
      url: "plugin/beamline/edit",
      type: "POST",
      cache: false,
      contentType: false,
      processData: false,
      data: formData,
      success: function(result) {
        data = $.parseJSON(result);
        show_main(data.name);
        write_message(data.message, data.type);
      }
    });
  }

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

    $(".selectpicker")
      .addClass("show-tick")
      .selectpicker({
        style: "btn-sm btn-primary",
        selectedTextFormat: "count>6",
        size: 10,
      });

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

    $("#revert").on("click", function() {
      show_main();
      return false;
    });
  });

</script>
