{% load wagtailcore_tags %}

{% block content %}
<section class="container faq-block">
    <div class="row">
        <div class="col-12 col-lg-8 offset-lg-2">
            <div class="faq-block-header text-center my-5">
                {% if self.header %}
                    <h1>{% include_block self.header %}</h1>
                {% endif %}
                {% if self.text %}
                    <p class="mt-4">
                        {{ self.text }}
                    </p>
                {% endif %}
            </div>
        </div>
        <div class="col-lg-12 sectioned-faq">
			<div class="row">
				<div class="col-lg-4">
					<div class="nav flex-column nav-pills me-3 faq-left" aria-orientation="vertical">
					{% for item in self.items %}
						<button class="nav-link {% if forloop.first %}active{% endif %}" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#{{ item.label|slugify }}" type="button">{{ item.label }}</button>
	                {% endfor %}
					</div>
				</div>
				<div class="col-lg-8">
					<div class="tab-content faq-right">
					{% for item in self.items %}
						<div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="{{ item.label|slugify }}">
							<div class="faq-block-items accordion" id="{{ item.label|slugify }}_acc">
							{% for block in item.items %}
								<div class="accordion-item">
									<h2 class="accordion-header" id="headingOne">
										<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#question-{{ block.question|slugify }}">
											<i class="fa fa-chevron-down"></i> {{ block.question }}
										</button>
									</h2>
									<div id="question-{{ block.question|slugify }}" class="accordion-collapse collapse" data-bs-parent="#{{ item.label|slugify }}_acc">
										<div class="accordion-body">
											{{ block.answer|richtext }}
										</div>
									</div>
								</div>
							{% endfor %}
							</div>
						</div>
					{% endfor %}
					</div>
				</div>
			</div>
        </div>
        <div class="col-12 col-lg-8 offset-lg-2">
            <div class="faq-block-footer text-center my-5">
                <h2>{{ self.footer_heading }}</h2>
                {% if self.footer_text %}
                    <p class="mt-3">
                        {{ self.footer_text }}
                    </p>
                {% endif %}
                {% if self.footer_button %}
                    {% include_block self.footer_button %}
                {% endif %}
            </div>
        </div>
    </div>
</section>
{% endblock %}