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

{# 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/header/header-macros.njk" as header %}
{% import "styleguides/general/organisms/overlay/overlay-macros.njk" as overlay %}

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

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

<div class="p-inclusion-calculator p-inclusion-calculator--result">

    <div class="p-inclusion-calculator__back l-container">
      {{iconButton.default("u-tablet-hide", {
        overlay: "overlay-inclusion-calculator-result",
        icon: "icon-arrow-left"
      })}}

      {{iconButton.default("u-tablet-show", {
        icon: "icon-arrow-left"
      })}}
    </div>

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

      <div class="l-section__content l-content">
        {{budget.default("a-budget--center a-budget--2x-large is-negative l-content__item", {
          unit: "€",
          amount: "-0,25"
        })}}

        <p class="l-content__item l-content__item--center">verlies premie</p>

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

        {{keyValue.default("l-content__item", {
          key: "Beschikbaar saldo",
          value: "€ 1.200,56"
        })}}

        {{keyValue.default("l-content__item", {
          key: "Bedrag van de opneming",
          value: "€ 250,00"
        })}}

        {{keyValue.default("l-content__item", {
          key: "Datum van de opneming",
          value: "01-03-2019"
        })}}
      </div>
    </div>
  </div>

</div>

{% endset %}

{# ========================================================================= #}
{# :: Overlay - footer #}
{# ========================================================================= #}
{% set footer %}
  <div class="l-container">
    {{button.link("icon-download a-button--fill-space", {
      text: "Download PDF"
    })}}
  </div>
{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "js-overlay o-overlay--right " + state,
  {
    hasBackground: false,
    id: "overlay-inclusion-calculator-result",
    overlay: "overlay-inclusion-calculator-main-desktop overlay-inclusion-calculator-main-mobile",
    content: content,
    footer: footer
  }
)}}