{% include 'overall_header.html' %}

<section class="iz-faq" aria-labelledby="iz-faq-title">
	<header class="iz-faq__header">
		<h2 class="iz-faq__title" id="iz-faq-title">{{ L_FAQ_TITLE }}</h2>
	</header>

	{% for faq_block in faq_block %}
	<section class="iz-faq__block" aria-labelledby="iz-faq-block-{{ faq_block.S_ROW_COUNT }}">
		<h3 class="iz-faq__blocktitle" id="iz-faq-block-{{ faq_block.S_ROW_COUNT }}">
			{{ faq_block.BLOCK_TITLE }}
		</h3>

		<div class="iz-faq__items">
			{% for faq_row in faq_row %}
			<details class="iz-faq__item">
				<summary class="iz-faq__question">
					{{ faq_block.faq_row.FAQ_QUESTION }}
				</summary>
				<div class="iz-faq__answer">
					{{ faq_block.faq_row.FAQ_ANSWER }}
				</div>
			</details>
			{% endfor %}
		</div>
	</section>
	{% endfor %}

	<div class="iz-faq__footer">
		<div class="iz-jumpbox">
			<label class="iz-label" for="jumpbox">{{ L_JUMP_TO }}{{ L_COLON }}</label>
			<select class="iz-select" id="jumpbox" name="f" onchange="if (this.value) window.location.href=this.options[this.selectedIndex].value;">
				{% include 'jumpbox_options.html' %}
			</select>
		</div>

		{% include 'jump_links.html' %}
	</div>
</section>

{% include 'overall_footer.html' %}