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

{% set included = True %}

{% block title %}<title>OB generator</title>{% endblock title %}

{% block content %}

<h3>Ob list</h3>

<div class="row mb-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['@OBID']}}">
        {{ob['@OBID']}}
      </option>
        {% endfor %}
    </select>
  </div>

  
  <span class="col-auto form-text mt-2">or</span>
  <label for="new-ob-name" class="col-2 col-form-label">Create new</label>
  <div class="col input-group mb-3">
    <input class="form-control" id="new-ob-name" placeholder="insert name" minlength="3" >
    <button class="btn btn-outline-secondary" type="button"
            id="create-ob">Create</button>
  </div>
  
</div>

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


<script>
  $("#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")

  create_ob()



  
</script>

{% endblock content %}
