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

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

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

<div class="p-inclusion-calculator">
  {{header.overlay("", {
    overlay: "overlay-inclusion-calculator-main-desktop overlay-inclusion-calculator-main-mobile",
    title: "Opnemingscalculator"
  })}}

  <form id="form" class="l-form">
    <div class="l-container">
      <div class="l-form__grid l-grid l-grid--with-margins">
        {{input.number("l-grid__col-12-12", {
          label: "Bedrag van opneming",
          name: "inclusion-amount",
          placeholder: "250,00",
          icon: "icon-euro"
        })}}

        {{input.text("l-grid__col-12-12", {
          label: "Datum van de opneming",
          name: "inclusion-date",
          placeholder: "01-03-2019",
          icon: "icon-calendar"
        })}}
      </div>
    </div>
  </form>

</div>

{% endset %}

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

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

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

      <header class="l-section__header l-section__header--center">
        <h2 class="l-section__title">Opnemingscalculator</h2>
      </header>

      <div class="l-section__content">
        <form class="l-form">
          <div class="l-form__grid l-grid l-grid--with-margins">
            {{input.number("l-grid__col-12-12", {
              label: "Bedrag van opneming",
              name: "inclusion-amount",
              placeholder: "250,00",
              icon: "icon-euro"
            })}}

            {{input.text("l-grid__col-12-12", {
              label: "Datum van de opneming",
              name: "inclusion-date",
              placeholder: "01-03-2019",
              icon: "icon-calendar"
            })}}
          </div>

          <div class="l-form__submit l-form__submit--full-width">
            {{button.buttonAsSubmit("", {
              overlay: "overlay-inclusion-calculator-result",
              text: "Berekenen"
            })}}
          </div>
        </form>
      </div>

    </div>
  </section>

</div>

{% endset %}

{# ========================================================================= #}
{# :: Overlay - footer #}
{# ========================================================================= #}
{% set footer %}
  <div class="l-container">
    {{button.buttonAsSubmit("a-button--fill-space", {
        overlay: "overlay-inclusion-calculator-result",
        text: "Berekenen",
        form: "form"
      })}}
  </div>
{% endset %}


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

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