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

{# molecules #}
{% import "styleguides/general/molecules/key-value/key-value-macros.njk" as keyValue %}
{% 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-transaction-detail" in pageParams.activeOverlay}}
{% endset %}

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

<div class="p-transaction-detail">
  {{header.overlay("p-transaction-detail__header", {
    overlay: "overlay-transaction-detail-desktop overlay-transaction-detail-mobile"
  })}}

  <div class="l-section">
    <div class="l-container">
      <div class="l-section__content l-content">
        {{budget.default("a-budget--2x-large is-positive a-budget--center l-content__item", {
          unit: "€",
          amount: "50,00"
        })}}

        {{summary.default("l-content__item m-summary--contained", {
          label: { text: "Van rekening" },
          url: "#",
          image: "/assets/general/img/logos/logo-nibc.png",
          title: "J.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" }
          ]
        })}}

        {{keyValue.default("l-content__item", {
          key: "Datum",
          value: "18-01-2019"
        })}}

        {{keyValue.default("l-content__item", {
          key: "Omschrijving",
          value: "Cras mattis consectetur purus sit amet fermentum"
        })}}
      </div>
    </div>

  </div>
</div>

{% endset %}

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

<div class="p-transaction-detail p-transaction-detail--mobile l-section">
  <div class="l-container">
    <div class="l-section__content l-content">
      {{budget.default("l-content__item a-budget--2x-large is-positive a-budget--center", {
        unit: "€",
        amount: "50,00"
      })}}

      {{summary.default("l-content__item m-summary--contained", {
        label: { text: "Van rekening" },
        url: "#",
        image: "/assets/general/img/logos/logo-nibc.png",
        title: "J.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" }
        ]
      })}}

      {{keyValue.default("l-content__item", {
        key: "Datum",
        value: "18-01-2019"
      })}}

      {{keyValue.default("l-content__item", {
        key: "Omschrijving",
        value: "Cras mattis consectetur purus sit amet fermentum"
      })}}
    </div>
  </div>
</div>

{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
 "o-overlay--right js-overlay u-tablet-hide" + state,
  {
    hasBackground: true,
    id: "overlay-transaction-detail-desktop",
    overlay: "overlay-transaction-detail-mobile",
    content: contentDesktop
  }
)}}

{{overlay.default(
 "o-overlay--bottom js-overlay u-tablet-show" + state,
  {
    hasBackground: true,
    id: "overlay-transaction-detail-mobile",
    overlay: "overlay-transaction-detail-desktop",
    content: contentMobile,
    hasCloseButton: true
  }
)}}