{{ define "main" }}
  {{ .Content }}

  <h2>Aankomende evenementen</h2>
    {{ $upcoming_events := .Site.Data.evenementen.kalender }}
    {{ $upcoming_events := sort $upcoming_events ".date_start" "asc" }}
    {{ range first 50 (where $upcoming_events "date_start" "gt" (dateFormat "2006-01-02" now)) }}
    <div id="{{ anchorize (.date_start | dateFormat "2006-01-02") }}-{{ anchorize .name }}" style="border: 1px solid darkgray; border-radius: 2px; padding:10px; margin:2px;">
      <h3>{{ .date_start | dateFormat "02-01-2006" }} - {{ .name }}</h3>
      {{ with .organizer }}<p><em>Georganizeerd door {{ .}}</em></p>{{ end }}
      {{ if ne .date_start .date_end }}
      <p>Event van meerdere dagen: <time class="g time" datetime="{{ dateFormat "2006-01-02" .date_start }}">{{ .date_start | dateFormat "02-01-2006" }}</time> t/m <time class="g time" datetime="{{ dateFormat "2006-01-02" .date_end }}">{{ .date_end | dateFormat "02-01-2006" }}</time></p>
      {{ end }}
      {{ $event_location := .event_location | default "Locatie onbekend" }}
      {{ with .event_address }}
      <h4>Locatie en adres</h4>
      <p><strong>{{ $event_location }}</strong><br>{{ with .street_address }}{{ . }}{{ end }}<br>{{ with .postal_code }}{{ . }}{{ end }}{{ with .city }}, {{ . }}{{ end }}{{ with .country }}, {{ . }}{{ end }}</p>
      <a href="https://www.openstreetmap.org/search?query={{ with .street_address }}{{ . | urlquery }}{{ end }},{{ with .postal_code }}{{ . | urlquery }}{{ end }}{{ with .city }},%20{{ . | urlquery }}{{ end }}" target="_blank" rel="noopener">{{ partial "show-svg-icon.html" (dict "context" . "icon" "map-location-dot") }}</a>
      {{ end }}
      {{ with .link_external }}
      <p>&raquo; <a href="{{ . }}" rel="nofollow">Meer informatie (externe link)</a></p>
      {{ end }}
      </div>
    {{ end }}
{{ end }}