{{/*
  Bootstrap Carousel
  A slideshow component for cycling through images like a carousel.
  https://getbootstrap.com/docs/5.1/components/carousel/

  Serve responsive images
  https://web.dev/serve-responsive-images/
  https://cloudfour.com/thinks/responsive-images-the-simple-way/
  https://responsivebreakpoints.com/

  Lazy loading
  https://github.com/aFarkas/lazysizes

  Fixing The Resizing Problem

  Setting Height And Width On Images Is Important Again
  https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

  New aspect-ratio CSS property supported in Chromium, Safari Technology Preview, and Firefox Nightly
  https://web.dev/aspect-ratio/

  Image descriptions

  Images are looked for in the page's own bundle first, then in assets. Only
  page resources can carry metadata, so that is the only way to give a slide a
  real description:

    resources:
      - src: "carousel/skyline.jpg"
        params:
          alt: "The city skyline at dusk"

  An image with no description is treated as decorative - it gets alt="" so
  screen readers skip it rather than reading out a filename - and the build
  warns, because a photograph in a carousel usually does carry meaning.

  Parameters:

    - "imagesPattern" to pass to resources.Match
    - "aspectRatio" to be used in aspect-ratio CSS property (default "16/9")
    - "crossFade" boolean to animate slides with a fade transition instead of a slide (default false)
    - "withIndicators" boolean to add the indicators to the carousel, alongside the controls (default false) 
    - "withControls" boolean to add the previous and next controls (default false)

  Example:

    partial "carousel.html" (dict "context" . "imagesPattern" "carousel/home/*.png" "aspectRatio" "8/3" "withControls" true)

*/}}

{{/* warnf "Carousel imagesPattern: '%+v'" .imagesPattern */}}
{{/* warnf "Carousel aspectRatio: '%+v'" .aspectRatio */}}
{{/* warnf "Carousel crossFade: '%+v'" .crossFade */}}
{{/* warnf "Carousel withIndicators: '%+v'" .withIndicators */}}
{{/* warnf "Carousel withControls: '%+v'" .withControls */}}

{{/* The page's own bundle first, assets second. Only page resources can carry
     front matter metadata, so this is what makes a described slide possible at
     all; the assets fallback keeps every existing site working unchanged. */}}
{{ $page := .context.Page }}
{{ $images := or ($page.Resources.Match .imagesPattern) (resources.Match .imagesPattern) }}

{{/* Resolve each description once - the indicators and the slides need the
     same answer, and it should not be computed twice.

     .Title is not a description: Hugo falls back to the resource name when no
     title is set, so it holds a filename ("skyline.jpg") for a page resource
     and a path ("/carousel/skyline.jpg") for an asset. Comparing it against
     .Name is what tells a real title apart from that default. */}}
{{ $slides := slice }}
{{ range $images }}
  {{ $alt := "" }}
  {{ with .Params.alt }}{{ $alt = . }}{{ end }}
  {{ if and (not $alt) (ne .Title .Name) }}{{ $alt = .Title }}{{ end }}
  {{ if not $alt }}
    {{ warnf "Carousel: %q on %s has no description - rendering it as decorative (alt=\"\"). Add params.alt for it under `resources` in the page front matter." .Name $page.RelPermalink }}
  {{ end }}
  {{ $slides = $slides | append (dict "image" . "alt" $alt) }}
{{ end }}

<div id="bootstrapCarousel" class="carousel slide {{ if (.crossFade) }}carousel-fade{{ end }}" data-bs-ride="carousel">
  {{ if .withIndicators }}
    <div class="carousel-indicators">
      {{/* The label names the button, not the picture - "Slide 2" is what a
           user needs when tabbing through the controls, with the image's
           description appended when it has one. */}}
      {{ range $index, $slide := $slides }}
        <button type="button" data-bs-target="#bootstrapCarousel" data-bs-slide-to="{{ $index }}"
                {{ if (eq $index 0) }}
                  class="active" aria-current="true"
                {{ end }}
                aria-label="Slide {{ add $index 1 }}{{ with $slide.alt }}: {{ . }}{{ end }}">
        </button>
      {{ end }}
    </div>
  {{ end }}

  {{ with $slides }}
  <div class="carousel-inner">
    {{ range $index, $slide := $slides }}
      {{ $image := $slide.image -}}
      <div class="carousel-item{{ if (eq $index 0) }} active{{ end }}">
        {{/* The carousel is full-bleed (sizes="100vw"), so it wants wider tiers
             than the content column does - but only those the source can
             actually fill. Resizing above the original width upscales: Hugo
             writes a genuinely larger file with no extra detail, which for a
             300x200 source meant 8 KiB in and 94 KiB out. The image's own width
             is always the top tier, so nothing is lost. */ -}}
        {{ $targets := slice 320 640 960 1280 1920 2560 3200 -}}
        {{ $variants := slice -}}
        {{ range $target := $targets -}}
          {{ if lt $target $image.Width -}}
            {{ $variants = $variants | append ($image.Resize (printf "%dx webp" $target)) -}}
          {{ end -}}
        {{ end -}}
        {{ $variants = $variants | append ($image.Resize (printf "%dx webp" $image.Width)) -}}

        {{/* Fallback for the src attribute: the largest tier that stays within
             a typical laptop width, so browsers that ignore srcset do not pull
             the biggest file. */ -}}
        {{ $default := index $variants 0 -}}
        {{ $srcset := slice -}}
        {{ range $variant := $variants -}}
          {{ if le $variant.Width 1280 }}{{ $default = $variant }}{{ end -}}
          {{ $srcset = $srcset | append (printf "%s %dw" $variant.RelPermalink $variant.Width) -}}
        {{ end -}}
        <img class="d-block w-100"
             {{ if (ne $index 0) }} loading="lazy" {{ end }}
             style="width: 100%; height: auto; aspect-ratio: {{ $.aspectRatio | default `16/9` | safeCSS }};"
             src="{{ $default.RelPermalink }}"
             width="{{ $default.Width }}" height="{{ $default.Height }}"
             srcset="{{ delimit $srcset ", " }}"
             sizes="100vw"
             alt="{{ $slide.alt }}">
      </div>
    {{ end }}
  </div>
  {{ else }}
    {{ warnf "Carousel imagesPattern: resources.Match '%+v' returned no images!" .imagesPattern }}
  {{ end }}

  {{ if .withControls }}
  <button class="carousel-control-prev" type="button" data-bs-target="#bootstrapCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#bootstrapCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
  {{ end }}
</div>