{{#
  @name Picture
  @desc The picture component. A responsive imageset in a picture element. See `resources/views/components/_figure.antlers.html` for an example on how to use this.
#}}
 
<!-- /components/_picture.antlers.html -->
{{ if image }}
    <picture>
        {{ asset :url="image" }}
            {{ if extension == 'svg' || extension == 'gif' }}
                <img class="{{ class }}" src="{{ url }}" alt="{{ alt }}" />
            {{ else }}
                {{ if not(removeXS) }}
                <source srcset="{{ glide:image preset='xs-webp' }}" media="(max-width: 320px)" type="image/webp">
                {{ /if }}
                {{ if not(removeSM) }}
                <source srcset="{{ glide:image preset='sm-webp' }}" media="(max-width: 480px)" type="image/webp">
                {{ /if }}
                {{ if not(removeMD) }}
                <source srcset="{{ glide:image preset='md-webp' }}" media="(max-width: 768px)" type="image/webp">
                {{ /if }}
                <source srcset="{{ glide:image preset='lg-webp' }}" media="(max-width: 1280px)" type="image/webp">
                <source srcset="{{ glide:image preset='xl-webp' }}" media="(max-width: 1440px)" type="image/webp">
                <source srcset="{{ glide:image preset='2xl-webp' }}" media="(max-width: 1680px)" type="image/webp">
                <source srcset="{{ glide:image q='85' fm='webp' }}" media="(min-width: 1680px)" type="image/webp">

                {{ if not(removeXS) }}
                <source srcset="{{ glide:image preset='xs' }}" media="(max-width: 320px)" type="{{ image.mime_type }}">
                {{ /if }}
                {{ if not(removeSM) }}
                <source srcset="{{ glide:image preset='sm' }}" media="(max-width: 480px)" type="{{ image.mime_type }}">
                {{ /if }}
                {{ if not(removeMD) }}
                <source srcset="{{ glide:image preset='md' }}" media="(max-width: 768px)" type="{{ image.mime_type }}">
                {{ /if }}
                <source srcset="{{ glide:image preset='lg' }}" media="(max-width: 1280px)" type="{{ image.mime_type }}">
                <source srcset="{{ glide:image preset='xl' }}" media="(max-width: 1440px)" type="{{ image.mime_type }}">
                <source srcset="{{ glide:image preset='2xl' }}" media="(max-width: 1680px)" type="{{ image.mime_type }}">
                <source srcset="{{ glide:image q='85' fm=image.extension }}" media="(min-width: 1680px)" type="{{ image.mime_type }}">

                <img
                    {{ if cover }}
                        class="object-cover w-full h-full {{ class }}"
                    {{ else }}
                        class="{{ class }}"
                    {{ /if }}
                    src="{{ glide:image preset='lg' }}"
                    alt="{{ image.alt ?? image.title ?? 'Image' }}"
                    width="{{ image.width }}"
                    height="{{ image.height }}"
                    {{ if lazy }}
                        loading="lazy"
                    {{ /if }}
                >
            {{ /if }}
        {{ /asset }}
    </picture>
{{ /if }}
<!-- End: /components/_picture.antlers.html -->