{{#
	@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 }}
                <source
                    srcset="
                        {{ glide:image preset='xs-webp' }} 320w,
                        {{ glide:image preset='sm-webp' }} 480w,
                        {{ glide:image preset='md-webp' }} 768w,
                        {{ glide:image preset='lg-webp' }} 1280w,
                        {{ glide:image preset='xl-webp' }} 1440w,
                        {{ glide:image preset='2xl-webp' }} 1680w"
                    sizes="{{ sizes }}"
                    type="image/webp"
                >
                <source
                    srcset="
                        {{ glide:image preset='xs' }} 320w,
                        {{ glide:image preset='sm' }} 480w,
                        {{ glide:image preset='md' }} 768w,
                        {{ glide:image preset='lg' }} 1280w,
                        {{ glide:image preset='xl' }} 1440w,
                        {{ glide:image preset='2xl' }} 1680w"
                    sizes="{{ sizes }}"
                    type="{{ image.mime_type }}"
                >
                <img
                    {{ if cover }}
                        class="object-cover w-full h-full {{ class }}"
                        style="object-position: {{ focus | background_position }}"
                    {{ else }}
                        class="{{ class }}"
                    {{ /if }}
                    src="{{ glide:image preset='lg' }}"
                    alt="{{ alt ensure_right='.' }}"
                    width="{{ image.width }}"
                    height="{{ image.height }}"
                    {{ if lazy }}
                        loading="lazy"
                    {{ /if }}
                >
            {{ /if }}
        {{ /asset }}
    </picture>
{{ /if }}
<!-- End: /components/_picture.antlers.html -->