{% if path ends with '.svg' or local %}
    {% set imgAttributes = attributes.defaults({ class: 'h-full w-full object-cover' }) %}
    <img
        {{ imgAttributes }}
        src="{{ path }}"
        alt="{{ alt }}"
        width="{{ imageWidth }}"
        height="{{ imageHeight }}"
    >
{% else %}
    {% if responsive %}
        {% if imageWidth and imageHeight %}
            {% set wrapperStyle = 'aspect-ratio: ' ~ imageWidth ~ ' / ' ~ imageHeight ~ '; width: '~imageWidth~'px;' %}
        {% endif %}
        {% set pictureAttributes = attributes.defaults({ class: 'h-full w-full' }) %}
        {% if wrapperStyle %}
            {% 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 defaultImgClass = lazy ? 'h-full w-full opacity-0 transition-opacity duration-300 delay-75' : 'h-full w-full' %}
                {% set imgAttributes = attributes.nested('img').defaults({ class: defaultImgClass }) %}
                <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 %}
{% 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 defaultImgClass = lazy ? 'h-full w-full opacity-0 transition-opacity duration-100' : 'h-full w-full' %}
    {% set imgAttributes = attributes.defaults({ class: defaultImgClass }) %}
    {% if imageWidth and imageHeight %}
        {% set wrapperStyle = 'aspect-ratio: ' ~ imageWidth ~ ' / ' ~ imageHeight ~ '; width: 100%; max-width: ' ~ imageWidth ~ 'px;' %}
    {% endif %}
    {% if wrapperStyle %}
        {% set imgAttributes = imgAttributes.defaults({ style: wrapperStyle }) %}
    {% endif %}
    <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 }}">
{% endmacro %}

{% macro imageSource(attributes, path, lazy, fm, fit, crop, quality, bgAlpha, imageWidth, imageHeight, alt, mapping, sizes) %}
    {# Construction du srcset et des dimensions finales #}
    {% 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 defaultImgClass = lazy ? 'h-full w-full opacity-0 transition-opacity duration-100' : 'h-full w-full' %}
    {% set imgAttributes = attributes.nested('img').defaults({ class: defaultImgClass }) %}

    <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) %}
    {# Génération du srcset complet en amont #}
    {% 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 %}
