{#
/**
 * @file
 * CivicTheme Accordion component.
 *
 * Props:
 * - theme: [string] Theme variation (light or dark).
 * - expand_all: [boolean] Whether to expand all panels by default.
 * - with_background: [boolean] Whether to display with a background.
 * - vertical_spacing: [string] Vertical spacing position (top, bottom, both).
 * - attributes: [string] Additional HTML attributes.
 * - modifier_class: [string] Additional CSS classes.
 * - panels: [array] Accordion panels:
 *   Each item contains:
 *   - title: [string] Panel title.
 *   - content: [string] Panel content.
 *   - expanded: [boolean] Whether the panel is expanded by default.
 *
 * Slots:
 * - content_top: Accordion top content.
 * - content_bottom: Accordion bottom content.
 *
 * Blocks:
 * - content_top_block
 * - content_block
 * - content_bottom_block
 */
#}

{% set with_background_class = with_background ? 'ct-accordion--with-background' : '' %}
{% set vertical_spacing_class = vertical_spacing in ['top', 'bottom', 'both'] ? 'ct-vertical-spacing-inset--%s'|format(vertical_spacing) : '' %}
{% set theme_class = 'ct-theme-%s'|format(theme|default('light')) %}
{% set modifier_class = '%s %s %s %s'|format(theme_class, vertical_spacing_class, with_background_class, modifier_class|default('')) %}

{% if panels is not empty %}
  <div class="ct-accordion {{ modifier_class -}}" {% if attributes is not empty %}{{- attributes|raw -}}{% endif %}>
    <div class="container">
      <div class="row">
        <div class="col-xxs-12">
          {% block content_top_block %}
            {% if content_top is not empty %}
              <div class="ct-accordion__content-top">
                {{- content_top|raw -}}
              </div>
            {% endif %}
          {% endblock %}

          {% block content_block %}
            <div class="ct-accordion__content">
              <ul class="ct-accordion__panels">
                {% for panel in panels %}
                  {% if panel.title is not empty and panel.content is not empty %}
                    {% set is_expanded = panel.expanded == true or expand_all == true %}
                    <li class="ct-accordion__panels__panel" data-collapsible {% if not is_expanded %}data-collapsible-collapsed{% endif %} data-collapsible-duration="250" data-collapsible-trigger-wide>
                      <div class="ct-accordion__panels__panel__header">
                        <button class="ct-accordion__panels__panel__header__button" data-collapsible-trigger aria-expanded="{% if is_expanded %}true{% else %}false{% endif %}">
                          {{ panel.title }}
                        </button>
                      </div>

                      <div class="ct-accordion__panels__panel__content" data-collapsible-panel aria-hidden="{% if is_expanded %}false{% else %}true{% endif %}">
                        {% include 'civictheme:paragraph' with {
                          theme: theme,
                          content: panel.content,
                          allow_html: true,
                          modifier_class: 'ct-accordion__panels__panel__content__inner',
                        } only %}
                      </div>
                    </li>
                  {% endif %}
                {% endfor %}
              </ul>
            </div>
          {% endblock %}

          {% block content_bottom_block %}
            {% if content_bottom is not empty %}
              <div class="ct-accordion__content-bottom">
                {{- content_bottom|raw -}}
              </div>
            {% endif %}
          {% endblock %}
        </div>
      </div>
    </div>
  </div>
{% endif %}
