{% load cms_tags thumbnail %}
{% comment %}
DOCS: https://html.spec.whatwg.org/multipage/embedded-content.html#introduction-3:viewport-based-selection-2
the browser assumes size="100vw" by default, which means
"assume this image will be displayed at full width on the
current viewport and pick an image from srcset accordingly".

TODO: currently we're always upscaling the image physically.
      would it be better to upscale it with css? img-response
      does not seem to do that yet.
{% endcomment %}
<img
    {% with main_src=instance.srcset.lg %}
        {% thumbnail instance.file main_src.size crop=main_src.crop upscale=main_src.upscale subject_location=main_src.subject_location as main_thumb %}
        src="{{ main_thumb.url }}"
    {% endwith %}
    alt="{{ instance.alt }}"
    {% if instance.title %}title="{{ instance.title }}"{% endif %}
    {% if instance.img_responsive or instance.shape or instance.thumbnail or instance.classes %}
        class="{% if instance.img_responsive %}img-responsive{% endif %}{% if instance.shape %} img-{{ instance.shape }}{% endif %}{% if instance.thumbnail %} img-thumbnail{% endif %}{% if instance.classes %} {{ instance.classes }}{% endif %}"
    {% endif %}
    {% comment %}
    {# INFO: needs proper attributes for validation #}
    srcset="{% for device, src in instance.srcset.items %}
        {% if not forloop.first %}
            {% thumbnail instance.file src.size crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb %}{{ thumb.url }} {{ src.width_str }}{% if not forloop.last %},{% endif %}
        {% endif %}
    {% endfor %}"
    {% endcomment %}
>
{% if 0 %}
<pre>
{% with main_src=instance.srcset.lg %}
    {% thumbnail instance.file main_src.size crop=main_src.crop upscale=main_src.upscale subject_location=main_src.subject_location as main_thumb %}
    src="{{ main_thumb.url }}"
{% endwith %}
alt="{{ instance.alt }}"
title="{{ instance.title }}"
class="img-responsive{% if instance.shape %} img-{{ instance.shape }}{% endif %}{% if instance.thumbnail %} img-thumbnail{% endif %}"
srcset="{% for device, src in instance.srcset.items %}
{% thumbnail instance.file src.size crop=src.crop upscale=src.upscale subject_location=src.subject_location as thumb %}{{ thumb.url }} {{ src.width_str }}{% if not forloop.last %},{% endif %}
{% endfor %}"
</pre>

<pre>
{% for device, src in instance.srcset.items %}
{{ src|pprint }}
{% endfor %}
</pre>
{% endif %}
