{#
  Accordion

  Template for an expandable/collapsable section.

  * Available variables:
  * - attributes: For additional HTML attributes not already provided.
  * - modifier_class: Additional CSS classes to change look and behavior.
  * - accordion_title: Optional title for the whole accordion component.
  * - cta_button: Optional call-to-action link button at the bototm of the accordion.
  * - title:
  * - content:
#}
<div {{ attributes }} class="su-accordion no-js {{ modifier_class }}">
  {% if accordion_title is not empty %}
    {{ accordion_title }}
  {% endif %}
  {% if accordion_control %}
    <button class="su-accordion__collapse-all su-button--secondary">Collapse all -</button>
    <button class="su-accordion__expand-all su-button--secondary">Expand all +</button>
  {% endif %}
  {% if accordion_items is iterable %}
    <ul class="su-accordion__list">
      {% for item in accordion_items %}
        <li class="su-accordion__item">
          {% if item.title is not empty %}
            <h2 class="su-accordion__title"><button class="su-accordion__button">{{ item.title }}</button></h2>
          {% endif %}
          <div class="su-accordion__content">
            {{ item.content }}
          </div>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
  {% if cta_button_text is not empty %}
    <a href="{{ cta_button_link }}" class="su-accordion__cta su-button {{ cta_button_modifier_class }}" {{ cta_button_attributes }}>{{ cta_button_text }}</a>
  {% endif %}
</div>