{{ define "main" }}
<!-- Banner -->
{{ with .Params.banner }}
<section class="section pt-14">
  <div class="container">
    <div class="row justify-center">
      <div class="lg:col-7 md:col-9 mb-8 text-center">
        <h1 class="mb-4 text-h3 lg:text-h1">{{ .title | markdownify }}</h1>
        <p class="mb-8">{{ .content | markdownify }}</p>
        {{ with .button }} {{ if .enable }}
        <a
          class="btn btn-primary"
          href="{{ .link | absURL }}"
          {{
          if
          strings.HasPrefix
          .link
          `http`
          }}
          target="_blank"
          rel="noopener"
          {{
          end
          }}
        >
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        {{ end }} {{ end }}
      </div>
      <div class="col-12">
        {{ partial "image" (dict "Src" .image "Alt" "Banner image" "Loading"
        "eager" "Class" "mx-auto lg:!max-w-[800px]" "DisplayXL" "800x" ) }}
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /Banner -->


<!-- Features -->
{{ range $i, $e:= .Params.features }}
<section class="section-sm {{ if (modBool $i 2) }}bg-gradient{{ end }}">
  <div class="container">
    <div class="row items-center justify-between">
      <div
        class="mb:md-0 {{ if not (modBool $i 2) }}
              md:order-2
            {{ end }} md:col-5 mb-6"
      >
        {{ partial "image" (dict "Src" .image "Alt" "feature image" "DisplayXL"
        "520x" "DisplayLG" "425x" "DisplayMD" "360x") }}
      </div>
      <div
        class="{{ if not (modBool $i 2) }}
              md:order-1
            {{ end }} md:col-7 lg:col-6"
      >
        <h2 class="mb-4">{{ .title | markdownify }}</h2>
        <p class="mb-8 text-lg">{{ .content | markdownify }}</p>
        <ul> 
          {{ range .bulletpoints }}
          <li class="relative mb-4 pl-6">
            <i class="fa fa-check absolute left-0 top-1.5"></i>
            {{ . | markdownify }}
          </li>
          {{ end }}
        </ul>
        {{ with .button }} {{ if .enable }}
        <a class="btn btn-primary mt-6" href="{{ .link | absURL }}">
          {{ .label }}
          <i class="fa fa-arrow-right pl-2"></i>
        </a>
        {{ end }} {{ end }}
      </div>
    </div>
  </div>
</section>
{{ end }}
<!-- /Features -->




{{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
<section>

  <div class="grid-container">
    <div class="column">
      <ul class="list">
        {{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
        <section>
          <h2>Laatste nieuws</h2>
          <ul class="list">
            {{ range (first 5 (where .Site.RegularPages "Section" "blog").ByDate.Reverse) }}
            <li class="list-item">
              <div class="content">
                <a class="link" href="{{ .RelPermalink }}">{{ .Title }}</a>
              </div>
              <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
              <hr class="hr-list">
            </li>
          
            {{ end }}
          </ul>
        </section>
        {{ end }}
      </ul>
    </div>
    <div class="column">
      <ul class="list">
        {{ if gt (len (where .Site.RegularPages "Section" "blog")) 0 }}
        <section>
          <h2>Laatste nieuws</h2>
          <ul class="list">
            {{ range (first 5 (where .Site.RegularPages "Section" "blog").ByDate.Reverse) }}
            <li class="list-item">
              <div class="content">
                <a class="link" href="{{ .RelPermalink }}">{{ .Title }}</a>
              </div>
              <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
              <hr class="hr-list">
            </li>
          
            {{ end }}
          </ul>
        </section>
        {{ end }}
      </ul>
    </div>
  </div>
</section>
{{ end }}


{{ end }}