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

{% block title %}
Sequencer
{% endblock title %}

{% set included = True %}

{% block head %}
<style>
  .logbar{
    height:75%;
    z-index: 9999;
  }
</style>
{% endblock head %}


{% 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" data-parameter="ob-list-options" class="form-select">
      <option  selected disabled hidden>
        -- Select a saved OB --
      </option>
      {% for ob in data | sort(attribute='name') %}
      <option data-index="{{loop.iterator}}" value="{{ob.name}}">
        {{ob.name}}
      </option>
        {% endfor %}
    </select>
  </div>

  <div class="col-auto">
    <button class="btn btn-primary" data-control="start-sequencer">Start</button>
    <button class="btn btn-secondary" data-control="pause-sequencer">Pause</button>
    <button class="btn btn-secondary" data-control="resume-sequencer">Resume</button>
    <button class="btn btn-primary" data-control="stop-sequencer">Stop</button>
  </div>

  <div>
    <label class="col-md-2 col col-form-label">
      Recenter
    </label>
    <div class="col-md col-1 input-group">
      <span class="input-group-text">
        <input class="form-check-input mt-0" type="checkbox"
               data-control="recenter" checked>
      </span>
      <input class="form-control"
             data-parameter="recenter-box"
             min="50" max="500"
             value="300" type="number">
      <span class="input-group-text">
        px
      </span>
    </div>
  </div>

</div>

<script>
</script>

{% endblock content %}
