{% load sekizai_tags cms_tags %}

<div id="accordion-{{ instance.id }}" class="u-accordion u-accordion-bg-primary u-accordion-color-white" role="tablist" aria-multiselectable="true">
  {% for collapsible in instance.child_plugin_instances %}
  <div class="card g-brd-none rounded-0 g-mb-15">
    <div id="accordion-{{ instance.id }}-heading-{{ collapsible.id }}" class="u-accordion__header g-pa-0" role="tab">
      <h5 class="mb-0">
        <a class="d-block g-color-main g-text-underline--none--hover g-brd-around g-brd-gray-light-v4 g-rounded-5 g-pa-10-15" href="#accordion-{{ instance.id }}-body-{{ collapsible.id }}" data-toggle="collapse" data-parent="#accordion-{{ instance.id }}" aria-expanded="{% if forloop.first and instance.show_first %}true{% else %}false{% endif %}" aria-controls="accordion-{{ instance.id }}-body-{{ collapsible.id }}">
          <span class="u-accordion__control-icon g-mr-10">
            <i class="fa fa-angle-down"></i>
            <i class="fa fa-angle-up"></i>
          </span>
          {{ collapsible.title }}
        </a>
      </h5>
    </div>
    <div id="accordion-{{ instance.id }}-body-{{ collapsible.id }}" class="collapse {% if forloop.first and instance.show_first %} show {% endif %}" role="tabpanel" aria-labelledby="accordion-{{ instance.id }}-heading-{{ collapsible.id }}">
      <div class="u-accordion__body g-color-gray-dark-v5">
        {% render_plugin collapsible %}
      </div>
    </div>
  </div>
  {% endfor %}
</div>