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

{# 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/toggle-group/toggle-group-macros.njk" as toggleGroup %}

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

{# ========================================================================= #}
{# :: Form #}
{# ========================================================================= #}
{% set form %}

<form id="form" class="l-form">
  <div class="l-form__grid l-grid l-grid--with-margins">

    {{input.text("l-grid__col-6-12", {
      label: "Datum van",
      name: "amount-from",
      placeholder: "01-01-2019",
      icon: "icon-calendar"
    })}}

    {{input.text("l-grid__col-6-12", {
      label: "Datum t/m",
      name: "amount-to",
      placeholder: "Vandaag",
      icon: "icon-calendar"
    })}}
  </div>

  {{toggleGroup.radio("l-form__grid", {
    label: { text: "Format" },
    listClasses: "l-grid l-grid--normalize-with-margins",
    items: [
      {
        classes: "l-grid__col-6-12",
        data: {
          text: "PDF",
          id: "download-radio-1",
          name: "download-radio"
            }
      },
      {
        classes: "l-grid__col-6-12",
        data: {
          text: "CSV",
          id: "download-radio-2",
          name: "download-radio"
        }
      }
    ]
  })}}
</form>

{% endset %}

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

<div class="p-download-statement">
  {{header.overlay("", {
    overlay: "overlay-download-transaction-desktop overlay-download-transaction-mobile",
    title: "Kies een periode"
  })}}

  <div class="l-section p-download-statement__content">
    <div class="l-container">
      {{form | safe}}
    </div>
  </div>
</div>
{% endset %}

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

<div class="p-download-statement">

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

      <div class="l-section__content">
        {{form | safe}}
      </div>
    </div>
	</section>
</div>
{% endset %}

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


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

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