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

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

{# ========================================================================= #}
{# :: 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">

  <div class="p-delete-account__close l-container">
    {{iconButton.default("", {
      icon: "icon-cross",
      overlay: "overlay-delete-account"
    })}}
  </div>

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

      <div class="l-section__content">
        {{paragraph.default("a-paragraph--1x-large a-paragraph--center", {
          text: "Ben je zeker dat je de rekening <strong>NL48 2152 5466 2587</strong> wil beëindigen?"
        })}}
      <div>

      <div class="l-section__footer l-section__footer--full-width">
        {{button.default("a-button--secondary a-button--outline", {
          text: "Rekening beëindigen"
        })}}
      </div>

    </div>
  </div>

</div>

{% endset %}

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