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

<div class="accordion">
	{% for block in self %}
	<div class="d-flex flex-row align-items-flex-start {% if not forloop.last %}mb-3{% endif %}">
		<div class="me-2 position-relative">
			<h4 class="mb-0 text-primary"><i class="fa fa-plus-circle small"></i></h4>
			<a href="#" class="stretched-link" data-bs-toggle="collapse" data-bs-target="#accordion_{{ uuid }}_{{ forloop.counter }}" aria-expanded="true" aria-controls="accordion_{{ uuid }}_{{ forloop.counter }}"></a>
		</div>
		<div>
			<div class="accordion-header position-relative">
				<h4 class="mb-0">{{ block.header }}</h4>
				<a href="#" class="stretched-link" data-bs-toggle="collapse" data-bs-target="#accordion_{{ uuid }}_{{ forloop.counter }}" aria-expanded="true" aria-controls="accordion_{{ uuid }}_{{ forloop.counter }}"></a>
			</div>
			<div id="accordion_{{ uuid }}_{{ forloop.counter }}" class="accordion-collapse collapse" aria-labelledby="{{ block.header }}">
				<div class="accordion-body ps-0">
		            {{ block.panel_content|richtext }}
				</div>
			</div>
		</div>
	</div>
	{% endfor %}
</div>