{#
/**
 * @file
 * Template for a Bootstrap 5 Accordion Item.
 *
 * Available variables:
 * - title: The label for the accordion toggle button.
 * - heading_level: (optional) The HTML heading tag level (2-6). Defaults to 3.
 * - open_by_default: (boolean) Whether the item should be expanded on load.
 * - item_id: A unique ID for this accordion item. Required for accessibility.
 * - accordion_id: (optional) The ID of the parent accordion container to
 *   enable "single-open" behavior.
 * - custom_class: (optional) Additional CSS classes for the accordion item.
 *
 * Available slots:
 * - accordion_body: The content area shown when the item is expanded.
 *
 * @ingroup themeable
 */
#}

{# Initialize default values. item_id must be passed in for deterministic, SSR-safe IDs. #}
{% set heading_level = heading_level|default(3) %}
{% set item_id = item_id|default('accordion-item-' ~ title|clean_class) %}
{% set heading_id = 'heading-' ~ item_id %}
{% set expanded = open_by_default ? 'true' : 'false' %}

<div class="{{ ['accordion-item', custom_class|default('')]|filter(v => v)|join(' ') }}">
  <h{{ heading_level }} class="accordion-header" id="{{ heading_id }}">
    <button
      class="accordion-button {% if not open_by_default %}collapsed{% endif %}"
      type="button"
      data-bs-toggle="collapse"
      data-bs-target="#{{ item_id }}"
      aria-expanded="{{ expanded }}"
      aria-controls="{{ item_id }}"
    >
      {{ title }}
    </button>
  </h{{ heading_level }}>

  <div
    id="{{ item_id }}"
    class="accordion-collapse collapse {% if open_by_default %}show{% endif %}"
    aria-labelledby="{{ heading_id }}"
    {# Only attach data-bs-parent if a valid parent ID is provided. #}
    {% if accordion_id is defined and accordion_id|trim %}
      data-bs-parent="#{{ accordion_id }}"
    {% endif %}
  >
    <div class="accordion-body">
      {% block accordion_body %}
        {# Content injected via block for flexibility in nested templates. #}
      {% endblock %}
    </div>
  </div>
</div>