{# ========================================================================= #}
{# :: 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/account-statement-overview/account-statement-overview-macros.njk" as accountStatementOverview %}

{# ========================================================================= #}
{# :: Partial #}
{# ========================================================================= #}
<div class="l-section p-more__tabs">
  <div class="l-container">
    <div class="l-content">
      <form class="l-content__item l-content__item--spacing-large l-form">
        <fieldset class="l-form__fieldset">
        <legend class="l-form__fieldset-title l-form__fieldset-title--small">Nieuw rekeninguitreksel maken</legend>
          <div class="l-form__grid l-grid l-grid--with-margins l-form__grid--align-fields">
            {{input.select("l-grid__col-4-12", {
              label: "Kies een rekening",
              name: "account-statements-select-1",
              placeholder: "Kies een rekening",
              options: ["BE96 5120 0240 4605", "BE96 5120 0240 4605", "BE96 5120 0240 4605"]
            })}}
            <div class="l-grid__col-4-12">
                  {{button.default("icon-download", {
                text: "Downloaden"
              })}}
            </div>
          </div>
        </fieldset>
      </form>
      <form class="l-content__item l-content__item--spacing-large l-form">
        <fieldset class="l-form__fieldset">
          <legend class="l-form__fieldset-title l-form__fieldset-title--small">Aangemaakte rekeninguitreksels</legend>
          <div class="l-form__grid l-grid l-grid--with-margins l-form__grid--align-fields">
            {{input.select("l-grid__col-3-12", {
              label: "Kies een rekening",
              name: "account-statements-select-2",
              placeholder: "Kies een rekening",
              options: ["BE96 5120 0240 4605", "BE96 5120 0240 4605", "BE96 5120 0240 4605"]
            })}}

            {{input.text("l-grid__col-3-12", {
              label: "Van",
              name: "account-statements-input-1",
              placeholder: "01-01-2018"
            })}}

            {{input.text("l-grid__col-3-12", {
              label: "Tot",
              name: "account-statements-input-2",
              placeholder: "01-01-2019"
            })}}

            <div class="l-grid__col-3-12">
              {{button.default("", {
              text: "Zoeken"
              })}}
            </div>
          </div>
        </fieldset>
      </form>
      {{accountStatementOverview.default("l-content__item")}}
    </div>
  </div>
</div>