{{ define "main" }}
<article class="page">
  <div class="container">
    <div class="fewo-header">
      <h1>{{ .Title }}</h1>
      <p class="fewo-meta">
        {{ with .Params.groesse }}<span>{{ . }}</span>{{ end }}
        {{ with .Params.personen }}<span>bis {{ . }} Personen</span>{{ end }}
        {{ with .Params.preis }}<span>ab {{ . }} € / Nacht</span>{{ end }}
      </p>
    </div>

    {{ with .Params.bilder }}
    <div class="slider slider--quad lightbox-gallery">
      <button type="button" class="slider-arrow slider-prev" aria-label="Zurück">&#10094;</button>
      <div class="slider-track">
        {{ range $i, $img := . }}
        <a href="{{ $img }}" target="_blank" rel="noopener" class="slider-slide lightbox-trigger">
          <img src="{{ $img }}" alt="{{ $.Title }} – Foto {{ add $i 1 }}" loading="lazy">
        </a>
        {{ end }}
      </div>
      <button type="button" class="slider-arrow slider-next" aria-label="Weiter">&#10095;</button>
    </div>

    <div class="lightbox" hidden>
      <button type="button" class="lightbox-close" aria-label="Schließen">&times;</button>
      <button type="button" class="lightbox-arrow lightbox-prev" aria-label="Vorheriges Bild">&#10094;</button>
      <img class="lightbox-img" src="" alt="">
      <button type="button" class="lightbox-arrow lightbox-next" aria-label="Nächstes Bild">&#10095;</button>
    </div>
    {{ end }}

    <div class="fewo-content">
      {{ .Content }}
    </div>

    {{ with .Params.ausstattung }}
    <section class="ausstattung">
      <h2>Ausstattung</h2>
      <div class="spec-grid">
        {{ range . }}
        <div class="spec-block">
          <h3>{{ .titel }}</h3>
          <ul>
            {{ range .punkte }}<li>{{ . }}</li>{{ end }}
          </ul>
        </div>
        {{ end }}
      </div>
      <p class="ausstattung-hinweis">Allgemeine Ausstattung (Sicherheit, Eigenschaften, für die Kleinen), Umfeld (Garten, Freizeit, Entfernungen) und weitere gemeinsame Ausstattung finden Sie unter <a href="/ferienwohnungen/#umfeld">Allgemein, Umfeld &amp; gemeinsame Ausstattung</a> aller Ferienwohnungen.</p>
    </section>
    {{ end }}

    {{ with .Params.belegungsplan }}
    <div class="buchung">
      <h2>Verfügbarkeit &amp; Buchung</h2>
      <p>
        <a href="{{ . }}" target="_blank" rel="noopener" class="btn btn-primary">
          Belegungsplan &amp; Buchung öffnen
        </a>
      </p>
    </div>
    {{ end }}
  </div>
</article>
{{ end }}