{{- /*
Renders an image with the given class, alt, and sizes.
@context {alt} alt text for the image.
@context {image} the image resource.
@context {sizes} each size to include in the srcset.
@context {classes} classes for the image.
*/}}

  {{- $alt := .alt }}
  {{- $image := .image }}
  {{- $sizes := .sizes }}
  {{- $classes := .classes }}

  {{- $srcsetParts := slice }}
  {{- $sizesParts := slice }}
  {{- $len := len $sizes }}

  {{/* Loop through widths to resize images and build attributes */}}
  {{- range $index, $width := $sizes }}
    {{- $resizeSpec := printf "%dx webp q90" $width }}
    {{- $resized := ($image.Resize $resizeSpec) }}

    {{- $srcsetParts = $srcsetParts | append (printf "%s %dw" $resized.RelPermalink $width) }}

    {{- /* Build sizes: media query for all but the last width */}}
    {{- if lt $index (sub $len 1) }}
      {{- $nextWidth := index $sizes (add $index 1) }}
      {{- $sizesParts = $sizesParts | append (printf "(max-width: %dpx) %dpx" $nextWidth $width) }}
    {{- else }}
      {{- $sizesParts = $sizesParts | append (printf "%dpx" $width) }}
    {{- end }}
  {{- end }}

  {{- $smallestWidth := index $sizes 0 }}
  {{- $smallestResizeSpec := printf "%dx webp q90" $smallestWidth }}
  {{- $smallest := ($image.Resize $smallestResizeSpec) }}
  {{- $src := $smallest.RelPermalink }}
<img class="{{ delimit $classes " " }}"
        src="{{ $src }}"
        srcset="{{ delimit $srcsetParts ", " }}"
        sizes="{{ delimit $sizesParts ", " }}"
        alt="{{ $alt }}"
>