{{ define "main" }}
<div class="container">
  <h1>{{ .Title }}</h1>
  {{ .Content }}

  <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="https://www.webplanner.de/tools/?76703072363837353064343069" hidden></div>
  </div>

  <div class="fewo-grid">
    {{ range .Pages }}
    <div class="fewo-card">
      {{ with .Params.bild }}
      <img src="{{ . }}" alt="{{ $.Title }}" class="fewo-card-img">
      {{ end }}
      <div class="fewo-card-body">
        <h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
        <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>
        {{ with .Params.teaser }}<p>{{ . }}</p>{{ end }}
        <a href="{{ .RelPermalink }}" class="btn btn-primary">Mehr erfahren</a>
      </div>
    </div>
    {{ end }}
  </div>

  {{ if or .Params.allgemein .Params.umfeld .Params.gemeinsam }}
  <div class="umfeld" id="umfeld">
    <p class="umfeld-intro">Diese Ausstattung und Umgebungsinfos gelten für alle drei Ferienwohnungen gleichermaßen.</p>

    {{ with .Params.allgemein }}
    <section class="umfeld-gruppe">
      <h2>Allgemein</h2>
      <div class="spec-grid">
        {{ range . }}
        <div class="spec-block">
          <h3>{{ .titel }}</h3>
          <ul>
            {{ range .punkte }}<li>{{ . }}</li>{{ end }}
          </ul>
        </div>
        {{ end }}
      </div>
    </section>
    {{ end }}

    {{ with .Params.umfeld }}
    <section class="umfeld-gruppe">
      <h2>Umfeld</h2>
      <div class="spec-grid">
        {{ range . }}
        <div class="spec-block">
          <h3>{{ .titel }}</h3>
          <ul>
            {{ range .punkte }}<li>{{ . }}</li>{{ end }}
          </ul>
        </div>
        {{ end }}
      </div>
    </section>
    {{ end }}

    {{ with .Params.gemeinsam }}
    <section class="umfeld-gruppe">
      <h2>Gemeinsame Ausstattung</h2>
      <div class="spec-grid">
        {{ range . }}
        <div class="spec-block">
          <h3>{{ .titel }}</h3>
          <ul>
            {{ range .punkte }}<li>{{ . }}</li>{{ end }}
          </ul>
        </div>
        {{ end }}
      </div>
    </section>
    {{ end }}
  </div>
  {{ end }}
</div>
{{ end }}