{# ========================================================================= #}
{# :: 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/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>
    <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">
            {{input.text("l-grid__col-12-12", {
                label: "Gebruikersnaam",
                name: "mfa-username",
                placeholder: ""
            })}}
            {{input.password("l-grid__col-12-12", {
                label: "Wachtwoord",
                name: "mfa-password",
                placeholder: "",
                link: "Wachtwoord vergeten"
            })}}
          </div>
          {{button.buttonAsSubmit("a-button--icon-after icon-chevron-right u-tablet-hide l-content__item", {
            text: "Inloggen"
          })}}
        </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: "Inloggen"
      })}}
    </div>
  </div>
</form>
{% endset %}


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

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