{{/*
https://github.com/pablotron/hugo-shortcode-ppic

Custom Hugo table shortcode which renders figure elements that support
progressive enhancement.

This short code exists because the figure shortcode in Hugo does not
support the picture element and does not support progressive image
enhancement.
*/}}

{{/* image mime types */}}
{{- $MIME_TYPES := (dict ".webp" "image/webp" ".avif" "image/avif" ".png" "image/png") -}}

{{/* get picture data */}}
{{- $pic := (index $.Page.Params "pics" (.Get 0)) -}}

{{- if (reflect.IsSlice $pic) -}}
  {{- $pic = (dict "sources" $pic) -}}
{{- end -}}

<figure
  id='{{- $pic.id -}}'
  class='{{- $pic.css -}}'
  title='{{- $pic.tip -}}'
>
  <picture>
    {{- if $pic.sources -}}
      {{/* get source count */}}
      {{- $num_sources := len $pic.sources -}}

      {{/* render sources */}}
      {{- range $x, $src := $pic.sources -}}
        {{- $is_map := reflect.IsMap $src -}}

        {{- if $is_map -}}
          {{/* source is a map, reference keys */}}

          {{- if (lt $x (sub $num_sources 1)) -}}
            {{/* emit source tag */}}
            <source
              {{if $src.src}} src='{{- $src.src -}}'{{- end}}
              {{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
              {{if $src.media}} media='{{- $src.media -}}'{{- end}}

              {{if $src.type}}
                type='{{- $src.type -}}'
              {{else}}
                {{/* get file extension */}}
                {{- $ext := path.Ext $src.srcset -}}

                {{if (index $MIME_TYPES $ext)}}
                  type='{{- index $MIME_TYPES $ext -}}'
                {{end}}
              {{- end}}

              {{if (or $pic.tip $src.tip)}} title='{{- default $pic.tip $src.tip -}}'{{- end}}
              {{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
            />
          {{- else -}}
            {{/* emit img tag */}}
            <img
              {{if $src.src}} src='{{- $src.src -}}'{{- end}}
              {{if $src.srcset}} srcset='{{- $src.srcset -}}'{{- end}}
              {{if $src.css}} class='{{- $src.css -}}'{{- end}}
              {{if $src.width}} width='{{- $src.width -}}'{{- end}}
              {{if $src.height}} height='{{- $src.height -}}'{{- end}}

              {{if (or $pic.tip $src.tip)}} alt='{{- default $pic.tip $src.tip -}}'{{- end}}
            />
          {{- end -}}
        {{- else -}}
          {{/* src is a string */}}

          {{- if (lt $x (sub $num_sources 1)) -}}
            {{/* emit source */}}

            {{/* get file extension */}}
            {{- $ext := path.Ext $src -}}

            <source
              srcset='{{- $src -}}'

              {{/* determine type from extension */}}
              {{if (index $MIME_TYPES $ext) -}}
                type='{{- index $MIME_TYPES $ext -}}'
              {{- end -}}
            />
          {{- else -}}
            {{/* emit img */}}
            <img
              src='{{- $src -}}'
              {{if $pic.tip}} alt='{{- $pic.tip -}}'{{end}}
            />
          {{- end -}}
        {{- end -}}
      {{- end -}}
    {{- end -}}
  </picture>

  <figcaption>
    <p>{{- $pic.tip -}}</p>
  </figcaption>
</figure>