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

{# ========================================================================== #}
{# :: Data #}
{# ========================================================================== #}
{% macro content(data) %}

	<ul>
		{% for item in data %}
			<li>{{item.title}}</li>
		{% endfor %}
	</ul>

{% endmacro %}

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

	<div class="c-guide l-section js-guide {{classes}}">
		<div class="c-guide__container l-container">
			<div class="c-guide__grid l-grid l-grid--with-spacing">
				<div class="c-guide__aside l-grid__col l-grid__col--4@tablet">
					<ul class="c-guide__questions">
						{% for topic in data.topics %}
							<li class="c-guide__questions-item {{'is-active' if loop.index === 1}}">
								{{collapse.default("c-guide__questions-collapse " + ('is-open' if loop.index === 1), {
									title: topic.title,
									content: content(topic.questions)
								})}}

								<button class="c-guide__questions-icon-wrapper u-hide@tablet">
									<span class="fas fa-chevron-right c-guide__questions-icon"></span>
								</button>
							</li>
						{% endfor %}
					</ul>
				</div>

				<div class="c-guide__content l-grid__col l-grid__col--8@tablet">
					<button class="c-guide__content-button u-hide@tablet">
						<div class="c-guide__icon-wrapper">
							<span class="fas fa-chevron-left c-guide__icon"></span>
						</div>

						<span class="c-guide__content-button-text">
							Terug naar het overzicht
						</span>
					</button>

					{% for topic in data.topics %}
						<ul class="c-guide__content-list {{'is-active' if loop.index === 1}}">
							{% for question in topic.questions %}
								<li class="c-guide__item">
									<div class="c-guide__item-header">
										<h4 class="c-guide__item-title">{{question.title}}</h4>
									</div>

									<div class="c-guide__item-text">
										{{question.content | safe}}
									</div>
								</li>
							{% endfor %}
						</ul>
					{% endfor %}
				</div>
			</div>
		</div>
	</div>

{% endmacro %}