{{ define "main" }}

<section class="section pb-0" role="banner">
  <div class="container">
    <div class="row justify-content-between align-items-center">
      <div class="col-lg-7 text-center text-lg-start pe-lg-5">
        {{ with .Params.banner }}
        <h1 class="mb-4">{{ .title | markdownify }}</h1>
        <p class="mb-4">{{ .subtitle | markdownify }}</p>
        {{ end }}
        <div class="d-flex flex-wrap justify-content-center justify-content-lg-start">

          {{ with .Params.banner_button }}
          <a class="btn btn-primary ms-2 me-2 me-lg-4 mt-2" href="{{.link | safeURL}}">{{.label}}</a>
          {{ end }}

          <form class="search-wrapper mt-2 mx-2 mx-lg-0" name="search-form" data-bs-toggle="modal" data-bs-target="#searchModal">
            <i class="search-icon fas fa-search"></i>
            <input class="form-control px-4 text-dark" placeholder="{{ i18n `search_placeholder`}}" readonly>
            <button type="button" class="search-button" data-search-toggler>{{ i18n "search" }}</button>
          </form>
        </div>
      </div>
      <div class="col-lg-5 d-lg-block d-none">
        {{ partial "image.html" (dict "Src" .Params.banner.image "Alt" "illustration") }}
      </div>
    </div>
  </div>
</section>

<!-- topics -->
<section class="section pb-0" role="main">
  <div class="container">
    <h2 class="section-title">{{ i18n "topics" }}</h2>
    <div class="row">
      {{ range (where site.Pages "Type" "docs") }}
      <div class="col-lg-4 col-sm-6 mb-4">
        <div class="card h-100">
          <div class="card-body py-5">
              
            <h3 class="card-title h4"><i class="{{ .Params.Icon }}"></i> {{ .Title }}</h3>
            <p class="card-text">{{ .Params.Description | markdownify }}</p>
            <a href="{{ .Permalink }}" class="stretched-link" aria-label="{{ .Title }}"></a>
          </div>
        </div>
      </div>
      {{ end }}
    </div>
  </div>
</section>
<!-- /topics -->

<!-- faq -->
{{ with site.GetPage "/faq" }}
<section class="section pb-0">
  <div class="container">
    <h2 class="section-title">{{ .Title }}</h2>
    <div class="row masonry-wrapper">
      {{ .Content }}
    </div>
  </div>
</section>
{{ end }}
<!-- /faq -->

<!-- call to action -->
{{ with .Params.call_to_action }}
{{ if .enable }}
<section class="section">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-lg-4 text-center d-lg-block d-none">
        {{ partial "image.html" (dict "Src" .image "Alt" "call-to-action") }}
      </div>
      <div class="col-lg-8 text-lg-start text-center ps-3">
        <h2 class="mb-3 fw-bold">{{ .title | markdownify }}</h2>
        <p>{{ .content | markdownify }}</p>
        <form id="cta-lead-form" class="d-flex flex-column flex-sm-row gap-2 mt-2" novalidate>
            <input
                id="cta-email"
                name="email"
                type="email"
                required
                class="form-control"
                placeholder="Uw e-mailadres"
                aria-label="Uw e-mailadres"
            >
            <button
                type="submit"
                id="cta-submit"
                class="btn btn-primary ms-sm-2 mt-2 mt-sm-0"
            >
                Verzenden
            </button>
        </form>
        <p id="cta-message" class="small mt-2"></p>
      </div>
    </div>
  </div>
</section>
{{ end }}
{{ end }}
<!-- /call to action -->

{{ end }}