{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% import "styleguides/general/atoms/button/button-macros.njk" as button %}
{% import "styleguides/general/atoms/input/input-macros.njk" as input %}

{# molecules #}
{% import "styleguides/general/molecules/checklist/checklist-macros.njk" as checklist %}
{% import "styleguides/general/molecules/visual/visual-macros.njk" as visual %}

{# 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-split">
      <div class="l-split__item l-split__item--top">
        {{visual.default("", {
          background: "/assets/general/img/photos/nibc-header-1.jpg"
        })}}
      </div>
      <div class="l-split__item">
        <div class="l-container l-content">
          <div class="l-form__grid l-grid l-grid--with-margins l-content__item">
            <p class="l-grid__col-12-12">
              Corrigeer / vul je telefoonnummer aan zodat we je een activiatiecode kunnen sturen.
            </p>
            {{input.tel("l-grid__col-12-12", {
              label: "Telefoonnummer",
              name: "MFA-telephone",
              placeholder: "__ ___ __ __"
            })}}
          </div>
          {{button.buttonAsSubmit("a-button--icon-after icon-chevron-right u-tablet-hide l-content__item", {
            text: "Doorgaan"
          })}}
        </div>
      </div>
    </div>
  </div>
  <div class="l-form__submit l-scroll__bottom">
    <div class="l-container">
      {{button.buttonAsSubmit("a-button--icon-after a-button--tablet-wide icon-chevron-right u-tablet-show", {
        text: "Doorgaan"
      })}}
    </div>
  </div>
</form>
{% endset %}


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

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