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

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

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

{# ========================================================================= #}
{# :: Settings #}
{# ========================================================================= #}
{% set state %}
  {{"is-open" if pageParams.activeOverlay and "overlay-account-edit" in pageParams.activeOverlay }}
{% endset %}

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

<div class="p-settings-edit-account">
  {{header.overlay("p-settings-edit-account__header", {
    overlay: "overlay-account-edit-desktop overlay-account-edit-mobile",
    title: "Tegen-rekening bewerken"
  })}}

  <form class="p-settings-edit-account__form l-form">
    <div class="l-container">
      <div class="l-form__grid l-grid l-grid--with-margins">
        {{summary.default("m-summary--contained l-grid__col-12-12", {
          url: "#",
          image: "/assets/general/img/logos/logo-ing.png",
          title: "J.Bogaerts",
          info: [
            { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
            { text: "NL48 2152 5466 2587" }
          ]
        })}}

        {{input.text("l-grid__col-12-12", {
          label: "Naam tegen-rekeninghouder",
          name: "name",
          placeholder: "Jan Bogaerts"
        })}}

        {{input.text("l-grid__col-12-12", {
          label: "Rekeningnummer",
          name: "accountNumber",
          placeholder: "BE54 1258 4695 1289"
        })}}
      </div>

      <div class="l-form__submit l-form__submit--full-width">
        {{button.buttonAsSubmit("icon-checkmark", {
          text: "Opslaan"
        })}}

        {{button.link("a-button--secondary a-button--outline u-tablet-show", {
          text: "Annuleren"
        })}}
      </div>
    </div>
  </form>
</div>

{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "o-overlay--center u-tablet-hide js-overlay " + state,
  {
    hasBackground: true,
    id: "overlay-account-edit-desktop",
    overlay: "overlay-account-edit-mobile",
    content: content
  }
)}}

{{overlay.default(
  "u-tablet-show js-overlay " + state,
  {
    hasBackground: true,
    id: "overlay-account-edit-mobile",
    content: content
  }
)}}