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

{# molecules #}
{% import "styleguides/general/molecules/option/option-macros.njk" as option %}
{% import "styleguides/general/molecules/summary/summary-macros.njk" as summary %}

{# organisms #}
{% import "styleguides/general/organisms/header/header-macros.njk" as header %}
{% import "styleguides/general/organisms/overlay/overlay-macros.njk" as overlay %}
{% import "styleguides/general/organisms/options/options-macros.njk" as options %}

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set state %}
  {{"is-open" if pageParams.activeOverlay == "overlay-new-deposito"}}
{% endset %}

{# ========================================================================= #}
{# :: Overlay - content #}
{# ========================================================================= #}
{% set content %}

<div class="p-new-deposito">
  {{header.overlay("", {
    overlay: "overlay-new-deposito",
    title: "Termijndeposito openen"
  })}}

  <div class="p-new-deposito__content l-section">
    <div class="l-container">

      <form id="form" class="l-form">
        <div class="l-form__grid l-grid l-grid--with-margins">
          {{summary.default("m-summary--expand l-grid__col-12-12", {
            label: { text: "Van rekening" },
            url: "#",
            image: "/assets/general/img/logos/logo-nibc.png",
            title: "J.Bogaerts",
            budget: { amount: "1.200,56" },
            info: [
              { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
              { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
            ]
          })}}

          {{input.number("l-grid__col-12-12 ", {
            label: "Bedrag",
            name: "styleguide-text-example1",
            placeholder: "€ 1.000,00"
          })}}

          {{options.default("l-grid__col-12-12", {
            label: { text: "Kies een looptijd" },
            name: "account-select-deposito",
            items: [
              {
                id: "account-select-deposito-1",
                content:
                  summary.default("m-account-option__content", {
                  title: "3 maanden",
                  budget: { text: "U spaart", amount: "1.009,75" },
                  info: [
                    { text: "% 0,40" }
                  ]
                })
              },
              {
                id: "account-select-deposito-2",
                content:
                  summary.default("m-account-option__content", {
                  title: "3 maanden",
                  budget: { text: "U spaart", amount: "1.009,75" },
                  info: [
                    { text: "% 0,40" }
                  ]
                })
              },
              {
                id: "account-select-deposito-3",
                content:
                  summary.default("m-account-option__content", {
                  title: "3 maanden",
                  budget: { text: "U spaart", amount: "1.009,75" },
                  info: [
                    { text: "% 0,40" }
                  ]
                })
              }
            ]
          })}}
        </div>
      </form>

    </div>
  </div>
</div>

{% endset %}

{# ========================================================================= #}
{# :: Overlay - footer #}
{# ========================================================================= #}
{% set footer %}
  <div class="l-container">
    {{button.buttonAsSubmit("a-button--icon-after a-button--fill-space icon-chevron-right is-disabled", {
      text: "Open nu",
      form: "form"
    })}}
  </div>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "js-overlay o-overlay--right " + state,
  {
    hasBackground: true,
    id: "overlay-new-deposito",
    content: content,
    footer: footer
  }
)}}