{# ========================================================================= #}
{# :: Imports #}
{# ========================================================================= #}
{# molecules #}
{% import "atoms/input/input-macros.njk" as input %}
{% 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">
      {{date.default("", {
        date: {
          dayType: "woensdag",
          day: "25",
          month: "september",
          year: "2019"
        },
        hours: {
          from: "09u00",
          to: "12u00"
        }
      })}}
    </div>

    <div class="l-aside__content">
      <header class="l-aside__header">
        <h1 class="l-aside__title">Infosessie batterijen en veiligheid</h1>

        <p class="l-aside__intro">We verwelkomen je graag bij Bebat in Tienen op woensdag 25 september 2019 vanaf 09u00. Einde is voorzien rond 12u, we sluiten de voormiddag af met een broodjeslunch.</p>
      </header>

      <h4>Inschrijving infosessie</h4>
      <p>25 september 2019</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"
            })}}
          </div>
          <div class="o-form__section__sub l-grid l-grid--form">
            {{input.default("l-grid__col-12-12", {
                type: "text",
                label: "Naam bedrijf",
                name: "form-company"
            })}}
            {{input.default("l-grid__col-12-12", {
                type: "text",
                label: "Functie",
                name: "form-function"
            })}}
          </div>
          <div class="o-form__section__sub l-grid l-grid--form">
            {{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: "Ja, ik schrijf me in voor de infosessie op 25 september",
              name: "checkbox-styleguide-example"
            })}}
            {{checkbox.default("l-grid__col-12-12", {
              text: "Ik heb de privacy policy van Bebat gelezen en ga hiermee akkoord.",
              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">Agenda:</h4>
        <div class="s-aside-content">
          <p><strong>09u00:</strong> onthaal</p>

          <p><strong>09u30:</strong> start infosessie</p>

          <ul>
            <li>Bebat: van de kleinste tot de grootste batterij</li>
            <li>ADR checklist</li>
            <li>Bezoek Sortbat</li>
            <li>Workshop EV batterijen</li>
            <li>12u30: einde en lunch</li>
          </ul>
        </div>
      </div>

      <div class="l-aside__info-section">
        <h4 class="l-aside__section-title">Locatie:</h4>
        <div class="s-aside-content">
          <a href="/">
            <img src="/assets/images/mock/location.jpg" alt="">
          </a>
          <p><strong>Bebat, Walstraat 5, 3300 Tienen</strong></p>

          <p>Plaatsen zijn beperkt - inschrijven kan tot en met 8 september via het formulier hiernaast.<br/><br/>
            Graag tot dan!</br></br>
            Bebat</p>
        </div>
      </div>
    </div>
  </div>
</section>