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

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

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

    <header class="l-section__header l-section__header--center">
      <h3 class="l-section__title">Of kies een periode</h3>
    </header>

    <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>

  </div>
</section>

{% endset %}

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

<div class="p-download-statement">
  {{header.overlay("", {
    overlay: "overlay-download-statement-desktop overlay-download-statement-mobile",
    title: "Download uw rekeninguitreksel"
  })}}

  <div class="l-section p-download-statement__content">
    <div class="l-container">

    	{{downloadButton.default("", {
		    icon: "icon-file-pdf",
		    text: "informatie.pdf"
		})}}

    </div>
  </div>

  {{form | safe}}
</div>
{% endset %}

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

<div class="p-download">

	<section class="l-section">
    <div class="l-container">
      <header class="l-section__header l-section__header--center">
        <h2 class="l-section__title">Download uw rekeninguitreksel</h2>
      </header>

      <div class="l-section__content">
        {{downloadButton.default("", {
            icon: "icon-file-pdf",
            text: "informatie.pdf"
        })}}
      </div>
    </div>
	</section>

	{{form | safe}}
</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-statement-mobile",
    id: "overlay-download-statement-desktop",
    content: content,
    footer: footer
  }
)}}

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