{% extends 'cjkcms/blocks/base_block.html' %}

{% load wagtailcore_tags cjkcms_tags %}

{% block block_render %}

{% with a_id=self.accordion.id accordion=self.accordion %}
<div class="accordion" id="accordion-{{a_id}}">
  {% for panel in accordion.accordion_panels.all %}
    <div class="accordion-item">
      <div class="accordion-header" id="accordion-heading-{{forloop.counter}}">
        <h2 class="mb-0">
          <button 
            class="accordion-button {% if not forloop.first %}collapsed{% endif %}" 
            type="button" 
            data-bs-toggle="collapse" 
            data-mdb-toggle="collapse" 
            data-bs-target="#collapse-{{a_id}}-{{forloop.counter}}" 
            data-mdb-target="#collapse-{{a_id}}-{{forloop.counter}}" 
            aria-expanded="{% if forloop.first %}true{% else %}false{% endif %}" aria-controls="collapse-{{a_id}}-{{forloop.counter}}">
            {{panel.name}}
          </button>
        </h2>
      </div>
      <div id="collapse-{{a_id}}-{{forloop.counter}}" 
           class="accordion-collapse collapse {% if forloop.first %}show{% endif %}" 
           aria-labelledby="accordion-heading-{{forloop.counter}}" 
           data-bs-parent="#accordion-{{a_id}}"
           data-mdb-parent="#accordion-{{a_id}}">
        <div class="card-body">
          {% include_block panel.content %}
        </div>
      </div>
    </div>
  {% endfor %}
</div>
{% endwith %}
{% endblock %}