{{ $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" }}
{{ $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 fileExists (add `assets/` (string $imagePath)) }}
  {{ $assetImage = true }}
{{ end }}
<!-- /check asset image -->

<!-- image static/CDN -->
{{ if or (hasPrefix $imagePath "http") (fileExists (add `static/` (string $imagePath))) }}
  <div 
    loading="{{ .Loading }}"
    decoding="async"
    style="background-image: url('{{ $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`) }}
      <div
        style="background-image: url('{{ $image.RelPermalink }}')"
        loading="{{ $loading }}"
        decoding="async"
        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) }}


        <div
          {{ if $placeholder }}
            style="background-image: 'data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}'"
            data-src={{ $imageWebp.RelPermalink }}
          {{ else }}
            src="{{ $imageWebp.RelPermalink }}" loading="{{ $loading }}"
            decoding="async"
          {{ 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) }}


        <div
          {{ 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 }}

          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) }}


          <div
            {{ if $placeholder }}
              src="data:image/jpeg;base64,{{ $placeholderImage.Content | base64Encode }}"
              data-src={{ $imageFallback.RelPermalink }}
            {{ else }}
              loading="{{ $loading }}" decoding="async"
              style="background: url('{{ $imageFallback.RelPermalink }}')"
            {{ end }}class="{{ if $placeholder }}
              lazy
            {{ end }} {{ $class }} img"
            alt="{{ .Alt }}" />
      {{ end }}
      <!-- end image processing -->
    {{ end }}
    <!-- end single image -->
  {{ end }}


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