{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# molecules #}
{% import "atoms/input/input-macros.njk" as input %}
{% import "atoms/quote/quote-macros.njk" as quote %}
{% import "atoms/button/button-macros.njk" as button %}
{% import "atoms/checkbox/checkbox-macros.njk" as checkbox %}
{% import "molecules/date/date-macros.njk" as date %}
{% import "molecules/button-group/button-group-macros.njk" as buttonGroup %}

{# ========================================================================= #}
{# :: Component #}
{# ========================================================================= #}
<section class="l-aside l-container l-aside--with-highlight">
  <div class="l-aside__container">
    <div class="l-aside__highlight">
	  <img
			class="l-aside__highlight-image"
			src="/assets/images/mock/landingspage.jpg"
			width="411"
			height="208"
			alt="landingspage"
			loading="lazy"
		/>
    </div>

    <div class="l-aside__content">
      <header class="l-aside__header">
        <h1 class="l-aside__title">Plan je 'dates' met Bebat</h1>

        <p class="l-aside__intro">Batterijen zijn haast niet meer uit ons leven
        weg te denken. Je vindt ze onder andere in elektrische fietsen,
        smartwatches, hoverboards,.. maar ook in meer alledaagse voorwerpen
        zoals een steelstofzuiger, wandklok, elektrische tandenborstels, je
        smartphone.. Een gemiddeld Belgisch gezin heeft dan ook maar liefst 125
        batterijen in huis, waarvan er 13 leeg zijn. Bij gezinnen met kinderen
        (+12 j) kan het aantal batterijen zelfs oplopen tot 173 waarvan er 20
        leeg zijn. Hoeveel lege batterijen heb jij in huis? Ga op batterijenjacht
        en breng ze binnen in je favoriete Bebat inzamelpunt!</br><br/>

        Af en toe vergeten we wel eens om die verzamelde batterijen binnen te
        brengen. Precies daarom hebben we een nuttig cadeautje voor je klaar!</p>
      </header>

      <h4>Stuur me een gratis Bebat kalendar</h4>
      <p>(* zolang de voorraad strekt)</p>

      <form class="o-form l-aside__form">
        <fieldset class="o-form__section">
          <legend class="o-form__section__title"><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"
            })}}

            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Straat",
                name: "form-street"
            })}}

            {{input.default("l-grid__col-3-12", {
                type: "text",
                label: "Huisnummer",
                name: "form-number"
            })}}

            {{input.default("l-grid__col-3-12", {
                type: "text",
                label: "Bus",
                name: "form-bus"
            })}}

            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Postcode",
                name: "form-zip"
            })}}

            {{input.default("l-grid__col-6-12", {
                type: "text",
                label: "Gemeente",
                name: "form-city"
            })}}

            {{input.default("l-grid__col-12-12", {
                type: "text",
                label: "E-mailadres",
                name: "form-email"
            })}}
          </div>
          <div class="o-form__section__sub l-grid l-grid--form">
            {{checkbox.default("l-grid__col-12-12", {
              text: "Alles wat met batterijen te maken heeft, interesseert mij. Je mag ons 1 x per kwartaal de Bebat Nieuwsbrief toesturen via e-mail.",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("l-grid__col-12-12", {
              text: "Ik ga ermee akkoord om andere berichten te ontvangen van Bebat. Je kan je op elk moment uitschrijven en we vallen je niet onnodig lastig. Lees hier meer over onze verwerking van jouw gegevens.",
              name: "checkbox-styleguide-example"
            })}}
          </div>
          <div class="o-form__section__sub l-grid l-grid--form">
            {{buttonGroup.default("", [
              button.submit("", { text: "Inschrijving bevestigen"})
            ])}}
          </div>
        </fieldset>
      </form>
    </div>

    <div class="l-aside__info">
      <div class="l-aside__info-section">
        <h4 class="l-aside__section-title">De enige, echte Bebat kalender 2019, met</h4>
        <div class="s-aside-content">
          <ul>
            <li>een duidelijk maandoverzicht met feestdagen en schoolvakanties</Af>
            <li>per maand een slimme batterijtip of -	weetje</p>
            <li>ruimte om verjaardagen en vakanties in te 	vullen (om je batterijtjes weer op te laden)</p>
          </ul>

          <p>Tip: duid een vaste Bebat-date aan om lege batterijen weg te brengen.</p>
        </div>
      </div>
    </div>
  </div>
</section>