{# doc

  Produce a ``<details>`` html node in order to create a collapsible box.

  .. code-block:: html

    <Details>
      <Summary :id="my-summary">
        <H3 :class="H3_SUMMARY_CLASS">A title</H3>
      </Summary>
      <div>
        Some content
      </div>
    </Details>

#}
{# def
  id: Annotated[str | None, "unique identifier of the element."] = None,
  class_: Annotated[
    str | None,
    "css class for the node, defaults to "
    ":attr:`fastlife.template_globals.Globals.DETAILS_CLASS`."
  ] = None,
  open: Annotated[bool, "open/close state."] = True,
#}
<details
  {%- if id %} id="{{id}}" {% endif %}
  class="{{attrs.class or DETAILS_CLASS}}"
  {%- if open %} open {%- endif -%}
>
  {{- content -}}
</details>
