{{ define "main" }}
<article class="container py-5">
  <div class="row justify-content-center">
    <div class="col">
      <h1 class="display-5 fw-bold mb-4">{{ .Title }}</h1>
      <div class="content-body mb-4">
        {{ .Content }}
      </div>

      <div class="row row-cols-2 row-cols-md-3 row-cols-lg-4 g-4">
        {{ range $index, $image := .Resources.ByType "image" }}
          {{ $thumb := $image.Fill "400x300 Center" }}
          {{ $caption := $image.Params.caption }}
          {{ $modalID := printf "gallery-image-%d" $index }}
          <div class="col">
            <a href="#" class="text-decoration-none" role="button"
               data-bs-toggle="modal" data-bs-target="#{{ $modalID }}">
              <div class="card h-100">
                <img src="{{ $thumb.RelPermalink }}"
                     width="{{ $thumb.Width }}" height="{{ $thumb.Height }}"
                     class="card-img-top" loading="lazy"
                     alt="{{ if $caption }}{{ $caption }}{{ else }}{{ $image.Name }}{{ end }}">
                {{ if $caption }}
                  <div class="card-body py-2">
                    <p class="card-text small text-center mb-0">{{ $caption }}</p>
                  </div>
                {{ end }}
              </div>
            </a>
          </div>

          <div class="modal fade" id="{{ $modalID }}" tabindex="-1"
               aria-labelledby="{{ $modalID }}-label" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered modal-lg">
              <div class="modal-content">
                {{ if $caption }}
                  <div class="modal-header">
                    <h5 class="modal-title" id="{{ $modalID }}-label">{{ $caption }}</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                {{ else }}
                  <div class="modal-header border-0 pb-0">
                    <button type="button" class="btn-close ms-auto" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                {{ end }}
                <div class="modal-body text-center pt-0">
                  <img src="{{ $image.RelPermalink }}" class="img-fluid"
                       alt="{{ if $caption }}{{ $caption }}{{ else }}{{ $image.Name }}{{ end }}">
                </div>
                <div class="modal-footer justify-content-center">
                  <a href="{{ $image.RelPermalink }}" target="_blank" rel="noopener" class="small">
                    View full size &#8599;
                  </a>
                </div>
              </div>
            </div>
          </div>
        {{ end }}
      </div>
    </div>
  </div>
</article>
{{ end }}