{% load i18n cms_tags thumbnail staticfiles sekizai_tags %}
{% 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 %}

{# only load js and css required for dnd upload if toolbar is available #}
{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
    {% addtoblock "css" %}<link rel="stylesheet" href="{% static 'aldryn_bootstrap3/css/base.css' %}">{% endaddtoblock %}
    {% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.min.js' %}"></script>{% endaddtoblock %}
    {% addtoblock "js" %}<script src="{% static 'aldryn_bootstrap3/js/dropzone.init.js' %}"></script>{% endaddtoblock %}
{% endif %}

{% spaceless %}
    {% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
        {% if has_dnd_support %}
            <span class="js-filer-dropzone filer-dropzone filer-dropzone-image-plugin" data-filer-url="{% url 'admin:bootstrap3_image_ajax_upload' pk=instance.pk %}">
        {% endif %}
    {% endif %}
                <img
                    {% if instance.use_original_image %}
                        src="{{ instance.file.url }}"
                    {% else %}
                        {% 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 %}
                    {% endif %}
                    alt="{{ instance.alt }}"
                    {% if instance.title %}title="{{ instance.title }}"{% endif %}
                    {% if instance.img_responsive or instance.shape or instance.thumbnail or instance.classes or request.toolbar %}
                        class="{% if request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}js-original-image {% endif %}{% 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 request.toolbar and request.toolbar.show_toolbar and request.toolbar.edit_mode %}
        {% if has_dnd_support %}
                <span class="filer-dropzone-info-message js-filer-dropzone-info-message hidden">
                    <span class="filer-dropzone-icon"><span class="fa fa-cloud-upload"></span></span>

                    <span class="filer-dropzone-upload-welcome js-filer-dropzone-upload-welcome">
                        <span class="text">{% trans 'Drop your file to change image:' %}</span>
                    </span>

                    <span class="filer-dropzone-upload-info js-filer-dropzone-upload-info hidden">
                        <span class="js-filer-dropzone-file-name filer-dropzone-file-name"></span>
                        <span class="filer-dropzone-progress js-filer-dropzone-progress"></span>
                    </span>

                    <span class="js-filer-dropzone-upload-success hidden">
                        {% trans 'Upload success!' %}
                    </span>
                </span>
                <span class="filer-dropzone-error-message js-filer-dropzone-error-message hidden">
                    <span class="icon"><span class="fa fa-cloud-upload"></span></span>
                    <span class="js-filer-dropzone-upload-accept filer-dropzone-text">
                        {% trans 'Error! Files of this type are not accepted.' %}
                    </span>
                </span>
            </span>
        {% endif %}{# has_dnd_support #}
    {% endif %}{# toolbar #}
{% endspaceless %}
{% 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 %}
