{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% import "styleguides/general/atoms/input/input-macros.njk" as input %}
{% 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/amount-input/amount-input-macros.njk" as amountInput %}

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

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

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

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

<div class="p-overbooking">

  <div class="p-overbooking__back">
    <div class="l-container">
      {{iconButton.default("", {
        overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
        icon: "icon-arrow-left"
      })}}
    </div>
  </div>

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

      <div class="l-section__content">
        {{options.default("l-content__item", {
          name: "account-select-from",
          items: [
            {
              id: "account-select-from-1",
              overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
              content:
                summary.default("m-account-option__content", {
                  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" }
                  ]
              })
            },
            {
              id: "account-select-from-2",
              overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
              content:
                summary.default("m-account-option__content", {
                  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" }
                  ]
              })
            },
            {
              id: "account-select-from-3",
              overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
              content:
                summary.default("m-account-option__content", {
                  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" }
                  ]
              })
            }
          ]
        })}}
      </div>

    </div>
  </div>

</div>

{% endset %}

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

<div class="p-overbooking">

  <section class="p-overbooking__content l-section">
    <div class="l-container">
      <header class="l-section__header l-section__header--center">
        <h2 class="l-section__title">Kies een rekening</h2>
      </header>

      <div class="l-section__content">
        {{options.default("l-content__item", {
          name: "account-select-from",
          items: [
            {
              id: "account-select-from-4",
              overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
              content:
                summary.default("m-account-option__content", {
                  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" }
                  ]
              })
            },
            {
              id: "account-select-from-5",
              overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
              content:
                summary.default("m-account-option__content", {
                  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" }
                  ]
              })
            },
            {
              id: "account-select-from-6",
              overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
              content:
                summary.default("m-account-option__content", {
                  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" }
                  ]
              })
            }
          ]
        })}}
      </div>
    </div>
  </section>

</div>

{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "js-overlay o-overlay--right u-tablet-hide " + state,
  {
    hasBackground: false,
    overlay: "overlay-overbooking-main overlay-overbooking-choice-mobile",
    id: "overlay-overbooking-choice-desktop",
    content: content
  }
)}}

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