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

{# molecules #}
{% import "styleguides/general/molecules/button-group/button-group-macros.njk" as buttonGroup %}
{% import "styleguides/general/molecules/data-list/data-list-macros.njk" as dataList %}

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

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

<div class="p-did-u-know">
  {{header.overlay("p-did-u-know__header", {
    overlay: "overlay-did-u-know-desktop overlay-did-u-know-mobile",
    title: "Wist je dat?"
  })}}

  <form class="p-did-u-know__form l-form">
    <div class="l-container">
      <div class="l-form__grid l-grid l-grid--with-margins">
        <div class="l-grid__col-12-12">
          <p class="p-did-u-know__text">Wij bieden termijn deposito’s van verschillende looptijden met aantrekkelijke rentes.</p>
        </div>

        {{dataList.default("l-grid__col-12-12", {
          items: [{
            label: "3 maanden",
            value: "2,05%"
          }, {
            label: "6 maanden",
            value: "2,15%"
          }, {
            label: "9 maanden",
            value: "2,25%"
          }, {
            label: "1 jaar",
            value: "2,35%"
          }, {
            label: "2 – 10 jaar",
            value: "2,50%"
          }]
        })}}
      </div>

      <div class="l-form__submit l-form__submit--full-width">
        {{buttonGroup.default("m-button-group--vertical", {
          items: [
            button.default("a-button--fill-space", { text: "Open een termijn deposito" }),
            button.default("a-button--secondary a-button--outline a-button--fill-space", { text: "Doorgaan met sluiten" })
          ]
        })}}
      </div>
    </div>
  </form>
</div>

{% endset %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
{{overlay.default(
  "o-overlay--center u-tablet-hide js-overlay " + state,
  {
    hasBackground: true,
    id: "overlay-did-u-know-desktop",
    overlay: "overlay-did-u-know-mobile",
    content: content
  }
)}}

{{overlay.default(
  "u-tablet-show js-overlay " + state,
  {
    hasBackground: true,
    id: "overlay-did-u-know-mobile",
    content: content
  }
)}}