{{ define "main" }}
  {{ $cats := .Params.kategorien | default slice }}
  {{ $cat := index $cats 0 }}

  <!-- Hero-Band -->
  <section class="op-detail-hero uk-section uk-section-small">
    <div class="uk-container">
      <p class="op-breadcrumb">
        <a href="{{ "/schauplaetze/" | relLangURL }}">{{ i18n "breadcrumbLocations" }}</a>
        {{ with $cat }} &raquo; <a href="{{ (printf "/kategorien/%s/" (urlize .)) | relLangURL }}">{{ partial "kat-label.html" . }}</a>{{ end }}
      </p>
      <h1 class="uk-margin-small-top uk-margin-remove-bottom">{{ .Title }}</h1>
      {{ with .Params.subtitle }}<p class="uk-text-lead uk-margin-small-top">{{ . }}</p>{{ end }}
    </div>
  </section>

  <section class="uk-section">
    <div class="uk-container">
      <div class="uk-grid-large" uk-grid>

        <!-- Inhalt -->
        <div class="uk-width-2-3@m">
          <div class="op-content-box">
            {{ $img := .Resources.GetMatch "{cover,*featured*,image}.*" }}
            {{ with $img }}<img class="uk-margin-small-bottom" src="{{ .RelPermalink }}" alt="{{ $.Title }}" loading="lazy">{{ end }}
            {{ with .Params.bildnachweis }}<p class="op-bildnachweis uk-margin-bottom">{{ . | safeHTML }}</p>{{ end }}
            {{ .Content }}
            {{ with .Params.quelle }}
            <p class="op-quelle-head">{{ i18n "externalSource" }}</p>
            <p class="op-meta uk-margin-remove-top">{{ partial "linkify.html" . }}</p>
            {{ end }}
          </div>
        </div>

        <!-- Sidebar -->
        <div class="uk-width-1-3@m">
          {{ if and .Params.lat .Params.lng }}
          <div class="op-side-box">
            {{ partial "karte.html" (dict "pages" (slice .) "klein" true) }}
            <div class="op-side-box__pad">
              {{ with .Params.address }}<p class="uk-margin-remove"><span uk-icon="icon: location"></span> {{ . }}</p>{{ end }}
              <a class="op-directions" target="_blank" rel="noopener"
                 href="https://www.openstreetmap.org/?mlat={{ .Params.lat }}&mlon={{ .Params.lng }}#map=17/{{ .Params.lat }}/{{ .Params.lng }}">↳ {{ i18n "directions" }}</a>
            </div>
          </div>
          {{ end }}

          {{ if or $cats .Params.datum }}
          <div class="op-side-box">
            <div class="op-side-box__pad">
              {{ range $cats }}
              <span class="op-kategorie" style="background:{{ partial "kat-color.html" . }};color:#fff">{{ partial "kat-label.html" . }}</span>
              {{ end }}
              {{ with .Params.datum }}<p class="op-side-box__date uk-margin-small-top uk-margin-remove-bottom">{{ . }}</p>{{ end }}
            </div>
          </div>
          {{ end }}
        </div>

      </div>

      <p class="uk-margin-medium-top"><a class="uk-button uk-button-text" href="{{ "/schauplaetze/" | relLangURL }}">← {{ i18n "allLocations" }}</a></p>
    </div>
  </section>
{{ end }}