{{ define "main" }}

  <!-- HERO -->
  <section class="op-section-gelb uk-section uk-section-large">
    <div class="uk-container">
      <div class="uk-grid-large uk-flex-middle" uk-grid>
        <div class="uk-width-2-3@m">
          <h1>{{ with .Params.heroTitle }}{{ . | safeHTML }}{{ else }}Wie erinnern wir <span class="op-marker">gemeinsam</span> an das, was nicht vergessen werden darf?{{ end }}</h1>
        </div>
        <div class="uk-width-1-3@m">
          <div class="op-oeffnungsbox">
            <h2 class="uk-h4 uk-margin-small-bottom">Öffnungszeiten</h2>
            <ul class="uk-list uk-margin-small">
              {{ range site.Params.openingHours }}
                <li><strong>{{ .label }}</strong> · {{ .time }}</li>
              {{ end }}
            </ul>
            {{ with site.Params.openingNote }}<p class="op-meta uk-margin-small">{{ . }}</p>{{ end }}
            <a class="uk-button uk-button-primary" href="{{ site.Params.anfahrtURL | default "#" }}">Anfahrt</a>
          </div>
        </div>
      </div>
    </div>
    <!-- Vollbreiter Wellen-Divider („Vorhang"-Motiv) -->
    <svg class="op-divider uk-margin-large-top" viewBox="0 0 1200 46" preserveAspectRatio="none" aria-hidden="true" focusable="false">
      <path d="M0,46 L0,20 C60,4 120,4 180,20 C240,36 300,36 360,20 C420,4 480,4 540,20 C600,36 660,36 720,20 C780,4 840,4 900,20 C960,36 1020,36 1080,20 C1140,4 1170,4 1200,20 L1200,46 Z" fill="#edf489"/>
    </svg>
  </section>

  <!-- VERANSTALTUNGEN -->
  {{ $veranstaltungen := where site.RegularPages "Section" "veranstaltungen" }}
  {{ with $veranstaltungen }}
  <section class="uk-section">
    <div class="uk-container">
      <h2>Veranstaltungen</h2>
      <div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-match uk-margin-medium-top" uk-grid>
        {{ range first 4 (sort . "Date" "asc") }}
        <div>
          <div class="uk-card uk-card-default uk-card-body">
            {{ with .Params.kategorie }}<span class="op-kategorie">{{ . }}</span>{{ end }}
            <p class="op-card-datum uk-margin-small-top uk-margin-remove-bottom">{{ time.Format "Mon, 2. Jan · 15:04 Uhr" .Date }}</p>
            <h3 class="uk-h5 op-card-titel uk-margin-small"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
            <p class="op-meta uk-margin-remove">{{ .Params.teaser | default .Summary }}</p>
          </div>
        </div>
        {{ end }}
      </div>
      <div class="uk-margin-medium-top">
        <a class="uk-button uk-button-default" href="{{ "/veranstaltungen/" | relLangURL }}">Alle Veranstaltungen</a>
      </div>
    </div>
  </section>
  {{ end }}

  <!-- LEITBILD -->
  <section class="op-section-muted uk-section">
    <div class="uk-container">
      <div class="uk-grid-large uk-flex-middle" uk-grid>
        <div class="uk-width-3-5@m">
          <h2>{{ .Params.leitbildTitle | default "Unser Leitbild" }}</h2>
          {{ with .Params.leitbildLead }}<p class="uk-text-lead">{{ . }}</p>{{ end }}
          {{ .Content }}
          {{ with .Params.leitbildMehrURL }}<a class="uk-button uk-button-text" href="{{ . }}">Mehr erfahren</a>{{ end }}
        </div>
        <div class="uk-width-2-5@m">
          <!-- Bogen-Illustration (Formen-Asset) -->
          <img class="op-bogen" src="{{ "images/formen/BogenGroup_nacht.svg" | relURL }}"
               alt="" role="presentation" width="420" height="290">
        </div>
      </div>
    </div>
  </section>

  <!-- NEUIGKEITEN -->
  {{ $neuigkeiten := where site.RegularPages "Section" "neuigkeiten" }}
  {{ with $neuigkeiten }}
  <section class="uk-section">
    <div class="uk-container">
      <h2>Neuigkeiten</h2>
      <div class="uk-child-width-1-3@m uk-grid-match uk-margin-medium-top" uk-grid>
        {{ range first 3 . }}
        <div>
          <div class="uk-card uk-card-default">
            <div class="uk-card-media-top">
              {{ $img := .Resources.GetMatch "{cover,*featured*,image}.*" }}
              {{ with $img }}
                <img src="{{ .RelPermalink }}" alt="" loading="lazy">
              {{ else }}
                <div class="op-bild op-bild--16-9"><span class="op-bild__label">Bild 16:9</span></div>
              {{ end }}
            </div>
            <div class="uk-card-body">
              <h3 class="uk-h5 op-card-titel"><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
              <p class="op-meta uk-margin-small">{{ with .Params.author }}von {{ . }} · {{ end }}{{ time.Format "2. Jan 2006" .Date }}</p>
              <p class="uk-margin-remove">{{ .Params.teaser | default .Summary }}</p>
            </div>
          </div>
        </div>
        {{ end }}
      </div>
      <div class="uk-margin-medium-top">
        <a class="uk-button uk-button-default" href="{{ "/neuigkeiten/" | relLangURL }}">Alle Neuigkeiten</a>
      </div>
    </div>
  </section>
  {{ end }}

  <!-- BILDERGALERIE -->
  <section class="op-section-muted uk-section">
    <div class="uk-container">
      <h2>Aus der Bildergalerie</h2>
    </div>
    <div class="uk-margin-medium-top uk-container uk-container-expand">
      <div uk-slider="container-expand: true">
        <div class="uk-position-relative">
          <ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid">
            {{ range seq (site.Params.galerieCount | default 6) }}
              <li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie {{ . }}</span></div></li>
            {{ end }}
          </ul>
          <a class="uk-position-center-left uk-position-small op-slidenav" href="#" uk-slidenav-previous uk-slider-item="previous" aria-label="Vorheriges Bild"></a>
          <a class="uk-position-center-right uk-position-small op-slidenav" href="#" uk-slidenav-next uk-slider-item="next" aria-label="Nächstes Bild"></a>
        </div>
        <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
      </div>
    </div>
  </section>

  <!-- NEWSLETTER -->
  <section class="op-section-gelb uk-section">
    <div class="uk-container">
      <div class="uk-grid-large uk-flex-middle" uk-grid>
        <div class="uk-width-1-2@m">
          <h2>Newsletter</h2>
          <p class="uk-text-lead">{{ site.Params.newsletterText | default "Platzhaltersatz: Bleiben Sie über Veranstaltungen und Neuigkeiten auf dem Laufenden." }}</p>
        </div>
        <div class="uk-width-1-2@m">
          <form action="{{ site.Params.newsletterAction | default "#" }}" method="post" novalidate>
            <div class="uk-margin">
              <label class="uk-form-label" for="op-newsletter-mail">E-Mail-Adresse</label>
              <div class="uk-form-controls">
                <input class="uk-input" id="op-newsletter-mail" type="email" name="email"
                       autocomplete="email" placeholder="name@beispiel.de" required>
              </div>
            </div>
            <div class="uk-margin">
              <label>
                <input class="uk-checkbox" type="checkbox" name="datenschutz" required>
                Ich habe die <a href="{{ site.Params.datenschutzURL | default "#" }}">Datenschutzerklärung</a> zur Kenntnis genommen und stimme der Verarbeitung meiner Daten zu.
              </label>
            </div>
            <div class="uk-margin">
              <button class="uk-button uk-button-primary" type="submit">Anmelden</button>
            </div>
          </form>
        </div>
      </div>
    </div>
  </section>

{{ end }}