{# ========================================================================== #}
{# :: Inheritance #}
{# ========================================================================== #}
{% extends "general/pages/_base/default.njk" %}

{# ========================================================================== #}
{# :: Settings #}
{# ========================================================================== #}
{% set pageParams = {
	isFullWidth: false,
	styleVendors: [],
	scriptVendors: ["https://kit.fontawesome.com/74199cd914.js"],
	order: 1,
	scope: "",
	header: true
} %}

{# ========================================================================== #}
{# :: Imports #}
{# ========================================================================== #}
{% import "general/components/formfieldset/formfieldset-macros.njk" as formfieldset %}
{% import "general/building-blocks/button/button-macros.njk" as button %}
{% import "general/components/circles/circles-macros.njk" as circles %}

{# ========================================================================== #}
{# :: Content #}
{# ========================================================================== #}
{% block content %}
	{% include "general/pages/_partials/home/intro.njk" %}

	<section class="l-section">
		<div class="l-container">
			<div class="l-section__header">
				<div class="l-grid l-grid--with-spacing">
					<div class="l-grid__col l-grid__col--6@screen l-grid__col--6@tablet">
						<h1 class="u-margin-bottom-none">Lot berekent je hypotheek</h1>
					</div>

					<div class="l-grid__col l-grid__col--6@tablet">
						<p>
							Geen zin om je bezig te houden met het regelen van een
							hypotheek? Spendeer je liever je tijd aan iets nuttig zoals
							het afspreken met je vrienden of het voorbereiden van je
							house warming party?
						</p>
					</div>
				</div>
			</div>

			<div class="l-section__content">
				{% include "general/pages/_partials/calculationtool/situation.njk" %}
			</div>

			<div class="l-section__content">
				{% include "general/pages/_partials/calculationtool/obligations.njk" %}
			</div>

			<div class="l-section__content">
				{% include "general/pages/_partials/calculationtool/obligations-expanded.njk" %}
			</div>

			<div class="l-section__content">
				{% include "general/pages/_partials/calculationtool/mortgage-duration.njk" %}
			</div>

			<div class="l-section__footer">
				{{button.default("", {
					text: "Bereken nu"
				})}}
			</div>
		</div>
	</section>
{% endblock %}