{% if not included %}
{% extends 'index.html' %}
{% endif %}

{% set included = True %}

{% block content %}

<h3>Ob sequencer</h3>
<div class="row mt-2">
  <label for="ob-list-options" class="col-2 col-form-label">Load OB</label>
  <div class="col">
    <select id="ob-list-options" class="form-select">
      <option  selected disabled hidden>
        -- Select a saved OB --
      </option>
      {% for ob in data %}
      <option data-index="{{loop.iterator}}" value="{{ob.name}}">
        {{ob.name}}
      </option>
        {% endfor %}
    </select>
  </div>

  <div class="col-auto">
    <button class="btn btn-primary" id="start-sequencer">Start</button>
    <button class="btn btn-secondary" id="stop-sequencer">Stop</button>
  </div>

</div>

<section id="ob-list">
</section>

<script>

  $("#start-sequencer").on("click", function(e){
      console.log("click")
      var val = $("#ob-list-options").val()
      console.log(val)
      $.ajax({
          url: "/api/sequencer/run",
          type: 'POST',
          data: JSON.stringify(val),
          contentType: "application/json",
      })
          .done(function(e){
              console.log(e)
              console.log("Ok!")

          })
          .fail(function(e){
              console.log("not ok")
              //$("#f-"+x+" input").css("border","1px solid yellow")
          })
          .always(function(){
              console.log("Finished")
          })

  });

  // $("#ob-list-options").on("change", function(e){
  //     var val = $(this).val()
  //     console.log(val)
  //     if (val!=null){
  //         $.get(val,
  //               {included : true},
  //               function(data){
  //                   //console.log(data)
  //                   $("#ob-list").html(data)
  //               })
  //     }
  // }).trigger("change")


</script>

{% endblock content %}

{% block footer %}
  <footer class="h-100 mb-3 mx-0 overflow-hidden">
    <figure class="card h-100 border rounded bg-white">
      <figcaption class="card-header"> Sequencer log </figcaption>
      <div class="card-body p-0 m-0 overflow-hidden">
        <pre class="ms-3 me-3 list-group h-100 list-group-flush rounded-0">
          <code class="h-100 scrollable overflow-auto"
                id="stream-output"
                style="display:flex; flex-direction:column-reverse;">
            
          </code>
        </pre>
      </div>
    </figure>
  </footer>
{% endblock footer %}
