{% load i18n %}
{% if sidebar_image_ratio %}
<div class="image-preview js-focal-point" data-location-selector="#id_subject_location">
{% endif %}
{% if download_url %}
    {% if mime_maintype == 'audio' %}
    <audio controls>
        <source src="{{ download_url }}" type="{{ mime_type }}">
        {% translate 'Your browser does not support audio.' %}
    </audio>
    {% elif mime_maintype == 'video' %}
    <video width="320" height="240" controls>
        <source src="{{ download_url }}" type="{{ mime_type }}">
        {% translate 'Your browser does not support video.' %}
    </video>
    {% else %}
    <img src="{{ icon_url }}"
         loading="lazy" width="{{ width }}" height="{{ height }}"
         {% if alt_text %} alt="{{ alt_text }}"{% endif %}
         {% if highres_url %} srcset="{{ icon_url }} 1x, {{ highres_url }} 2x"{% endif %}
         {% if sidebar_image_ratio %} data-ratio="{{ sidebar_image_ratio }}"
         class="js-focal-point-image"{% endif %}
         {{ add_styles|safe }}
    />
    {% endif %}
{% else %}
    <img src="{{ icon_url }}" loading="lazy" width="{{ width }}" height="{{ height }}"
         {% if alt_text %} alt="{{ alt_text }}"{% endif %}
         {% if highres_url %} srcset="{{ icon_url }} 1x, {{ highres_url }} 2x"{% endif %} class="thumbnail_img"
         {{ add_styles|safe }}
    />
{% endif %}
{% if sidebar_image_ratio %}
    <div class="image-preview-field">
        <div class="js-focal-point-circle image-preview-circle hidden"></div>
    </div>
</div>
{% endif %}
