{% load thumbnail allink_image_tags cache allink_link_tags %}

<div class="content-plugin image-plugin image-container {{ instance.css_classes }}">
    {# start render figure/figcaption #}
    {% if instance.caption_text %}
        <figure class="image-plugin__figure">
    {% endif %}
    {# end render figure/figcaption #}

    {% if instance.link_url_typed %}
        <a href="{{ instance.link_url_typed }}"
           class="image-plugin__link {{ instance|link_classes }}"
            {{ instance|link_attribute_string:request }}
        >
    {% endif %}

    {% block render_image_container %}
        {% comment %} disable lazyload for all images that are in the overlay menu placeholder {% endcomment %}
        {% if instance.placeholder.slot == "overlay_menu" %}
            {% render_image image=instance.picture width_alias=instance.width_alias ratio=instance.ratio icon_enabled=instance.icon_enabled bg_enabled=instance.bg_enabled lazyload_enabled=False %}
        {% else %}
            {% render_image image=instance.picture width_alias=instance.width_alias ratio=instance.ratio icon_enabled=instance.icon_enabled bg_enabled=instance.bg_enabled %}
        {% endif %}
    {% endblock render_image_container %}

    {% if instance.image_modal_enabled and instance.link_file %}
        <div class="image-modal-content" style="display: none;">
            {% render_image width_alias="1-of-1" ratio="x-y" image=instance.link_file %}
        </div>
    {% endif %}

    {% if instance.link_url_typed %}
        </a>
    {% endif %}
    {% if instance.softpage_enabled %}
        {% include "modals/modal-header-markup.html" with title=instance.link_page modal_type="softpage" %}
    {% endif %}
    {# start render figure/figcaption #}
    {% if instance.caption_text %}
        <figcaption class="image-plugin__figcaption">{{ instance.caption_text }}</figcaption>
        </figure>
    {% endif %}
</div>
