{{/* If the file exists and the filename isn't blank, */}}
{{ if (and (fileExists (print .Destination)) (not (eq .Destination ""))) }}

{{/* Grab the image and ensure it has a width property, */}}
{{ $image := resources.Get (print (replace .Destination "assets/" "")) }}

{{/* Set image sizes, these are hardcoded for now, x dictates that images are resized to this width */}}
{{ $xsmallw := default "320x webp" }}
{{ $smallw := default "576x webp" }}
{{ $mediumw := default "768x webp" }}
{{ $largew := default "1280x webp" }}
{{ $xlargew := default "1440x webp" }}
{{ $xxlargew := default "1920x webp" }}
{{ $blurw := default "180x webp q10" }}

{{/* Resize the src image to the given sizes */}}
{{ $data := newScratch }}
{{ $data.Set "xsmall" ($image.Resize $xsmallw) }}
{{ $data.Set "small" ($image.Resize $smallw) }}
{{ $data.Set "medium" ($image.Resize $mediumw) }}
{{ $data.Set "large" ($image.Resize $largew) }}
{{ $data.Set "xlarge" ($image.Resize $xlargew) }}
{{ $data.Set "xxlarge" ($image.Resize $xxlargew) }}
{{ $data.Set "blur" ($image.Resize $blurw) }}

{{/* Add the processed images to the scratch */}}
{{ $xsmall := $data.Get "xsmall" }}
{{ $small := $data.Get "small" }}
{{ $medium := $data.Get "medium" }}
{{ $large := $data.Get "large" }}
{{ $xlarge := $data.Get "xlarge" }}
{{ $xxlarge := $data.Get "xxlarge" }}
{{ $blur := $data.Get "blur" }}

<picture>
  {{ $src_set := "" }}
  {{ $sizes := "" }}
  {{ if ge $image.Width "320" }}
  <source media="(max-width: 319px)" srcset="{{with $xsmall.RelPermalink }}{{.}}{{ end }}">
  {{ $src_set = (print $xsmall.RelPermalink " 319w, ") }}
  {{ $sizes = "(max-width: 319px) 320px, " }}
  {{ end }}
  {{ if ge $image.Width "576" }}
  <source media="(min-width: 320px) and (max-width: 575px)" srcset="{{with $small.RelPermalink }}{{.}}{{ end }}">
  {{ $src_set = (print $src_set $small.RelPermalink " 575w, ") }}
  {{ $sizes = (print $sizes "(min-width: 320px) and (max-width: 575px) 576px, ") }}
  {{ end }}
  {{ if ge $image.Width "768" }}
  <source media="(min-width: 576px) and (max-width: 767px)" srcset="{{with $medium.RelPermalink }}{{.}}{{ end }}">
  {{ $src_set = (print $src_set $medium.RelPermalink " 767w, ") }}
  {{ $sizes = (print $sizes "(min-width: 576px) and (max-width: 767px) 768px, ") }}
  {{ end }}
  {{ if ge $image.Width "1280" }}
  <source media="(min-width: 768px) and (max-width: 1279px)" srcset="{{with $large.RelPermalink }}{{.}}{{ end }}">
  {{ $src_set = (print $src_set $large.RelPermalink " 1279w, ") }}
  {{ $sizes = (print $sizes "(min-width: 768px) and (max-width: 1279px) 1280px, ") }}
  {{ end }}
  {{ if ge $image.Width "1440" }}
  <source media="(min-width: 1280px) and (max-width: 1439px)" srcset="{{with $xlarge.RelPermalink }}{{.}}{{ end }}">
  {{ $src_set = (print $src_set $xlarge.RelPermalink " 1439w, ") }}
  {{ $sizes = (print $sizes "(min-width: 1280px) and (max-width: 1439px) 1440px, ") }}
  {{ end }}
  {{ if ge $image.Width "1920" }}
  <source media="(min-width: 1440px)" srcset="{{with $xxlarge.RelPermalink }}{{.}}{{ end }}">
  {{ $src_set = (print $src_set $xxlarge.RelPermalink " 1920w, ") }}
  {{ $sizes = (print $sizes "(min-width: 1440px) 1920px, ") }}
  {{ end }}

  <img src="data:image/webp;base64,{{ $blur.Content | base64Encode }}" height="{{ $image.Height }}"
    srcset="{{ $src_set }}" data-src="{{ $image.RelPermalink }}" sizes="{{ $sizes }}" width="{{ $image.Width }}"
    loading="lazy" {{- if .Text -}} alt="{{ .Text | safeHTML }}" {{ end }} {{- if .Title -}}
    title="{{ .Title | safeHTML }}" {{ end }} {{- if .Class -}} class="{{ .Class | safeHTML }}" {{ end }}>

</picture>

{{ else }}
<!-- In case the image is not found on the filesystem for some reason... -->
<img class="external-image unoptimized" src="{{ .Destination | safeURL }}" {{- if .Text -}} alt="{{ .Text }}" {{ end }}
  {{- if .Title -}} title="{{ .Title }}" {{ end }} loading="lazy" />
{{ end }}