{#
/**
 * @file
 * Theme override for a fieldset element and its children.
 *
 * Available variables:
 * - attributes: HTML attributes for the <fieldset> element.
 * - errors: (optional) Any errors for this <fieldset> element, may not be set.
 * - required: Boolean indicating whether the <fieldeset> element is required.
 * - legend: The <legend> element containing the following properties:
 *   - title: Title of the <fieldset>, intended for use as the text
       of the <legend>.
 *   - attributes: HTML attributes to apply to the <legend> element.
 * - description: The description element containing the following properties:
 *   - content: The description content of the <fieldset>.
 *   - attributes: HTML attributes to apply to the description container.
 * - children: The rendered child elements of the <fieldset>.
 * - prefix: The content to add before the <fieldset> children.
 * - suffix: The content to add after the <fieldset> children.
 *
 * @see template_preprocess_fieldset()
 */
#}
{%
  set classes = [
    'js-form-item',
    'form-item',
    'js-form-wrapper',
    'form-wrapper',
    'accordion',
    'accordion-flush',
    'my-2'
  ]
%}

<div{{ attributes.addClass(classes) }}>
  <fieldset class="accordion-item">
    {%
      set legend_span_classes = [
      'fieldset-legend',
      required ? 'js-form-required',
      required ? 'form-required',
      'accordion-button',
      'border-bottom'
    ]
    %}
    {#  Always wrap fieldset legends in a <span> for CSS positioning. #}
    <legend{{ legend.attributes.addClass('accordion-header') }}>
      <span{{ legend_span.attributes.addClass(legend_span_classes) }} type="button" data-bs-toggle="collapse" data-bs-target="#{{ attributes.id ~ '-item' }}" aria-expanded="true" aria-controls="{{ attributes.id }}">{{ legend.title }}</span>
    </legend>
    <div class="collapse show" id="{{ attributes.id ~ '-item' }}">
      <div class="accordion-body fieldset-wrapper">
        {% if errors %}
          <div>
            {{ errors }}
          </div>
        {% endif %}
        {% if prefix %}
          <span class="field-prefix">{{ prefix }}</span>
        {% endif %}
        {{ children }}
        {% if suffix %}
          <span class="field-suffix">{{ suffix }}</span>
        {% endif %}
        {% if description.content %}
          <div{{ description.attributes.addClass('description') }}>{{ description.content }}</div>
        {% endif %}
      </div>
    </div>
  </fieldset>
</div>

