{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# atoms #}
{% import "atoms/input/input-macros.njk" as input %}
{# Molecules #}
{% import "molecules/popup/popup-macros.njk" as popup %}
{# Organisms #}
{% import "organisms/form/form-macros.njk" as form %}

{% set form %}

<form class="o-form">
  <fieldset class="o-form__section">
    <legend class="o-form__section__title">Jouw adresgegevens <small>(alle velden zijn verplicht)</small></legend>

    <div class="o-form__section__sub l-grid l-grid--form">
      {{input.default("l-grid__col-6-12", {
          type: "text",
          label: "Voornaam",
          name: "form-name"
      })}}
      {{input.default("l-grid__col-6-12", {
          type: "text",
          label: "Naam",
          name: "form-last-name"
      })}}
    </div>
    <div class="o-form__section__sub l-grid l-grid--form">
      {{input.default("l-grid__col-6-12", {
          type: "text",
          label: "Straat en huisnummer",
          name: "form-street"
      })}}
      {{input.default("l-grid__col-6-12", {
          type: "text",
          label: "Postcode",
          name: "form-zip"
      })}}
      {{input.default("l-grid__col-12-12", {
          type: "text",
          label: "Gemeente",
          name: "form-city"
      })}}
    </div>

  </fieldset>
  <fieldset class="o-form__section">
    <legend class="o-form__section__title">Inzamelpunt gegevens <small>(alle velden zijn verplicht)</small></legend>

    <div class="o-form__section__sub l-grid l-grid--form">
      {{input.default("l-grid__col-12-12", {
          type: "text",
          label: "Naam inzamelpunt",
          name: "form-name-collectionpoint"
      })}}
    </div>
    <div class="o-form__section__sub l-grid l-grid--form">
      {{input.default("l-grid__col-6-12", {
          type: "text",
          label: "Straat en huisnummer",
          name: "form-street"
      })}}
      {{input.default("l-grid__col-6-12", {
          type: "text",
          label: "Postcode",
          name: "form-zip"
      })}}
      {{input.default("l-grid__col-12-12", {
          type: "text",
          label: "Gemeente",
          name: "form-city"
      })}}
    </div>
    <div class="o-form__section__sub l-grid l-grid--form">
      {{input.textarea("l-grid__col-12-12", {
        label: "Opmerkingen (optioneel)",
        name: "form-remarks",
        row: 5
      })}}
    </div>
  </fieldset>
</form>

{% endset %}

{# ========================================================================= #}
{# :: Default #}
{# ========================================================================= #}
{% macro default(classes) %}
  {{popup.default("",
    form,
    {
      title: "Vraag jouw zakjes aan",
      text: "Geen zakjes meer in je favoriete inzamelpunt? Laat het ons weten en wij vullen ze aan, en sturen er meteen ook een aantal naar je op!"
    }
  )}}
{% endmacro %}