{#
/**
 * @file
 * FlowDrop Detail Section Component
 *
 * A container for grouping related detail information with a title.
 * Optionally collapsible.
 *
 * Available variables:
 * - title: Section title
 * - icon: Optional SVG icon markup
 * - collapsed: Whether initially collapsed (default: false)
 * - collapsible: Whether section can be collapsed (default: false)
 *
 * Slots:
 * - content: The section content
 */
#}

{% set collapsed = collapsed is defined ? collapsed : false %}
{% set collapsible = collapsible is defined ? collapsible : false %}
{% set section_id = 'fd-detail-section-' ~ random() %}

<section class="fd-detail-section{% if collapsible %} fd-detail-section--collapsible{% endif %}">
  {% if title %}
    {% if collapsible %}
      <button 
        type="button" 
        class="fd-detail-section__header"
        aria-expanded="{{ collapsed ? 'false' : 'true' }}"
        aria-controls="{{ section_id }}"
        data-flowdrop-collapse-toggle
      >
        {% if icon %}
          <span class="fd-detail-section__icon" aria-hidden="true">{{ icon|raw }}</span>
        {% endif %}
        <h2 class="fd-detail-section__title">{{ title }}</h2>
        <svg class="fd-detail-section__chevron" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
          <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
        </svg>
      </button>
    {% else %}
      <div class="fd-detail-section__header fd-detail-section__header--static">
        {% if icon %}
          <span class="fd-detail-section__icon" aria-hidden="true">{{ icon|raw }}</span>
        {% endif %}
        <h2 class="fd-detail-section__title">{{ title }}</h2>
      </div>
    {% endif %}
  {% endif %}
  
  <div 
    {% if collapsible %}id="{{ section_id }}"{% endif %} 
    class="fd-detail-section__content{% if collapsible and collapsed %} fd-detail-section__content--collapsed{% endif %}"
  >
    {{ content }}
  </div>
</section>
