iwz/layouts/ferienwohnungen/single.html

{{ 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 := . }}
        {{ $src := $img }}
        {{ $titel := printf "%s – Foto %d" $.Title (add $i 1) }}
        {{ if reflect.IsMap $img }}
          {{ $src = $img.bild }}
          {{ with $img.titel }}{{ $titel = . }}{{ end }}
        {{ end }}
        <a href="{{ $src }}" target="_blank" rel="noopener" class="slider-slide lightbox-trigger">
          <img src="{{ $src }}" alt="{{ $titel }}" title="{{ $titel }}" 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>
      <div class="belegungsplan-toggle">
        <button type="button" class="btn btn-primary" id="belegungsplan-btn" aria-expanded="false" aria-controls="belegungsplan-frame">
          Belegungsplan – hier freie Kapazitäten einsehen
        </button>
        <div class="belegungsplan-frame" id="belegungsplan-frame" data-src="{{ . }}" hidden></div>
      </div>
    </div>
    {{ end }}
  </div>
</article>
{{ end }}