{# Section-title with a collapsible description.

   Pattern: every chart / table / panel in the audit has a heading
   ("Top Cost Drivers...") and a verbose explanatory paragraph
   underneath ("Logical jobs with at least one detection finding...").
   The descriptions are useful the first time you land on the page
   and noise after that, so we now hide them by default and surface
   a little info-chevron next to the title that toggles the help
   text.

   Native ``<details>`` so it works without JS. The chevron rotates
   on open; the description is rendered as ``ui-card-meta`` inside
   the details body, matching the previous always-visible look when
   expanded.

   Parameters:
     - title         (str) section heading (rendered in an <h2>)
     - description   (str, optional) help text revealed on click
     - open          (bool) start expanded (default False)
     - aside         (str, optional) right-side content next to the
                     title - eg. "211 flagged of 7,235 scanned". Same
                     ``ui-card-meta`` styling as the description.

   Call style: pass markup via ``{% call %}`` for richer asides.

   Example (rendered, not a literal call):
       section_title("Top 20 Spenders",
                     description="The 20 highest-cost logical jobs in...",
                     aside="last scanned 5m ago")
#}
{%- macro section_title(title, description=None, open=False, aside=None) -%}
  <details class="audit-section-help group"{% if open %} open{% endif %}>
    <summary class="flex flex-wrap items-center justify-between gap-3 cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
      <div class="flex items-center gap-2">
        <h2 class="ui-section-title mt-0 mb-0">{{ title }}</h2>
        {%- if description %}
        <svg class="w-3.5 h-3.5 text-slate-400 dark:text-slate-500 transition-transform group-open:rotate-180 shrink-0" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true" title="Toggle description">
          <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
        {%- endif %}
      </div>
      {%- if aside %}
      <p class="ui-card-meta mt-0">{{ aside | safe }}</p>
      {%- endif %}
      {%- if caller is defined %}
      <div class="flex items-center gap-2">{{ caller() }}</div>
      {%- endif %}
    </summary>
    {%- if description %}
    <p class="ui-card-meta mt-2">{{ description | safe }}</p>
    {%- endif %}
  </details>
{%- endmacro %}