<div class="basepack-accordion-wrapper castorcito-basepack--item" data-accordion={{ display_settings.display_options.items_initial_state }}>
  <div class="castorcito-basepack--inner">
    {% if component_data.fields.title.value is not empty %}
      <div class="basepack-accordion--title-container">
        <h3 class="basepack-accordion--title">{{ component_data.fields.title.value }}</h3>
      </div>
    {% endif %}
    {% if component_data.fields.subtitle.value is not empty %}
      <h4 class="basepack-accordion--subtitle">{{ component_data.fields.subtitle.value }}</h4>
    {% endif %}
    {% if component_data.fields.description.value is not empty  %}
      <div class="basepack-accordion--description">
        {% embed "castorcito:castorcito_formatted_text" with {
          cfield_data: component_data.fields.description
        } %}
        {% endembed %}
      </div>
    {% endif %}
    <div class="basepack-accordion-items ">
    {% for item in component_data.fields.accordion_item.items %}
      <div class="basepack-accordion-item ">
        <div class="basepack-accordion-item--title-container is-active">
          <h5 class="basepack-accordion-item--title">{{ item.head.fields.label.value }}</h5>
          <span class="basepack-accordion-item---toggle"></span>
        </div>
        <div class="basepack-accordion-item--content" style="display: none;">
          {% set sdc_id = display_settings.cfields.accordion_item.body[item.body.type].sdc.id %}

          {% embed sdc_id with {
            component_data: item.body,
            display_settings: display_settings.cfields.accordion_item.body[item.body.type]
          } %}
          {% endembed %}
        </div>
      </div>
    {% endfor %}
    </div>
  </div>
</div>
