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



<!-- Features2 -->
{{ range $i, $e:= .Params.features2 }}
<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 }}
<!-- /Features2 -->

<!-- Features3 -->

{{ range $i, $e:= .Params.features2 }}
<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 }}
<!-- /Features3 -->

{{ 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>
        <a class="link" href="{{ .RelPermalink }}">{{ .Title }}
          
        </a>
        <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 }}

<!-- testing2-->

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

<!-- testing -->

{{ 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>
                <a class="link" href="{{ .RelPermalink }}">{{ .Title }}
                  <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
                </a>
                
                <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>
                <a class="link" href="{{ .RelPermalink }}">{{ .Title }}
                  <time class="g time" datetime="{{ dateFormat "2006-01-02" .Date }}">{{ dateFormat "02-01-2006" .Date }}</time>
                </a>
                
                <hr class="hr-list">
                
              </li>
              {{ end }}
          </ul>
        </section>
        {{ end }}
      </ul>
    </div>
  </div>
</section>
{{ end }}


{{ end }}