{{ $vlag := .Resources.GetMatch "vlag*" }}
{{ if $vlag }}
<div class="vlag-background" style="
  position: absolute; top: -50px; right: -50px; width: 100%; height: 300px;
  background-image: url('{{ $vlag.RelPermalink }}');
  background-size: cover; background-position: center; opacity: 0.12;
  transform: rotate(25deg); z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 20%, transparent 100%);
"></div>
{{ end }}

{{ $displayTitle := .Title | strings.TrimPrefix "Mantelzorgwoning in " | strings.TrimPrefix "Care home in " }}

<div class="position-relative" style="z-index: 1;">
  <div class="d-flex justify-content-between align-items-start mb-4">
    <div>
      <h1 class="fw-bold mb-0 text-dark">{{ $displayTitle }}</h1>
      {{ if .Params.town }}
        {{ with .Params.provincie }}
        <p class="text-muted mb-0">{{ printf (i18n "town_in_province") . }}</p>
    {{ end }}
    {{ else }}
        <p class="text-muted mb-0">{{ i18n "province_overview" }}</p>
    {{ end }}
    </div>
    
    {{ $wapen := .Resources.GetMatch "wapen*" }}
    {{ with $wapen }}
      <div class="bg-white p-2 rounded shadow-sm border">
        <img src="{{ .RelPermalink }}" alt="{{ i18n "coat_of_arms_of" }} {{ $displayTitle }}" style="height: 70px; width: auto; object-fit: contain;">
      </div>
    {{ end }}
  </div>

  {{ if and .Params.town .Params.stats }}
  <div class="row g-3 mb-4">
    <div class="col-6 col-md-4">
      <div class="p-3 border rounded bg-white bg-opacity-75 text-center shadow-sm">
        <i class="fa-solid fa-users text-primary mb-2"></i>
        <small class="text-uppercase text-muted d-block" style="font-size: 0.7rem; letter-spacing: 1px;">{{ i18n "inhabitants" }}</small>
        <span class="h5 fw-bold">{{ lang.FormatNumber 0 .Params.stats.inwoners }}</span>
      </div>
    </div>
    <div class="col-6 col-md-4">
      <div class="p-3 border rounded bg-white bg-opacity-75 text-center shadow-sm">
        <i class="fa-solid fa-person-cane text-primary mb-2"></i>
        <small class="text-uppercase text-muted d-block" style="font-size: 0.7rem; letter-spacing: 1px;">{{ i18n "seniors" }} (65+)</small>
        <span class="h5 fw-bold">{{ lang.FormatNumber 0 .Params.stats.senioren }}</span>
      </div>
    </div>
    <div class="col-6 col-md-4">
      <div class="p-3 border rounded bg-white bg-opacity-75 text-center shadow-sm">
        <i class="fa-solid fa-ruler-combined text-primary mb-2"></i>
        <small class="text-uppercase text-muted d-block" style="font-size: 0.7rem; letter-spacing: 1px;">{{ i18n "median_plot" }}</small>
        <span class="h5 fw-bold">{{ .Params.stats.mediaan_kavel_m2 }} m²</span>
      </div>
    </div>
  </div>
  {{ end }}

  {{ if and .Params.stats (gt .Params.stats.natura2000_km2 0.1) }}
      {{ $natura := .Params.stats.natura2000_km2 }}
      {{ $totaal := .Params.stats.oppervlakte_km2 }}
      {{ $percentage := (mul (div $natura $totaal) 100) }}
      <div class="alert alert-warning border-0 d-flex align-items-center mb-3 pt-4" role="alert">
        <div>
          <h3 class="h5 mb-1"><strong>Natura 2000: {{ printf "%.2f" $natura }} km² {{ i18n "of_the" }} {{ printf "%.2f" $totaal }} km²</strong></h3>
          <p class="mb-0">
            <i class="fa-solid fa-leaf text-success pe-2"></i>
            {{ printf (i18n "natura_percentage_text") (printf "%.0f" $percentage) $displayTitle | safeHTML }}
          </p>
        </div>
      </div>
  {{ end }}

  <div class="border-0 text-dark mb-5">
    <div>
      <h3 class="h5">
        {{ if .Params.town }}{{ i18n "build_opportunities_in" }}{{ else }}{{ i18n "care_homes_in" }}{{ end }} {{ $displayTitle }}
      </h3>
      <p>
        {{ if .Params.town }}
          {{ printf (i18n "town_intro_text") $displayTitle }}
        {{ else }}
          {{ printf (i18n "province_intro_text") .Title }}
        {{ end }}
      </p>
      <a href="/vergunning/check" class="btn btn-primary btn-lg fw-bold mt-2 d-inline-block shadow-sm">
        <i class="fa-solid fa-tree-city me-2"></i>{{ i18n "check_your_address" }}
      </a>
    </div>
  </div>

  {{ with .Params.kernen }}
  <div class="mb-5 border-top pt-2">
    <h2 class="h5 mb-4 pb-2">{{ i18n "townships_in_municipality" }}</h2>
    <div class="table-responsive">
      <table class="table table-hover align-middle">
        <thead class="table-light">
          <tr>
            <th>{{ i18n "name" }}</th>
            <th class="text-end">{{ i18n "inhabitants" }}</th>
            <th class="text-end pe-3">{{ i18n "surface_area" }}</th>
          </tr>
        </thead>
        <tbody>
          {{ range . }}
          <tr>
            <td class="fw-bold text-secondary">{{ .naam }}</td>
            <td class="text-end">{{ lang.FormatNumber 0 .inwoners }}</td>
            <td class="text-end text-muted small pe-3">{{ printf "%.2f" .oppervlakte_km2 }} km²</td>
          </tr>
          {{ end }}
        </tbody>
      </table>
    </div>
  </div>
  {{ end }}

  {{ if not .Params.town }}
  <div class="row g-4 mb-5">
    <h2 class="h5 mb-3 text-primary border-bottom pb-2">{{ i18n "municipalities_in" }} {{ .Title }}</h2>
    {{ range .Pages.ByTitle }}
      <div class="col-md-6 col-lg-4">
        <a href="{{ .RelPermalink }}" class="text-decoration-none text-dark">
          <div class="card h-100 hover-shadow border-0 bg-light transition">
            <div class="card-body d-flex align-items-center">
              {{ with .Resources.GetMatch "wapen*" }}<img src="{{ .RelPermalink }}" class="me-3" style="height: 40px;">{{ end }}
              <div>
                <h3 class="h6 mb-0 fw-bold">{{ .Title | strings.TrimPrefix "Mantelzorgwoning in " | strings.TrimPrefix "Care home in " }}</h3>
                {{ if .Params.stats }}<small class="text-muted">{{ lang.FormatNumber 0 .Params.stats.inwoners }} {{ i18n "inhabitants_lowercase" }}</small>{{ end }}
              </div>
            </div>
          </div>
        </a>
      </div>
    {{ end }}
  </div>
  {{ end }}
</div>