{# ========================================================================= #}
{# :: 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 l-aside--reverse l-aside--large-highlight">
  <div class="l-aside__container">
    <div class="l-aside__highlight">
	  	<img
			class="l-aside__highlight-image"
			src="/assets/images/mock/e-car.png"
			width="411"
			height="360"
			alt="e-car"
			loading="lazy"
		/>
    </div>

    <div class="l-aside__content s-aside-content">
      <header class="l-aside__header">
        <h1 class="l-aside__title">E-mobility: wat Noorwegen ons kan leren</h1>

        <p class="l-aside__intro">Noorwegen mikt hoog - heel hoog - op het vlak
        van e-mobility. Het Noorse parlement heeft namelijk beslist dat alle
        nieuwe personenwagens en lichte vrachtwagens vanaf 2025 volledig
        emissievrij moeten zijn. Deze ambities worden ondersteund door tal van
        slimme overheidsbeslissingen. En in België? De grote omslag naar
        elektrisch rijden laat nog op zich wachten. Hoe de Noren onze gids in
        e-mobility kunnen zijn, lees je in dit heldere e-book.</p>
      </header>

      <div class="l-aside__content-item">
        {{quote.default("a-quote--primary", {
          text: "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod.
          Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas sed diam eget risus varius blandit sit amet non magna",
          author: "John Smith"
        })}}
      </div>

      <div class="l-aside__content-item">
        <h4>Wat steek je ervan op?</h4>

        <ul>
          <li>Een overzicht van de incentives die de Noorse overheid aanbiedt.</li>
          <li>Een blik op de huidige situatie in België, de bestaande maatregelen en de actuele doelstellingen.</li>
          <li>Inzicht in hoe het beleid van de Noren voor een omslag in België kan zorgen.</li>
          <li>Een toekomstvisie over de uitdagingen op het vlak van recyclage van EFV-batterijen.</li>
        </ul>
      </div>

      <div class="l-aside__content-item">
        <h4>Vul het formulier in en ontvang het e-book</h4>

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

    <div class="l-aside__info">

    </div>
  </div>
</section>