{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/components/collapse/collapse-macros.njk" as collapse %}

{# ========================================================================== #}
{# :: Default #}
{# ========================================================================== #}
{% macro default(classes, data) %}

	<section class="c-faq l-section js-faq {{classes}}">
		<div class="c-faq__container l-container">
			<h2 class="c-faq__title">De meest gestelde vragen aan Lot</h2>

			<div class="c-faq__grid l-grid l-grid--with-spacing">
				<ul class="c-faq__list l-grid__col l-grid__col--4@tablet">

					{% for topic in data.topics %}

							<li class="c-faq__item {{'is-active' if loop.index == 1}}">
								<button class="c-faq__button">
									<div class="c-faq__item-header">
										<h4 class="c-faq__item-title">{{topic.title}}</h4>
										<div class="c-faq__icon-wrapper u-hide@tablet">
											<span class="fas fa-chevron-right c-faq__icon"></span>
										</div>
									</div>

									<p class="c-faq__item-text">{{topic.text}}</p>
								</button>
							</li>

					{% endfor %}

				</ul>

				<div class="c-faq__content l-grid__col l-grid__col--8@tablet">

					<button class="c-faq__content-button u-hide@tablet">
						<div class="c-faq__icon-wrapper">
							<span class="fas fa-chevron-left c-faq__icon"></span>
						</div>
						<span class="c-faq__content-button-text">Terug naar het overzicht</span>
					</button>

					{% for topic in data.topics %}

						<ul class="c-faq__content-list {{'is-active' if loop.index == 1}}">

							{% for faq in topic.faq %}

								<li class="c-faq__content-list-item">
									{{collapse.default("js-collapse", faq)}}
								</li>

							{% endfor %}
						</ul>

					{% endfor %}

				</div>
			</div>
		</div>
	</section>

{% endmacro %}