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

{% set included = True %}

{% block content%}

  <section>
    {% for d in data %}
    <form id="f-{{d.id}}" class="form">
      <legend>{{d.id}}</legend>
      <div class="row">
        {% for k,v in d.items() %}
        <label class="col-1 col-form-label" for="{{k}}-{{d.id}}">{{k}}</label>
        <div class="col">
          <input class="form-control" id="{{k}}-{{d.id}}" value="{{v}}" name="{{k}}" {% if k=='id' %} disabled  {% endif %}>
        </div>
        {% endfor %}
        <button id="update-{{d.id}}" class="col-2 me-2 btn btn-primary" type="submit" >Update</button>
        <button id="delete-{{d.id}}" class="col-2 me-2 btn btn-danger">Delete</button>
      </div>
      <script>
        update({{d.id}})
        del({{d.id}})
      </script>
    </form>
    {% endfor %}

    <form id="f-create" class="form">
      <legend>Create</legend>
      <div class="row">
        <label class="col-1 col-form-label" for="k-create">task!!</label>
        <div class="col">
          <input class="form-control" id="k-create" placeholder="dummy" name="task">
        </div>
        <button id="create" class="col-2 me-2 btn btn-primary" type="submit" >Create</button>
      </div>
      <script>
        create("create")
      </script>
    </form>

  </section>

<script>
  

</script>  
{% endblock content %}
