{% load styling_tags %}
{% load wagtailcore_tags %}

{% with uuid=self.block.get_uuid %}
<div class="accordion {% get_styling_classes self.styling %}" id="accordionExample" {% get_styling self.styling %}>
    <div class="accordion-item">
        <span class="h2 accordion-header collapsed" id="headingOne">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#accordion_{{ uuid }}" aria-expanded="true" aria-controls="collapseOne">
                {% if self.header %}
                {{ self.header }}
                {% endif %}
            </button>
        </span>
        <div id="accordion_{{ uuid }}" class="accordion-collapse collapsed collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
            <div class="accordion-body">
                {{ self.panel_content|convert_to_html }}

                {% if self.footer %}
                <div class="accordion-footer mt-3">{{ self.footer }}</div>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endwith %}