{# @description A titled section: heading with icon at a chosen level, an actions row, then body content. #}
{# @prop title:text | description:"Section heading text; the heading row is omitted entirely when neither this nor actions is given." #}
{# @prop icon:text | description:"Icon shown beside the heading." #}
{# @prop level:select['1','2','3','4'] | default:"2" | description:"Heading level, 1 to 4." #}
{# @prop actions:text | hidden | description:"Filled by the actions named slot; not passed as a plain attribute." #}
{# @slot Section body content. #}
{# @slot:actions <c-button ... /> — Content rendered at the end of the heading row. #}
<c-vars title icon level="2" actions />
<section {{ attrs }}>
  {% if title or actions %}
    <c-mvp.toolbar class="mb-3">
      {% if title %}
        {# djlint:off #}
        <h{{ level }} class="flex items-center gap-2 font-semibold {% if level == '1' %}text-3xl{% elif level == '2' %}text-2xl{% elif level == '3' %}text-xl{% else %}text-lg{% endif %}">
          {% if icon %}<c-icon name="{{ icon }}" />{% endif %}
          {{ title }}
        </h{{ level }}>
        {# djlint:on #}
      {% endif %}
      <c-slot name="actions">{{ actions }}</c-slot>
    </c-mvp.toolbar>
  {% endif %}
  {{ slot }}
</section>