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

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

{# 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-upcoming" in pageParams.activeOverlay}}
{% endset %}

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

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

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

        {{summary.default("l-content__item m-summary--contained", {
          label: { text: "Naar rekening" },
          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: "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">
  <div class="l-section">
    <div class="l-container">
      <div class="l-section__content l-content">
        {{budget.default("l-content__item is-negative a-budget--2x-large a-budget--center", {
          unit: "€",
          amount: "-150,00"
        })}}

        {{summary.default("l-content__item m-summary--contained", {
          label: { text: "Naar rekening" },
          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: "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 - footer #}
{# ========================================================================= #}
{% set footer %}
  <div class="l-container">
     {{buttonGroup.default("m-button-group--vertical", {
        items: [
          button.default("a-button--fill-space", { text: "Transactie bewerken" }),
          button.default("a-button--secondary a-button--outline a-button--fill-space", { text: "Transactie annuleren" })
        ]
      })}}
  </div>
{% endset %}

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

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