{% load thumbnail %}
{% load xprez %}

{# TODO: rename medium-insert-* to something more generic #}
<div class="medium-insert-images medium-insert-images-{{ align }} {% if lightbox %}medium-insert-images-lightbox{% endif %}">
    <figure>
        {% if link_url %}
            <a href="{{ link_url }}" {% if link_new_window %}target="_blank"{% endif %}>
        {% elif lightbox %}
            {% thumbnail url "1800x1200" format="WEBP" quality=90 filename_stem=alt_text as full %}
            <a
                href="{{ full.url|build_absolute_uri }}"
                data-original_url="{{ full.url|build_absolute_uri }}"
                data-original_width="{{ full.width }}"
                data-original_height="{{ full.height }}"
                class="js-photo"
            >
            {% endthumbnail %}
        {% endif %}
            <img width="{{ width }}" height="{{ height }}" src="{% thumbnail url "427x280" quality=70 format="WEBP" filename_stem=alt_text as thumb %}{{ thumb.url|build_absolute_uri }}"
                srcset="{{ thumb.url|build_absolute_uri }} 427w,
                    {% endthumbnail %}{% thumbnail url "800x800" quality=80 format="WEBP" filename_stem=alt_text as thumb %}
                        {{ thumb.url|build_absolute_uri }} 800w,
                    {% endthumbnail %}{% thumbnail url "1400x1400" quality=80 format="WEBP" filename_stem=alt_text as thumb %}
                        {{ thumb.url|build_absolute_uri }} 1200w
                    {% endthumbnail %}"
                sizes="(min-width: 755px) 700px,
                        98vw" 
                alt="{{ alt_text|default:caption }}"
                />
        {% if link_url or lightbox %}
            </a>
        {% endif %}
        {% if caption %}
            <figcaption>
                {{ caption }}
            </figcaption>
        {% endif %}
    </figure>
</div>
