{# @sw-package framework #}

{% block thumbnail_utility %}
    {# activate load per default. If it is not activated only a data-src is set instead of the src tag. #}
    {% if load is not defined %}
        {% set load = true %}
    {% endif %}

    {# By default no original image will be loaded as soon as thumbnails are available. #}
    {# When set to true the original image will be loaded when the viewport is greater than the largest available thumbnail. #}
    {% if loadOriginalImage is not defined %}
        {% set loadOriginalImage = false %}
    {% endif %}

    {# By default the srcset sizes will be calculated automatically if `columns` are present and no `sizes` are configured. #}
    {# When set to false the sizes attribute will not be generated automatically. #}
    {% if autoColumnSizes is not defined %}
        {% set autoColumnSizes = true %}
    {% endif %}

    {% if attributes is not defined %}
        {% set attributes = {} %}
    {% endif %}

    {% if attributes.alt is not defined and media.translated.alt is defined %}
        {% set attributes = attributes|merge({alt: media.translated.alt}) %}
    {% endif %}

    {% if attributes.title is not defined and media.translated.title is defined %}
        {% set attributes = attributes|merge({title: media.translated.title}) %}
    {% endif %}

    {# If no loading attribute is defined, use the default behaviour for images. #}
    {% if attributes.loading is not defined %}
        {% set attributes = attributes|merge({ loading: 'eager' }) %}
    {% endif %}

    {# uses cms block column count and all available thumbnails to determine the correct image size for the current viewport #}
    {% if media.thumbnails|length > 0 %}
        {% if autoColumnSizes and columns and sizes is not defined %}
            {# set image size for every viewport #}
            {% set sizes = {
                xs: (theme_config('breakpoint.sm') - 1) ~'px',
                sm: (theme_config('breakpoint.md') - 1) ~'px',
                md: ((theme_config('breakpoint.lg') - 1) / columns)|round(0, 'ceil') ~'px',
                lg: ((theme_config('breakpoint.xl') - 1) / columns)|round(0, 'ceil') ~'px'
            } %}

            {% if sizes is not defined or sizes == null %}
                {% set sizes = {} %}
            {% endif %}

            {# set image size for largest viewport depending on the cms block sizing mode (boxed or full-width) #}
            {% if layout == 'full-width' %}
                {% set container = 100 %}
                {% set sizes = sizes|merge({ xl: (container / columns)|round(0, 'ceil') ~'vw'}) %}
            {% else %}
                {% set container = 1360 %}
                {% set sizes = sizes|merge({ xl: (container / columns)|round(0, 'ceil') ~'px'}) %}
            {% endif %}
        {% endif %}

        {% set thumbnails = media.thumbnails|sort|reverse %}

        {# generate srcset with all available thumbnails #}
        {% set srcsetValues = [] %}

        {% if loadOriginalImage %}
            {% set srcsetValues = srcsetValues|merge([media|sw_encode_media_url ~ ' ' ~ (thumbnails|first.width + 1) ~ 'w']) %}
        {% endif %}

        {% for thumbnail in thumbnails %}
            {% set thumbnailUrl = thumbnail.url|sw_encode_url %}
            {% if feature('v6.8.0.0') %}
                {% set thumbnailUrl = thumbnail.url %}
            {% endif %}

            {% set srcsetValues = srcsetValues|merge([thumbnailUrl ~ ' ' ~ thumbnail.width ~ 'w']) %}
        {% endfor %}

        {# generate sizes #}
        {% set sizeFallback = 100 %}

        {# set largest size depending on column count of cms block #}
        {% if autoColumnSizes and columns %}
            {% set sizeFallback = (sizeFallback / columns)|round(0, 'ceil') %}
        {% endif %}

        {% set breakpoint = {
            xs: theme_config('breakpoint.xs'),
            sm: theme_config('breakpoint.sm'),
            md: theme_config('breakpoint.md'),
            lg: theme_config('breakpoint.lg'),
            xl: theme_config('breakpoint.xl')
        } %}

        {% set sizesValues = [] %}

        {% for key, value in breakpoint|reverse %}
            {% set sizesValues = sizesValues|merge(['(min-width: ' ~ value ~ 'px) ' ~ sizes[key]]) %}
        {% endfor %}

        {% set sizesValues = sizesValues|merge([sizeFallback ~ 'vw']) %}
    {% endif %}

    {% block thumbnail_utility_img %}
        <img {% if load %}src="{{ media|sw_encode_media_url }}" {% else %}data-src="{{ media|sw_encode_media_url }}" {% endif %}
            {% if media.thumbnails|length > 0 %}
                {% if load %}srcset="{{ srcsetValues|join(', ') }}" {% else %}data-srcset="{{ srcsetValues|join(', ') }}" {% endif %}
                {% if sizes['default'] %}
                sizes="{{ sizes['default'] }}"
                {% elseif sizes|length > 0 %}
                sizes="{{ sizesValues|join(', ') }}"
                {% endif %}
            {% endif %}
            {% for key, value in attributes %}{% if value != '' %} {{ key }}="{{ value|striptags|trim }}"{% elseif key == 'alt' and value is not same as(false) %} {{ key }}="{{ value|striptags|trim }}"{% endif %}{% endfor %}
        />
    {% endblock %}
{% endblock %}