{#
/**
 * @file
 * Theme override for a details element.
 *
 * Available variables
 * - attributes: A list of HTML attributes for the details element.
 * - errors: (optional) Any errors for this details element, may not be set.
 * - title: (optional) The title of the element, may not be set.
 * - summary_attributes: A list of HTML attributes for the summary element.
 * - description: (optional) The description of the element, may not be set.
 * - children: (optional) The children of the element, may not be set.
 * - value: (optional) The value of the element, may not be set.
 *
 * @see template_preprocess_details()
 */
#}
{% set collapseId = attributes.id ~ '-collapse' %}
{% set headingId = attributes.id ~ '-heading' %}
<div{{ attributes.addClass('accordion') }}>
  <div class="accordion-item">
    {%- if title -%}
      {% set summary_classes = [
        'accordion-button',
        not attributes.open ? 'collapsed',
        required ? 'js-form-required',
        required ? 'form-required',
      ] %}
      <h2 class="accordion-header" id="{{ headingId }}">
        <button {{ summary_attributes.addClass(summary_classes) }} type="button" data-bs-toggle="collapse" data-bs-target="#{{ collapseId }}"
                aria-controls="{{ collapseId }}">{{ title }}</button>
      </h2>
    {%- endif -%}
    <div id="{{ collapseId }}" class="accordion-collapse collapse {{ attributes.open ? 'show' }}" aria-labelledby="{{ headingId }}">
      <div class="accordion-body">
        {% if errors %}
          <div class="alert alert-danger" role="alert">
            <strong>{{ errors }}</strong>
          </div>
        {% endif %}
        {%- if description -%}
          <div class="alert alert-info">{{ description }}</div>
        {%- endif -%}
        {%- if children -%}
          {{ children }}
        {%- endif -%}
        {%- if value -%}
          {{ value }}
        {%- endif -%}
      </div>
    </div>
  </div>
</div>
