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

{% set included = True %}

{% block content %}

<form data-name="{{data['@OBID']}}">

  <h4>{{data['@OBID']}}</h4>

  {% for template in data.Template %}
  <section data-template="{{template.TPLID}}">
    <h4>
      <small class="text-muted">{{loop.index}}</small>
      {{template.TPLID}}
    </h4>
    
    {{doc}}
    
  {% for subsystem in template | sort%}

    {% if (not subsystem=="TPLID") and (not subsystem=="TPLName") %}

    <fieldset data-subsystem="{{subsystem}}",
              data-instance="{{loop.index}}">

    <legend>
      {{subsystem}}
    </legend>

    {% for param in template[subsystem] %}
    <div class="row mb-2">
      <label class="col-2 col-form-label" for="{{template.TPLID}}-{{param.name}}">{{param.name}}</label>
      <div class="col">

      <div class="input-group">

        {% if not param.options %}

        <input type="text"
               class="form-control"
               id="{{param.name}}"
               name="{{param.name}}"
               value="{{param.value}}"
               placeholder="dummy"
               {% if param.type == 'ref' %}
               disabled
               {% endif %}
               >

        {% else %}

        <select id="{{param.name}}" name="{{param.name}}" class="form-control"
               {% if param.type == 'ref' %}
               disabled
               {% endif %}
                >

               {% if param.type == 'ref' %}
               <option value="{{param.value}}">
                 {{param.value}}
               </option>
               {% else %}
               
               {% for o in param.options %}
               <option value="{{o}}" {% if o == param.value %} selected {% endif %}>
                 {{o}}
               </option>
               {% endfor %}
               
               {% endif %}

          
        </select>

        {% endif %}

        <button type="button" class="btn btn-outline-secondary"
                data-bs-container="body"
                data-bs-toggle="popover"
                data-bs-placement="right"
                data-bs-content="{{param.help}}">
          ?
        </button>

      </div>
    </div>


    </div>
    {% endfor %}

    {% endif %}

  </fieldset>
  {% endfor %}

    <button class="col mb-2 btn btn-secondary" type="button"
            data-button="delete-template-instance"
            data-name="{{data['@OBID']}}"
            data-instance="{{loop.index}}">Delete Template instance</button>

</section>

  {% endfor %}

</form>
{% set included = False %}
{% include "ob_controls.html" %}


<script src="/static/popover.js"></script>

<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 %}
