{%
  set classes = [
    'paragraph',
    'paragraph--type--' ~ paragraph.bundle|clean_class,
    view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    not paragraph.isPublished() ? 'paragraph--unpublished'
  ]
%}

{# ID único para el acordeón principal #}
{% set accordion_id = 'accordion-' ~ paragraph.id() %}

<div{{ attributes.addClass(classes) }}>
  <div class="accordion-content">
    <div class="accordion" id="{{ accordion_id }}">

      {% for key, item in paragraph.field_items %}
        {% set sub_paragraph = item.entity %}
        {% if sub_paragraph %}
          {% set heading_id = 'flush-heading-' ~ sub_paragraph.id() %}
          {% set collapse_id = 'flush-collapse-' ~ sub_paragraph.id() %}

          <div class="accordion-item">
            <h2 class="accordion-header" id="{{ heading_id }}">
              <button class="accordion-button collapsed" type="button"
                      data-bs-toggle="collapse"
                      data-bs-target="#{{ collapse_id }}"
                      aria-expanded="false"
                      aria-controls="{{ collapse_id }}">
                {{ sub_paragraph.field_title.value }}
              </button>
            </h2>
            <div id="{{ collapse_id }}"
                class="accordion-collapse collapse"
                aria-labelledby="{{ heading_id }}"
                data-bs-parent="#{{ accordion_id }}">
              <div class="accordion-body">
                {{ sub_paragraph.field_text.value|raw }}
              </div>
            </div>
          </div>
        {% endif %}
      {% endfor %}

    </div>
  </div>
</div>

{% include 'starman:accordion' with { id: id, items: items } %}
