{% from "globals.jinja2" import button %}
{% from "pydantic_form/widget.jinja2" import show_widget %}
{% call show_widget(widget) %}
<details id="{{widget.id}}" open>
  <summary class="justify-between items-center font-medium cursor-pointer">
    <h4 class="inline font-sans text-3xl font-bold">{{widget.title}}</h4>
  </summary>
  <div>
    <script>
      function getName() {
        const el = document.getElementById("{{widget.id}}-content");
        const len = el.dataset.length;
        el.dataset.length = parseInt(len) + 1;
        return "{{type.name}}." + len;
      }
    </script>

    <div id="{{widget.id}}-content" class="m-4" data-length="{{children_widgets|length|string}}">
      {% for child in children_widgets %}
      {% set container_id = widget.id + "-container" %}
      <div id="{{container_id}}">
        {{ child }}
      </div>
      {% endfor%}
    </div>
    <div>
      {{
      button(
      "Add",
      type="button",
      target="#" + widget.id + "-content",
      swap="beforeend",
      id=widget.id + "-add",
      vals='js:{"name": getName(), "token": "' + type.token + '", "removable": true}',
      get=type.url,
      )
      }}
    </div>
  </div>
</details>
{% endcall %}
