{{ define "main" }}

<!--
<section class="section">
  <div class="container">
    <div class="row justify-content-between">
      {{ with site.Params.google_map }}
      {{ if .enable }}
      <div class="col-lg-8 mb-5 mb-lg-0 overflow-hidden">
        <iframe class="rounded-3" style="min-height:100%;width:100%;" frameborder="0" src="{{.embed_url}}"></iframe>
      </div>
      {{ end }}
      {{ end }}
      
      <div class="col-lg-4">
        <div class="p-5 rounded-xs shadow">
          <h3 class="text-dark border-bottom mb-5 pb-4">{{ i18n "keep_in_touch" }}</h3>
          <ul class="list-unstyled">
            {{ with site.Params.contact_info.mobile }}
            <li class="d-flex mb-4" data-aos="fade-up" data-aos-delay="100">
              <i class="fa fa-phone icon-primary"></i>
              <div class="ps-3">
                <h6 class="text-dark">Mobile</h6>
                <p>{{ . | markdownify }}</p>
              </div>
            </li>
            {{ end }}

            {{ with site.Params.contact_info.email }}
            <li class="d-flex mb-4" data-aos="fade-up" data-aos-delay="100">
              <i class="fas fa-envelope icon-primary"></i>
              <div class="ps-3">
                <h6 class="text-dark">Email</h6>
                <div class="content">{{ . | markdownify }}</div>
              </div>
            </li>
            {{ end }}

            {{ with site.Params.contact_info.address }}
            <li class="d-flex mb-4" data-aos="fade-up" data-aos-delay="100">
              <i class="fas fa-map icon-primary"></i>
              <div class="ps-3">
                <h6 class="text-dark">Address</h6>
                <p>{{ . | markdownify }}</p>
              </div>
            </li>
            {{end }}
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
-->

<section class="section section-lg-bottom bg-light">
  <div class="container text-center">
    <div class="row text-center">
      <div class="col-lg-8 mx-auto text-center">
        <form id="leadcapture-form" class="row">
          <div class="col-lg-6">
            <input type="text" name="firstName" class="form-control mb-4" placeholder="Voornaam">
          </div>
          <div class="col-lg-6">
            <input type="text" name="lastName" class="form-control mb-4" placeholder="Achternaam *" required>
          </div>
          <div class="col-lg-6">
            <input type="email" name="emailAddress" class="form-control mb-4" placeholder="E-mail *" required>
          </div>
          <div class="col-lg-6">
            <input type="text" name="phoneNumber" class="form-control mb-4" placeholder="Telefoon">
          </div>
          <div class="col-lg-12">
            <textarea name="description" class="form-control mb-4" placeholder="Bericht *" required></textarea>
          </div>

          <div style="position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;">
            <label for="company">Bedrijfsnaam</label>
            <input type="text" id="company" name="company" tabindex="-1" autocomplete="off">
          </div>

          <div class="col-12">
            <button type="submit" class="btn btn-primary">{{ i18n "submit_now"}}</button>
          </div>

          <div class="col-12 mt-2">
            <p id="leadcapture-status" class="text-success" hidden>Bedankt! We nemen zo spoedig mogelijk contact op.</p>
            <p id="leadcapture-error" class="text-danger" hidden>Er ging iets mis. Probeer het opnieuw.</p>
          </div>
        </form>
      </div>
    </div>
  </div>
</section>

{{ if site.Params.google_map.enable }}
<script src="https://maps.googleapis.com/maps/api/js?key={{site.Params.google_map.gmap_api}}&libraries=places"></script>
{{ end }}

{{ end }}