{% load core_tags %}
<div class="responses-thumbnail" aria-label="Captured images" style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:46px;gap:3px;width:100%;height:100px;overflow:hidden;background:#f5f6f8;">
{% for path, info in result.output_files.items %}
    {% if info.mimetype|slice:':6' == 'image/' %}
        {% if path|slice:':4' == 'all/' or path|slice:':14' == 'responses/all/' %}
            {% with image_path='responses/'|add:path %}
                {% if info.root_relative %}
                    {% snapshot_preview_url snapshot path as image_url %}
                {% else %}
                    {% snapshot_preview_url snapshot image_path as image_url %}
                {% endif %}
                <img src="{{ image_url|cut:"?preview=1" }}?raw=1" alt="{{ path }}" loading="lazy" decoding="async" fetchpriority="low" style="order:-{{ info.size|default:0 }};display:block;width:100%;height:46px;object-fit:contain;background:white;">
            {% endwith %}
        {% endif %}
    {% endif %}
{% endfor %}
</div>