{% set setLazyLoad = 'true' %}

{% if lazyLoad is defined and lazyLoad | length %}
    {% if lazyLoad != 'true' %}
        {% set setLazyLoad = false %}
    {% endif %}
{% endif %}

{% set setContainerStyles = '' %}
{% set setImgStyles = 'w-full h-auto object-center object-cover' %}
{% set setSizes = '100vw' %}
{% set imageUrl = '' %}
{% set optimisedImage = '' %}
{% set optimisedPlaceholder = '' %}
{% set altText = 'Supporting Image' %}
{% set svgHeightGreater = false %}

{% if image is defined and image | length %}
    {% set imageUrl = image.getUrl() %}
    {% set optimisedImage =  image.optimizedImage %}
    {% set optimisedPlaceholder =  optimisedImage.placeholderImage() %}
    {% if image.alt | length %}
        {% set altText = image.alt %}
    {% else %}
        {% set altText = image.title %}
    {% endif %}
    {% if (image.height - image.width) > 5 %}
        {% set svgHeightGreater = true %}
    {% endif %}
{% endif %}

{% set defaultSvgStyles = (svgHeightGreater ? 'h-full w-auto' : 'w-full h-auto') ~ ' ' %}
{% set setSvgStyles = 'm-auto' %}

{% if sizes is defined and sizes | length %}
    {% set setSizes = sizes %}
{% endif %}

{% if containerStyles is defined and containerStyles | length %}
    {% set setContainerStyles = ' ' ~ containerStyles %}
{% endif %}

{% if imgStyles is defined and imgStyles | length %}
    {% set setImgStyles = imgStyles %}
{% endif %}

{% if imgStylesContainerAddition is defined and imgStylesContainerAddition | length %}
    {% set imgStylesContainerAddition = ' ' ~ imgStylesContainerAddition %}
{% else %}
    {% set imgStylesContainerAddition = '' %}
{% endif %}

{% if svgStyles is defined and svgStyles | length %}
    {% set setSvgStyles = svgStyles %}
{% endif %}

{% if image.extension == 'svg' %}
    {{ svg(image)|attr({ class: defaultSvgStyles ~ setSvgStyles }) }}
{% else %}
    <div class="overflow-hidden relative w-full h-full select-none{{ setContainerStyles }}">
        <picture>
            <source
                    {{ setLazyLoad ? 'data-' }}sizes="{{ setSizes }}"
                    {{ setLazyLoad ? 'data-' }}srcset="{{ optimisedImage | length ? optimisedImage.srcsetWebP() }}"
                    type="image/webp"
            >
            <img
                    {% if setLazyLoad %}
                        data-lowsrc="{{ optimisedPlaceholder | length ? optimisedPlaceholder : imageUrl }}"
                        src="{{ optimisedImage.placeholderBox() }}"
                    {% endif %}
                    {{ setLazyLoad ? 'data-' }}src="{{ optimisedImage.src() | length ? optimisedImage.src() : imageUrl }}"
                    {{ setLazyLoad ? 'data-' }}srcset="{{ optimisedImage.srcset() | length ? optimisedImage.srcset() }}"
                    {{ setLazyLoad ? 'data-' }}sizes="{{ setSizes }}"
                    class="{{ setImgStyles }}{{ setLazyLoad ? ' lazyload' }}"
                    alt="{{ altText }}"
                    width="auto"
                    height="auto"
            />
        </picture>
    </div>
{% endif %}