{{- /* responsive-image.html — safe image renderer.
       Resize/Fit only work on raster resources (png/jpg/webp/gif). This partial:
         - resizes + builds srcset for raster Hugo resources,
         - falls back to a plain <img> for SVG resources or static paths,
         - falls back to a CSS gradient placeholder when nothing resolves.
       A missing image can therefore NEVER break the build.

       Call with a dict. Provide ONE of:
         resource : a Hugo resource (assets/ or page bundle), OR
         src      : a string path (e.g. "/images/logo.svg")
       Optional: alt, class, loading ("lazy"|"eager"), sizes, widths (slice of ints). */ -}}
{{- $r := .resource -}}
{{- $src := .src -}}
{{- $alt := .alt | default "" -}}
{{- $class := .class | default "" -}}
{{- $loading := .loading | default "lazy" -}}
{{- $sizes := .sizes | default "100vw" -}}
{{- $widths := .widths | default (slice 400 800 1200) -}}

{{- if $r -}}
  {{- $sub := $r.MediaType.SubType -}}
  {{- if in (slice "png" "jpg" "jpeg" "webp" "gif") $sub -}}
    {{- $ow := $r.Width -}}
    {{- $srcset := slice -}}
    {{- range $widths -}}
      {{- if le . $ow -}}
        {{- $img := $r.Resize (printf "%dx" .) -}}
        {{- $srcset = $srcset | append (printf "%s %dw" $img.RelPermalink $img.Width) -}}
      {{- end -}}
    {{- end -}}
    {{- $fallback := $r -}}
    {{- if gt $ow 1200 -}}{{- $fallback = $r.Resize "1200x" -}}{{- end -}}
    <img
      src="{{ $fallback.RelPermalink }}"
      {{ with $srcset }}srcset="{{ delimit . ", " }}" sizes="{{ $sizes }}"{{ end }}
      width="{{ $fallback.Width }}" height="{{ $fallback.Height }}"
      alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"
      {{ with $class }}class="{{ . }}"{{ end }}>
  {{- else -}}
    <img src="{{ $r.RelPermalink }}" alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"{{ with $class }} class="{{ . }}"{{ end }}>
  {{- end -}}
{{- else if $src -}}
  <img src="{{ $src | relURL }}" alt="{{ $alt }}" loading="{{ $loading }}" decoding="async"{{ with $class }} class="{{ . }}"{{ end }}>
{{- else -}}
  <div class="img-placeholder {{ $class }}" role="img" aria-label="{{ $alt }}"></div>
{{- end -}}