{# ========================================================================= #}
{# :: 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 %}

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

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

<form class="p-overbooking js-overbooking">
    {{header.overlay("", {
      overlay: "overlay-new-overbooking",
      title: "Overboeken"
    })}}

  <div class="p-overbooking__content">

    <div class="l-form l-container">
      <div class="l-form__grid l-grid l-grid--with-margins">
        {{summary.default("m-summary--expand l-grid__col-12-12", {
          overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
          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" }
          ]
        })}}

        {{summary.default("m-summary--expand l-grid__col-12-12", {
          overlay: "overlay-overbooking-choice-desktop overlay-overbooking-choice-mobile",
          label: { text: "Naar rekening" },
          url: "#",
          image: "/assets/general/img/logos/logo-ing.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" }
          ]
        })}}

        {{input.number("l-grid__col-12-12 a-input--large o-overlay__focus", {
          currency: "€",
          label: "Bedrag",
          name: "styleguide-number-example1",
          placeholder: "1.000,00"
        })}}

        {{input.text("l-grid__col-12-12", {
          label: "Calendar input",
          name: "styleguide-calendar-example1",
          placeholder: "Calendar placeholder",
          icon: "icon-calendar"
        })}}

        {{input.text("l-grid__col-12-12", {
          label: "Omschrijving",
          name: "description",
          placeholder: "Typ hier je omschrijving"
        })}}
      </div>

      <div class="l-form__submit l-form__submit--full-width">
        {{button.buttonAsSubmit("a-button--icon-after is-disabled icon-checkmark", {
          text: "Ga door"
        })}}
      </div>
    </div>

  </div>
</form>

{% endset %}

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