{% if not included %}
{% extends 'index.html' %}
{% 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>

{% include "ob_controls.html" %}

<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")                    
          })
  })
  
  delete_template_instance()

</script>

{% endblock content %}
