<div {{ attributes }}>
    {% if path ends with '.svg' or local %}
        {% set imgAttributes = attributes.nested('img') %}
        <img
            {{ imgAttributes }}
            src="{{ path }}"
            alt="{{ alt }}"
            width="{{ imageWidth }}"
            height="{{ imageHeight }}"
        >
    {% else %}
        {% if responsive %}
            {% if imageWidth and imageHeight %}
                {% set wrapperStyle = 'aspect-ratio: ' ~ imageWidth ~ ' / ' ~ imageHeight ~ ';' %}
            {% endif %}
            {% set pictureAttributes = attributes.nested('picture') %}
            {% if wrapperStyle is defined %}
                {% set pictureAttributes = pictureAttributes.defaults({ style: wrapperStyle }) %}
            {% endif %}
            <picture
                {{ pictureAttributes }}
                {% if lazy %}data-lazy{% endif %}>
                {% if pathPortrait is not null %}
                    {% set pictureFallbackParams = {
                        fm: fm,
                        fit: this.fitLandscape,
                        q: quality,
                        w: imageWidth,
                        h: imageHeight
                    } %}
                    {% if bgAlpha is not null %}
                        {% set pictureFallbackParams = pictureFallbackParams|merge({ bg: bgAlpha }) %}
                    {% endif %}
                    {% if this.cropLandscape is not null %}
                        {% set pictureFallbackParams = pictureFallbackParams|merge({ crop: this.cropLandscape }) %}
                    {% endif %}
                    {% set pictureFallbackSrc = asset_glide(pathLandscape, mapping, pictureFallbackParams) %}
                    {{ _self.source(pathLandscape, lazy, fm, this.fitLandscape, this.cropLandscape, quality, bgAlpha, imageWidth, imageHeight, alt, mapping, this.generateSizes(ratioLandscape), true) }}
                    {{ _self.source(pathPortrait, lazy, fm, this.fitPortrait, this.cropPortrait, quality, bgAlpha, imageWidth, imageHeight, alt, mapping, this.generateSizes(ratioPortrait), false) }}
                    {% set imgAttributes = attributes.nested('img') %}
                    {% if lazy %}
                        {% set imgAttributes = imgAttributes.defaults({ class: 'opacity-0 transition-opacity duration-300 delay-75' }) %}
                    {% endif %}
                    <img
                        {{ imgAttributes }}
                        {% if lazy %}
                            data-lazy
                            data-src="{{ pictureFallbackSrc }}"
                            src="data:image/gif;base64,R0lGODlhAQABAAAAACw="
                            loading="lazy"
                        {% else %}
                            src="{{ pictureFallbackSrc }}"
                        {% endif %}
                        alt="{{ alt }}"
                        width="{{ imageWidth }}"
                        height="{{ imageHeight }}"
                    >
                {% else %}
                    {{ _self.imageSource(attributes, path, lazy, fm, this.fitLandscape, this.cropLandscape, quality, bgAlpha, imageWidth, imageHeight, alt, mapping, this.generateSizes(ratioLandscape)) }}
                {% endif %}
            </picture>
        {% else %}
            {{ _self.imageSingle(attributes, path, lazy, fm, fit, crop, quality, bgAlpha, imageWidth, imageHeight, alt, mapping) }}
        {% endif %}
    {% endif %}
</div>

{% macro imageSingle(attributes, path, lazy, fm, fit, crop, quality, bgAlpha, imageWidth, imageHeight, alt, mapping) %}
    {% set glideParams = {
        fm: fm,
        fit: fit,
        q: quality,
        w: imageWidth,
        h: imageHeight
    } %}
    {% if bgAlpha is not null %}
        {% set glideParams = glideParams|merge({ bg: bgAlpha }) %}
    {% endif %}
    {% if crop is not null %}
        {% set glideParams = glideParams|merge({ crop: crop }) %}
    {% endif %}
    {% set glideSrc = asset_glide(path, mapping, glideParams) %}

    {% set imgAttributes = attributes.nested('img') %}
    {% if lazy %}
        {% set imgAttributes = imgAttributes.defaults({ class: 'opacity-0 transition-opacity duration-100' }) %}
    {% endif %}
    {% if imageWidth and imageHeight %}
        {% set wrapperStyle = 'aspect-ratio: ' ~ imageWidth ~ ' / ' ~ imageHeight ~ ';' %}
    {% endif %}
    {% set rowAttributes = attributes.nested('row').defaults({ class: 'relative' }) %}
    {% if wrapperStyle is defined %}
        {% set rowAttributes = rowAttributes.defaults({ style: wrapperStyle }) %}
    {% endif %}
    <picture {{ rowAttributes }}>
        <img
            {{ imgAttributes }}
            {% if lazy %}
                data-src="{{ glideSrc }}"
                src="data:image/gif;base64,R0lGODlhAQABAAAAACw="
                data-lazy
                loading="lazy"
            {% else %}
                src="{{ glideSrc }}"
            {% endif %}
            alt="{{ alt }}"
            width="{{ imageWidth }}"
            height="{{ imageHeight }}">
    </picture>
{% endmacro %}

{% macro imageSource(attributes, path, lazy, fm, fit, crop, quality, bgAlpha, imageWidth, imageHeight, alt, mapping, sizes) %}
    {% set srcset = '' %}
    {% for size in sizes %}
        {% set width = size.width %}
        {% set height = size.height %}
        {% set glideParams = {
            fm: fm,
            fit: fit,
            q: quality,
            w: width,
            h: height
        } %}
        {% if bgAlpha is not null %}
            {% set glideParams = glideParams|merge({ bg: bgAlpha }) %}
        {% endif %}
        {% if crop is not null %}
            {% set glideParams = glideParams|merge({ crop: crop }) %}
        {% endif %}
        {% set url = asset_glide(path, mapping, glideParams) %}
        {% set srcset = srcset ~ url ~ ' ' ~ width ~ 'w' %}
        {% if not loop.last %}
            {% set srcset = srcset ~ ', ' %}
        {% else %}
            {% set imageWidth = width %}
            {% set imageHeight = height %}
        {% endif %}
    {% endfor %}

    {% set glideParams = {
        fm: fm,
        fit: fit,
        q: quality,
        w: imageWidth,
        h: imageHeight
    } %}
    {% if bgAlpha is not null %}
        {% set glideParams = glideParams|merge({ bg: bgAlpha }) %}
    {% endif %}
    {% if crop is not null %}
        {% set glideParams = glideParams|merge({ crop: crop }) %}
    {% endif %}
    {% set glideSrc = asset_glide(path, mapping, glideParams) %}

    {% set imgAttributes = attributes.nested('img') %}
    {% if lazy %}
        {% set imgAttributes = imgAttributes.defaults({ class: 'opacity-0 transition-opacity duration-100' }) %}
    {% endif %}

    <img
        {{ imgAttributes }}
        sizes="100%"
        {% if lazy %}
            data-lazy
            data-src="{{ glideSrc }}"
            data-srcset="{{ srcset }}"
            src="data:image/gif;base64,R0lGODlhAQABAAAAACw="
            loading="lazy"
        {% else %}
            srcset="{{ srcset }}"
            src="{{ glideSrc }}"
        {% endif %}
        width="{{ imageWidth }}"
        height="{{ imageHeight }}"
        alt="{{ alt }}">
{% endmacro %}

{% macro source(path, lazy, fm, fit, crop, quality, bgAlpha, imageWidth, imageHeight, alt, mapping, sizes, landscape) %}
    {% set srcset = '' %}
    {% for size in sizes %}
        {% set glideParams = {
            fm: fm,
            fit: fit,
            q: quality,
            w: size.width,
            h: size.height
        } %}
        {% if bgAlpha is not null %}
            {% set glideParams = glideParams|merge({ bg: bgAlpha }) %}
        {% endif %}
        {% if crop is not null %}
            {% set glideParams = glideParams|merge({ crop: crop }) %}
        {% endif %}
        {% set url = asset_glide(path, mapping, glideParams) %}
        {% set srcset = srcset ~ url ~ ' ' ~ size.width ~ 'w' %}
        {% if not loop.last %}
            {% set srcset = srcset ~ ', ' %}
        {% endif %}
    {% endfor %}

    <source
        {% if lazy %}
            data-srcset="{{ srcset }}"
        {% else %}
            srcset="{{ srcset }}"
        {% endif %}
        sizes="100%"
        media="(orientation: {{ landscape ? 'landscape' : 'portrait' }})"
        type="image/{{ fm }}">
{% endmacro %}
