{% extends 'cms/blocks/_sizer.html' %}
{% load wagtailimages_tags %}

{% block sizer_content %}
    {% if not amp %}
        <picture>
            {% image value.file width-375 format-webp as sm_image_webp %}
            <source media="(max-width: 375px)" srcset="{{ sm_image_webp.url }}" type="image/webp">

            {% image value.file width-375 format-jpeg as sm_image_jpeg %}
            <source media="(max-width: 375px)" srcset="{{ sm_image_jpeg.url }}" type="image/jpeg">

            {% image value.file width-768 format-webp as md_image_webp %}
            <source media="(min-width: 376px)" srcset="{{ md_image_webp.url }}" type="image/webp">

            {% image value.file width-768 format-jpeg as md_image_jpeg %}
            <source media="(min-width: 376px)" srcset="{{ md_image_jpeg.url }}" type="image/jpeg">

            <img {% if block_num >= 2 %}data-src{% else %}src{% endif %}="{{ md_image_jpeg.url }}"
                 class="{% if block_num >= 2 %}lazy{% endif %}"
                 alt="{{ value.file.title }}"
            />
        </picture>
    {% else %}
        {% image value.file width-375 format-webp as sm_image_webp %}
        {% image value.file width-768 format-webp as md_image_webp %}
        <amp-img alt="{{ value.file.title }}"
                 width="{{ md_image_webp.width }}"
                 height="{{ md_image_webp.height }}"
                 layout="responsive"
                 src="{{ md_image_webp.url }}"
                 srcset="{{ md_image_webp.url }} 768w, {{ sm_image_webp.url }} 375w"
        >
            {% image value.file width-768 format-jpeg as md_image_jpeg %}
            {% image value.file width-375 format-jpeg as sm_image_jpeg %}
            {% if 'Safari' in request.user_agent.browser.family %}
                <amp-img alt="{{ value.file.title }}"
                         width="{{ md_image_webp.width }}"
                         height="{{ md_image_webp.height }}"
                         layout="fill"
                         src="{{ md_image_jpeg.url }}"
                         srcset="{{ md_image_jpeg.url }} 768w, {{ sm_image_jpeg.url }} 375w"
                >
                </amp-img>
            {% endif %}
        </amp-img>
    {% endif %}
{% endblock %}
