{% extends "xprez/modules/text_base.html" %}
{% load thumbnail xprez %}

{% block attrs  %}
    {{ block.super }}
    {% if module.url %}
    onclick="if (event.target.closest('a, button')) return; window.location.href='{{ module.url }}';"
    {% endif %}
{% endblock %}

{% block content %}
    {{ module.background }}
    {% if module.media %}
        <div class="xprez-text__image-wrapper">
            {% if module.media_is_image %}
                <picture>
                    {% for source in module.media_image_sources %}
                        {% if source.max_width %}
                            <source
                                media="(max-width: {{ source.max_width }}px)"
                                srcset="{% for geom in source.geometries %}{% thumbnail module.media geom crop=source.thumbnail_crop format="WEBP" quality=70 as t %}{{ t.url|build_absolute_uri }} {{ t.width }}w{% if not forloop.last %}, {% endif %}{% endthumbnail %}{% endfor %}"
                                sizes="{{ module.image_sizes }}">
                        {% else %}
                            {% include "xprez/includes/responsive_image.html" with source=module.media geometries=source.geometries sizes=module.image_sizes alt=module.media.name crop=source.thumbnail_crop css_class="xprez-text__image" loading="lazy" %}
                        {% endif %}
                    {% endfor %}
                </picture>
            {% elif module.media_is_video %}
                <video class="xprez-text__image" data-observer-autoplay muted loop playsinline preload="metadata">
                    <source src="{{ module.media.url }}" type="{{ module.media_mime_type }}">
                </video>
            {% else %}
                <img class="xprez-text__image" src="{{ module.media.url }}" alt="{{ module.media.name }}" loading="lazy">
            {% endif %}
        </div>
    {% endif %}
    {% if module.text %}
        <div class="xprez-text__text-wrapper">{{ block.super }}</div>
    {% endif %}
{% endblock %}