{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% 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-delete-account" in pageParams.activeOverlay }}
{% endset %}

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

<div class="p-delete-account p-delete-account--info">

  {{header.overlay("", {
    overlay: "overlay-delete-account",
    title: "Rekening beëindigen"
  })}}

  <div class="l-section">
    <div class="l-container">

      <div class="l-section__content l-content">
        {{summary.default("is-disabled l-content__item m-summary--contained", {
          label: { text: "Te beëindigen rekening" },
          icon: "icon-coin-stack",
          title: "Dhr. 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" }
          ]
        })}}

        {{summary.default("l-content__item m-summary--expand", {
          label: { text: "Begunstigde rekening" },
          image: "/assets/general/img/logos/logo-nibc.png",
          title: "Dhr. 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" }
          ]
        })}}
      </div>
    </div>
  </div>

</div>

{% endset %}

{# ========================================================================= #}
{# :: Overlay - footer #}
{# ========================================================================= #}
{% set footer %}
  <div class="l-container">
    {{button.default("a-button--secondary a-button--fill-space a-button--outline", {
      text: "Rekening beëindigen"
    })}}
  </div>
{% endset %}

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