{{ define "main" }}

<section class="section" data-pagefind-body>
  <div class="container">
    <ul class="list-inline text-center filter-controls mb-4">
      <li class="list-inline-item m-3 text-uppercase active" data-filter="all">Alle</li>
      <li class="list-inline-item m-3 text-uppercase" data-filter="upcoming">Anstehend</li>
      <li class="list-inline-item m-3 text-uppercase" data-filter="past">Vergangen</li>
    </ul>
    <div class="filter-container row mx-auto">
      {{ range sort .Params.events ".date" }}
      <div class="filter-item col-12" data-groups='{{if partial "data/termin-upcoming" .}}upcoming{{else}}past{{end}}'>
        {{ partial "termin" . }}
      </div>
      {{ end }}
      <div class="filter-sizer col-1"></div>
    </div>
  </div>
</section>

{{ end }}