{% from "globals.jinja2" import button %}
{% from "pydantic_form/widget.jinja2" import show_widget %}
{% call show_widget(widget) %}
<div id="{{widget.id}}">
  <details 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 hx-sync="this" id="{{widget.id}}-child">
      {% if child %}
      {{ child }}
      {% else %}
      {% for typ in types %}
      {{
      button(
      typ.title,
      type="button",
      target="closest div",
      get=typ.url,
      vals=typ.params|tojson,
      onclick="document.getElementById('"+ widget.id +"-remove-btn').hidden = false",
      )
      }}
      {% endfor %}
      {% endif %}
    </div>
    {{
    button(
    "remove",
    type="button",
    id=widget.id + "-remove-btn",
    target="#" + widget.id,
    vals=parent_type.params|tojson,
    get=parent_type.url,
    hidden=not child,
    )
    }}
  </details>
</div>
{% endcall %}
