{# ========================================================================= #}
{# :: 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/input/input-macros.njk" as input %}
{% import "styleguides/general/atoms/progress/progress-macros.njk" as progress %}
{% import "styleguides/general/atoms/step-count/step-count-macros.njk" as stepCount %}

{# molecules #}
{% import "styleguides/general/molecules/option-button/option-button-macros.njk" as optionButton %}
{% import "styleguides/general/molecules/visual/visual-macros.njk" as visual %}
{% import "styleguides/general/molecules/tooltip/tooltip-macros.njk" as tooltip %}

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


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

{% set tooltipSmall %}
{{tooltip.default("m-option-button__tooltip", {
  icon: "icon-info",
  text: "This is some extra information."
})}}
{% endset %}

{% set tooltipLarge %}
{{tooltip.default("m-option-button__tooltip", {
  icon: "icon-info",
  text: "This is a whole lot of extra information and is very relevant for the user at this point."
})}}
{% endset %}

{% 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--image l-split__item--top">
        {{visual.default("u-hide@above-desktop-large", {
          background: "/assets/general/img/photos/nibc-placeholder-8.png"
        })}}

        {{visual.default("u-hide@below-desktop-large", {
          background: "/assets/general/img/photos/nibc-placeholder-6.png"
        })}}
      </div>
      <div class="l-split__item l-split__item--content">
        <div class="l-container l-content">
          <div class="l-form__grid l-grid l-grid--with-margins l-content__item">
            {{optionButton.default("l-grid__col-12-12", {
              content: "Ben je fiscaal inwoner van Nederland?" + tooltipLarge,
              group: "q1",
              items: [
                {
                  name: "q1-ja",
                  label: "Ja"
                },
                {
                  name: "q1-nee",
                  label: "Nee"
                }
              ]
            })}}
            {{alert.warning("l-grid__col-12-12", {
              text: "Je kunt helaas online geen rekening openen bij NIBC Direct als je fiscaal inwoner van een ander land bent. <b>Neem contact met ons op 0800 – 409 498 4 of via email.</b>"
            })}}
            {{optionButton.default("l-grid__col-12-12", {
              content: "Ben je (ook fiscaal) inwoner van een ander land dan Nederland?" + tooltipSmall,
              group: "q2",
              items: [
                {
                  name: "q2-ja",
                  label: "Ja"
                },
                {
                  name: "q2-nee",
                  label: "Nee"
                }
              ]
            })}}
            {{optionButton.default("l-grid__col-12-12", {
              content: "Ben je fiscaal inwoner, dan wel geboren in de Verenigde Staten?",
              group: "q3",
              items: [
                {
                  name: "q3-ja",
                  label: "Ja"
                },
                {
                  name: "q3-nee",
                  label: "Nee"
                }
              ]
            })}}
          </div>
          {{button.buttonAsSubmit("a-button--icon-after icon-chevron-right u-tablet-hide l-content__item", {
            text: "Volgende"
          })}}
        </div>
      </div>
    </div>
  </div>
  <div class="l-form__submit l-scroll__bottom">
    <div class="l-container">
      {{stepCount.default("o-step-wizard__steps", {
        current: "4",
        max: "6"
      })}}
      {{button.buttonAsSubmit("a-button--icon-after a-button--tablet-wide icon-chevron-right u-tablet-show is-disabled", {
        text: "Volgende"
      })}}
    </div>
  </div>
</form>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{stepWizard.default("l-container l-container--1x-large l-container--align-left", {
  progress: "60%",
  content: content
})}}