{{ define "main" }}

<section class="section-sm">
  <div class="container">
    <div class="row">
      <div class="col-12">
        <div class="row gta-cat">
          <div class="col-12">
            <ul class="list-inline text-center filter-controls mb-5">
              <li class="list-inline-item m-3 text-uppercase active" data-filter="all">{{ i18n "all" }}</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>
        </div>
        <noscript>
          <style>
            .gta-cat {
              display: none;
            }
          </style>
        </noscript>
        <ul class="list-unstyled filtr-container">
          {{ range .Params.events }}
          <li class="d-md-table mb-4 w-100 hover-shadow filtr-item" data-category="{{ if or (ge (.date | time.AsTime).Unix now.Unix) (and .enddate (ge (.enddate | time.AsTime).Unix now.Unix)) }}upcoming{{else}}past{{end}}" data-time="{{.date}}">
            <div class="d-md-table-cell text-center p-4 bg-primary text-white mb-4 mb-md-0 termin-tc">
              <span class="h2 d-block">{{ time.Format "2" .date}}</span>
              <span class="d-block">{{ time.Format "Jan 2006" .date}}</span>
              {{ with .enddate }}<br>bis {{ time.Format "2 Jan 2006" . }}{{ end }}
            </div>
            <div class="d-md-table-cell px-4 vertical-align-middle mb-4 mb-md-0 p-2 border-bottom">
              <p class="h4 mb-0 d-block">{{ .title }}</p>
            </div>
            {{ with .location }}
            <div class="d-md-table-cell text-right pr-0 pr-md-4 p-2 vertical-align-middle border-bottom">
              <p><i class="mdi mdi-map-marker-radius-outline icon-s text-primary mr-2"></i>{{ . | markdownify }}</p>
            </div>
            {{ end }}
          </li>
          {{ end }}
        </ul>
      </div>
    </div>
  </div>
</section>

{{ end }}