{{ $image:= . }}
{{ $imagePath:= .Src }}
{{ $class:= .Class }}
{{ $size:= .Size }}
{{ $alt:= .Alt }}
{{ $displayXL:= .DisplayXL | default "1110x" }}
{{ $displayLG:= .DisplayLG | default "700x" }}
{{ $displayMD:= .DisplayMD | default "600x" }}
{{ $displaySM:= .DisplaySM | default "545x" }}
{{ $resize:= .Resize | default true }}
{{ $loading:= .Loading | default "lazy" }}
{{ $fetchpriority:= .FetchPriority | default "" }}
{{ $context:= .Context | default . }}
{{ $contentImage:= false }}
{{ $assetImage:= false }}
{{ $sizeValue:= index (split $size ` `) 0 }}
{{ $height:= index (split $sizeValue `x`) 1 }}
{{ $width:= index (split $sizeValue `x`) 0 }}
{{ $webp:= .Webp | default true }}
{{ $command:= .Command | default "Resize" }}
{{ $placeholder:= .Placeholder | default false }}
{{ $placeholderQuality:= "40x q20" }}


<!-- check content image  -->
{{ with $context.Resources.GetMatch $imagePath }}
  {{ $contentImage = true }}
{{ end }}
<!-- /check content image -->

<!-- check asset image -->
{{ if and (not (strings.HasPrefix $imagePath "http")) (fileExists (add `assets/` (string $imagePath))) }}
  {{ $assetImage = true }}
{{ end }}
<!-- /check asset image -->

<!-- image static/CDN -->
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
  <img
    loading="{{ $loading }}"
    decoding="async"
    {{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
    src="{{ $imagePath | absURL }}"
    alt="{{ .Alt }}"
    class="{{ $class }} img"
    height="{{ $height }}"
    width="{{ $width }}" />
{{ else }}
  <!-- /image cdn -->

  <!-- check file existence -->
  {{ if or $assetImage $contentImage }}
    {{ if $assetImage }}
      {{ $image = resources.Get $imagePath }}
    {{ else if $contentImage }}
      {{ $image = $context.Resources.GetMatch $imagePath }}
    {{ end }}


    <!-- image extension -->
    {{ $imageExt := path.Ext $image }}


    <!-- image height, width (if not svg) -->
    {{ if eq $imageExt `.svg` }}
      {{ .Scratch.Set "image-height" "" }}
      {{ .Scratch.Set "image-width" "" }}
    {{ else }}
      {{ .Scratch.Set "image-height" $image.Height }}
      {{ .Scratch.Set "image-width" $image.Width }}
    {{ end }}
    {{ $imageHeight:= .Scratch.Get "image-height" }}
    {{ $imageWidth:= .Scratch.Get "image-width" }}


    <!-- gif/svg image -->
    {{ if or (eq $imageExt `.gif`) (eq $imageExt `.svg`) }}
      <img
        src="{{ $image.RelPermalink }}"
        loading="{{ $loading }}"
        decoding="async"
        {{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
        alt="{{ .Alt }}"
        class="{{ $class }} img"
        width="{{ $width }}"
        height="{{ $height }}" />
    {{ else }}
      <!-- single image -->
      {{ if $size }}
        <!-- resize -->
        {{ $imageFallback:= $image.Resize $size }}
        {{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
        {{ if not $webp }}
          {{ $imageWebp = $image.Resize (string $size) }}
        {{ end }}
        <!-- fit -->
        {{ if eq $command "Fit" }}
          {{ $imageFallback = $image.Fit $size }}
          {{ $imageWebp = $image.Fit (add (string $size) " webp") }}
          {{ if not $webp }}
            {{ $imageWebp = $image.Fit (string $size) }}
          {{ end }}
          <!-- fill -->
        {{ else if eq $command "Fill" }}
          {{ $imageFallback = $image.Fill $size }}
          {{ $imageWebp = $image.Fill (add (string $size) " webp") }}
          {{ if not $webp }}
            {{ $imageWebp = $image.Fill (string $size) }}
          {{ end }}
          <!-- crop -->
        {{ else if eq $command "Crop" }}
          {{ $imageFallback = $image.Crop $size }}
          {{ $imageWebp = $image.Crop (add (string $size) " webp") }}
          {{ if not $webp }}
            {{ $imageWebp = $image.Crop (string $size) }}
          {{ end }}
        {{ end }}


        <!-- placeholder -->
        {{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}


        <img
          {{ if $placeholder }}
            src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
            data-src={{ $imageWebp.RelPermalink }}
          {{ else }}
            src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
            decoding="async"
          {{ end }}
          {{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
          alt="{{ .Alt }}"
          class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
          width="{{- with $width -}}
            {{- . -}}
          {{- else -}}
            {{- $imageWebp.Width -}}
          {{- end -}}
          "
          height="{{- with $height -}}
            {{- . -}}
          {{- else -}}
            {{- $imageWebp.Height -}}
          {{- end -}}
          "
          onerror="this.onerror='null';
          this.src='{{ $imageFallback.RelPermalink }}';" />

        <!-- if image size less then 500x and size not defined -->
      {{ else if or (lt ($image.Width) 500) (not $resize) }}
        {{ $size:= add (add (string $image.Width) "x") (string $image.Height) }}
        <!-- resize -->
        {{ $imageWebp:= $image.Resize (add (string $size) " webp") }}
        {{ if not $webp }}
          {{ $imageWebp = $image.Resize (string $size) }}
        {{ end }}
        <!-- fit -->
        {{ if eq $command "Fit" }}
          {{ $imageWebp = $image.Resize (add (string $size) " webp") }}
          {{ if not $webp }}
            {{ $imageWebp = $image.Resize (string $size) }}
          {{ end }}
          <!-- fill -->
        {{ else if eq $command "Fill" }}
          {{ $imageWebp = $image.Resize (add (string $size) " webp") }}
          {{ if not $webp }}
            {{ $imageWebp = $image.Resize (string $size) }}
          {{ end }}
          <!-- crop -->
        {{ else if eq $command "Crop" }}
          {{ $imageWebp = $image.Resize (add (string $size) " webp") }}
          {{ if not $webp }}
            {{ $imageWebp = $image.Resize (string $size) }}
          {{ end }}
        {{ end }}


        <!-- placeholder -->
        {{ $placeholderImage := ($imageWebp.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}


        <img
          {{ if $placeholder }}
            src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
            data-src={{ $imageWebp.RelPermalink }} alt="placeholder"
          {{ else }}
            src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
            decoding="async" alt="{{ .Alt }}"
          {{ end }}
          {{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
          class="{{ if $placeholder }}lazy{{ end }} {{ $class }} img"
          width="{{- with $width -}}
            {{- . -}}
          {{- else -}}
            {{- $imageWebp.Width -}}
          {{- end -}}
          "
          height="{{- with $height -}}
            {{- . -}}
          {{- else -}}
            {{- $imageWebp.Height -}}
          {{- end -}}
          "
          onerror="this.onerror='null';this.src='{{ $image.RelPermalink }}';" />
      {{ else }}
        <!-- /if image size less then 500x and size not defined -->

        <!-- image processing for multiple device -->
        {{ $imageFallback:= $image.Resize $displayXL }}
        {{ $imageXL:= $image.Resize (add $displayXL " webp") }}
        {{ $imageLG:= $image.Resize (add $displayLG " webp") }}
        {{ $imageMD:= $image.Resize (add $displayMD " webp") }}
        {{ $imageSM:= $image.Resize (add $displaySM " webp") }}
        {{ if not $webp }}
          {{ $imageXL = $image.Resize $displayXL }}
          {{ $imageLG = $image.Resize $displayLG }}
          {{ $imageMD = $image.Resize $displayMD }}
          {{ $imageSM = $image.Resize $displaySM }}
        {{ end }}


        <!-- placeholder -->
        {{ $placeholderImage := ($imageFallback.Resize $placeholderQuality) | images.Filter (images.GaussianBlur 5) }}


        <picture>
          <source
            {{ if $placeholder }}
              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
              data-srcset={{ $imageFallback.RelPermalink }}
            {{ else }}
              srcset="{{ $imageSM.RelPermalink }}"
            {{ end }}
            media="(max-width: 575px)" />
          <source
            {{ if $placeholder }}
              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
              data-srcset={{ $imageFallback.RelPermalink }}
            {{ else }}
              srcset="{{ $imageMD.RelPermalink }}"
            {{ end }}
            media="(max-width: 767px)" />
          <source
            {{ if $placeholder }}
              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
              data-srcset={{ $imageFallback.RelPermalink }}
            {{ else }}
              srcset="{{ $imageLG.RelPermalink }}"
            {{ end }}
            media="(max-width: 991px)" />
          <source
            {{ if $placeholder }}
              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
              data-srcset={{ $imageFallback.RelPermalink }}
            {{ else }}
              srcset="{{ $imageXL.RelPermalink }}"
            {{ end }} />
          <img
            {{ if $placeholder }}
              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
              data-src={{ $imageFallback.RelPermalink }}
            {{ else }}
              loading="{{ $loading }}" decoding="async"
              src="{{ $imageFallback.RelPermalink }}"
            {{ end }}
            {{ if $fetchpriority }}fetchpriority="{{ $fetchpriority }}"{{ end }}
            class="{{ if $placeholder }}
              lazy
            {{ end }} {{ $class }} img"
            alt="{{ .Alt }}"
            width="{{ $image.Width }}"
            height="{{ $image.Height }}" />
        </picture>
      {{ end }}
      <!-- end image processing -->
    {{ end }}
    <!-- end single image -->
  {{ end }}


  <!-- end check file existence -->
{{ end }}