{% set website = website() %}
{% set configuration = website().configuration %}
{% set websiteTemplate = configuration.template %}
{% set i18n = mediaRelation.i18n is defined ? mediaRelation.i18n : null %}
{% set imageLink = i18n|i18nLink %}
{% set imageTitle = i18n and i18n.title and mediaRelation.displayTitle ? i18n.title : null %}
{% set forceSize = desktop.forceSize is defined ? desktop.forceSize : false %}

{% set filter = '/placeholder.' in desktop.path ? 'media72' : 'media72' %}
{% set disabledExtensions = ['svg', 'gif'] %}
{% set filepathDesktop = desktop.runtimeConfig and desktop.media.extension not in disabledExtensions
    ? asset(desktop.path)|imagine_filter(filter, desktop.runtimeConfig)
    : asset(desktop.path) %}

{% if not desktop.runtimeConfig and desktop.media.extension not in disabledExtensions %}
    {% set filepathDesktop = asset(desktop.path)|imagine_filter('media72') %}
{% endif %}

{% set lazyDesktop = desktop.lazyFile is defined and desktop.lazyFile and desktop.media.extension not in disabledExtensions
    ? asset(desktop.lazyFile)
    : asset('build/vendor/images/lazy-point.svg', 'vendor') %}

{% set tabletExist = tablet.path is defined %}
{% set filepathTablet = tabletExist ? asset(tablet.path) : null %}

{% set mobileExist = mobile.path is defined %}
{% set filepathMobile = mobileExist ? asset(mobile.path) : null %}

{% set desktopClass = null %}
{% if mobileExist or tabletExist %}
    {% set desktopClass = 'd-none d-lg-inline-block' %}
{% endif %}

{% set desktopMedia = desktop %}
{% set isInBox = not inAdmin and (inBox or popupGallery) and not btnLink %}

{% extends isInBox ? 'front/' ~ configuration.template ~ '/include/hovereffect/' ~ configuration.hoverTheme ~ '.html.twig'
    : 'core/image-block.html.twig' %}

{% block media %}

    {% if not inAdmin and not isInBox and imageLink.link is defined and imageLink.link is not empty and not btnLink %}
        <a href="{{ imageLink.link }}"{% if imageLink.targetBlank %} target="_blank"{% endif %}>
    {% endif %}

        {% if filepathDesktop %}
            {% if isDesktop() or isTablet() and (not tabletExist and not mobileExist) or isMobile() and (not tabletExist and not mobileExist) %}
                {% include 'core/image.html.twig' with {
                    'lazy': lazyDesktop,
                    'mediaPath': filepathDesktop,
                    'screenClass': desktopClass,
                    'forceSize': forceSize,
                    'mediaTitle': desktop.attr.title is defined ? desktop.attr.title : null,
                    'mediaAuthor': desktop.attr.author is defined ? desktop.attr.author : null,
                    'mediaWidth': desktop.attr.width is defined ? desktop.attr.width : null,
                    'mediaHeight': desktop.attr.height is defined ? desktop.attr.height : null
                } %}
            {% endif %}
        {% endif %}

        {% if not isPlaceholder %}

            {% set tabletClass = 'd-none d-md-inline-block d-lg-none' %}
            {% if not mobileExist %}
                {% set tabletClass = 'd-md-inline-block d-lg-none' %}
            {% endif %}

            {% if filepathTablet %}
                {% if isTablet() and tabletExist or isMobile() and not mobileExist %}
                    {% include 'core/image.html.twig' with {
                        'lazy': asset('build/vendor/images/lazy-point.svg', 'vendor'),
                        'mediaPath': filepathTablet,
                        'screenClass': tabletClass,
                        'forceSize': false,
                        'mediaTitle': tablet.attr.title is defined ? tablet.attr.title : null,
                        'mediaAuthor': tablet.attr.author is defined ? tablet.attr.author : null,
                        'mediaWidth': tablet.attr.width is defined ? tablet.attr.width : null,
                        'mediaHeight': tablet.attr.height is defined ? tablet.attr.height : null
                    } %}
                {% endif %}
            {% endif %}

            {% set mobileClass = 'd-md-none' %}
            {% if tabletClass is not defined or isTablet() and not tabletExist %}
                {% set mobileClass = 'd-lg-none' %}
            {% endif %}

            {% if filepathMobile %}
                {% if isMobile() and mobileExist or isTablet() and not tabletExist %}
                    {% include 'core/image.html.twig' with {
                        'lazy': asset('build/vendor/images/lazy-point.svg', 'vendor'),
                        'mediaPath': filepathMobile,
                        'screenClass': mobileClass,
                        'forceSize': false,
                        'mediaTitle': mobile.attr.title is defined ? mobile.attr.title : null,
                        'mediaAuthor': mobile.attr.author is defined ? mobile.attr.author : null,
                        'mediaWidth': mobile.attr.width is defined ? mobile.attr.width : null,
                        'mediaHeight': mobile.attr.height is defined ? mobile.attr.height : null
                    } %}
                {% endif %}
            {% endif %}

        {% endif %}

    {% if not inAdmin and not isInBox and imageLink.link is defined and imageLink.link is not empty and not btnLink %}
        </a>
    {% endif %}

{% endblock %}