{% if not included %}

{% extends 'index.html' %}

{% block title %}
OB editor
{% endblock title %}

{% endif %}

{% set included = True %}

{% block content %}

<form data-name="{{data.name}}">
  
  <h4>{{data.name}}</h4>
  
  {% for d in data.content %}
  <fieldset data-template="{{d.template}}",
            data-instance="{{loop.index}}">
    
    <legend>
      {% if not hide_template_controls %}      
      <small class="text-muted">{{loop.index}}</small>
      {% endif %}
      {{d.template}}
    </legend>
    
    {% for k,v in d.params.items() %}
    <div class="row mb-2">
      <label class="col-2 col-form-label" for="{{d.template}}-{{k}}">{{k}}</label>
      <div class="col">
        <input class="form-control col"
               id="{{d.template}}-{{k}}"
               name="{{k}}"
               data-{{k}}="{{v}}"
               value="{{v}}"
               {% if v is number %}
               type="number"
               {% elif v is boolean %}
               type="checkbox"
               {% else %}
               type="text"
               {% endif %}
               >
      </div>
    </div>
    {% endfor %}
    
    <button class="col mb-2 btn btn-secondary" type="button"
            data-button="delete-template-instance"
            data-name="{{data.name}}"
            data-instance="{{loop.index}}">Delete Template instance</button>
        
  </fieldset>

  {% endfor %}
  
</form>

<div class="row">
  
  <label for="tpl-list-options" class="col-2 col-form-label">Add template</label>
  <div class="col">
    <select id="tpl-list-options" class="form-select">
      <option  selected disabled hidden>
        -- Select a template --
      </option>
      {% for ob in tpl %}
      <option data-index="{{loop.iterator}}" value="{{ob.name}}">
        {{ob.name}}
      </option>
      {% endfor %}
    </select>
    
  </div>
    
    <div class="col-auto">
      <button class="btn btn-secondary" type="submit"
              id="update-ob">Update this OB!</button>      
    </div>
    
    <div class="col-auto">
      <button class="me-2 btn btn-secondary" type="submit"
              id="delete-ob">Delete this OB!</button>  
    </div>
  
</div>
  
<script>    

  $("#tpl-list-options").change(function(e){
      var name = $("form").data("name") //{{data.name}} 
      var val = $(this).val()
      console.log(name)
      $.ajax({
          url: "/api/blocks/"+name,
          type: 'POST',
          data: JSON.stringify(val),
          contentType: "application/json",
      })
          .done(function(){
              console.log("ok")
              $("input", this).css("border","1px solid green")
              location.reload()
          })
          .fail(function(){
              console.log("not ok")                    
              $("input").css("border","1px solid yellow")
          })
          .always(function(){
              console.log("Finished")                    
          })
  })
  
  update_ob()
  delete_ob()
  delete_template_instance()

</script>

{% endblock content %}

{% block footer %}
{% endblock footer %}

{% block stream %}
{% endblock stream %}