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

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

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

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

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

<div class="p-transaction-confirm">
  {{iconButton.default("p-transaction-confirm__close", {
    overlay: "ooverlay-overbooking-confirm",
    icon: "icon-cross"
  })}}

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

      <div class="l-content">
        <div class="l-container">
          {{summary.default("l-content__item", {
            url: "#",
            image: "/assets/general/img/logos/logo-nibc.png",
            title: "Dhr.Bogaerts",
            info: [
              { text: "spaarrekening", classes: "m-summary__info-item--uppercase" },
              { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
            ],
            tabindex: "-1"
          })}}

          {# --------------------------------------------------------------- #}
          {# Divider content is used for the component divider below #}
          {% set dividerContent %}
            {{icon.default("a-icon--2x-large", {
              name: "icon-arrow-down"
            })}}

            {{budget.default("a-budget--1x-large", {
              unit: "€",
              amount: "20,00"
            })}}
          {% endset %}

          {{divider.default("l-content__item", { content: dividerContent})}}
          {# End divider component #}
          {# --------------------------------------------------------------- #}

          {{summary.default("l-content__item", {
            url: "#",
            image: "/assets/general/img/logos/logo-nibc.png",
            title: "Dhr.Bogaerts",
            info: [
              { text: "Tegen-rekening", classes: "m-summary__info-item--uppercase" },
              { text: "NL48 2152 5466 2587", classes: "m-summary__info-item--uppercase" }
            ],
            tabindex: "-1"
          })}}
        </div>
      </div>

      <div class="l-content l-content--grey">
        <div class="l-container">
          {{keyValue.default("l-content__item", {
            key: "Datum",
            value: "08-02-2019"
          })}}

          {{keyValue.default("l-content__item", {
            key: "Omschrijving",
            value: "cadeau Eline"
          })}}
        </div>
      </div>

    </div>

      <div class="l-section__footer l-section__footer--full-width">
        <div class="l-container">
          {{button.link("a-button--fill-space", {
            text: "Bevestigen"
          })}}
        </div>
    </div>
  </div>
</div>

{% endset %}

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