{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% import "styleguides/general/atoms/alert/alert-macros.njk" as alert %}
{% import "styleguides/general/atoms/button/button-macros.njk" as button %}
{% import "styleguides/general/atoms/progress/progress-macros.njk" as progress %}
{% import "styleguides/general/atoms/step-count/step-count-macros.njk" as stepCount %}
{% import "styleguides/general/atoms/checkbox/checkbox-macros.njk" as checkbox %}

{# organisms #}
{% import "styleguides/general/organisms/step-wizard/step-wizard-macros.njk" as stepWizard %}


{# ========================================================================= #}
{# :: Data #}
{# ========================================================================= #}

{% set content %}
  <form class="l-form l-scroll ">
    <div class="l-scroll__content">
      <div class="l-container l-content">
        <div class="l-form__grid l-grid l-grid--with-margins l-content__item">
          {{checkbox.checked("l-grid__col-12-12", {
		    text: "Ik bevesting de inhoud van de <strong>Voorwaarden Sparen, Algemene Bankvoorwaarden, Informatieblad Depositogarantiestelsel</strong> en Privacyverklaring te hebben gezien en akkoord te gaan",
		    id: "aop-voorwaarden-1",
		    name: "aop-voorwaarden"
		  })}}

		  {{checkbox.checked("l-grid__col-12-12", {
		    text: "Ik verklaar de gegevens naar waarheid te hebben ingevuld",
		    id: "aop-voorwaarden-2",
		    name: "aop-voorwaarden"
		  })}}

		  {{checkbox.checked("l-grid__col-12-12", {
		    text: "U mag mij per email op de hoogte houden van nieuwe ontwikkelingen bij NIBC Direct",
		    id: "aop-voorwaarden-3",
		    name: "aop-voorwaarden"
		  })}}
        </div>
        {{button.buttonAsSubmit("a-button--icon-after icon-chevron-right u-tablet-hide l-content__item", {
          text: "Volgende"
        })}}
      </div>
    </div>
    <div class="l-form__submit l-scroll__bottom">
      <div class="l-container">
        {{stepCount.default("o-step-wizard__steps", {
          current: "6",
          max: "6"
        })}}
        {{button.buttonAsSubmit("a-button--icon-after a-button--tablet-wide icon-chevron-right u-tablet-show", {
          text: "Volgende"
        })}}
      </div>
    </div>
  </form>
{% endset %}


{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}

{{stepWizard.default("l-container l-container--1x-medium l-container--align-left", {
  progress: "90%",
  content: content
})}}