{{- /* Carousel: the About page. Slides come from `slides` in front matter, each an image resource plus a quote. */ -}}
{{ define "main" }}
<h1 class="sr-only">{{ .Title }}</h1>
{{ $n := len .Params.slides }}
<section class="carousel" aria-roledescription="carousel" aria-label="{{ .Title }}">
  {{- /* A meta row above the slides, like the post meta row above a title. Shown once the script runs. */}}
  <div class="carousel-controls" hidden>
    <button type="button" class="carousel-button" data-step="-1" aria-label="Previous slide">&larr;</button>
    <span class="carousel-count" aria-live="polite"><span class="carousel-index">1</span> / {{ $n }}</span>
    <button type="button" class="carousel-button" data-step="1" aria-label="Next slide">&rarr;</button>
  </div>
  <div class="carousel-track" tabindex="0" aria-label="Slides">
    {{ range $i, $s := .Params.slides }}
      {{ with $.Resources.Get $s.image }}
        {{ $img := . }}
        {{ if gt .Width 1536 }}{{ $img = .Resize "1536x" }}{{ end }}
        <figure class="slide" aria-roledescription="slide" aria-label="{{ add $i 1 }} of {{ $n }}">
          <img class="slide-image" src="{{ $img.RelPermalink }}" width="{{ $img.Width }}" height="{{ $img.Height }}" alt=""{{ if $i }} loading="lazy"{{ end }}>
          <blockquote class="slide-quote">
            <p>{{ $s.quote }}</p>
            <cite class="slide-cite">{{ $s.cite }}</cite>
          </blockquote>
        </figure>
      {{ end }}
    {{ end }}
  </div>
</section>
{{ end }}

{{ define "scripts" }}{{ partial "script.html" "js/carousel.js" }}{{ end }}