<div class="d-flex flex-wrap justify-items-evenly">
    {% for png in result.pngs %}
        <div class="p-2 flex-fill">
            <a href="{{ png.url }}" target="_blank" class="linked-card">
                <div class="card text-center screenshot">
                    <img class="card-img-top img-thumbnail mx-auto"
                         loading="lazy"
                         src="{{ png.url }}"
                         alt='[loading] Screenshot #{{ loop.index }} for test "{{ result .test_name }}"' >
                    {% if png.source_url %}
                        <div class="text-truncate screenshot-url">
                            <span class="fw-bold">Location: </span>
                            {{ png.source_url }}
                        </div>
                    {% endif %}
                    {% if png.caption %}
                        <div
                            class="card-footer snap-caption {% if png.is_error %}text-danger{% endif %}">
                            {{ png.caption }}
                        </div>
                    {% endif %}
                </div>
            </a>
        </div>
    {% endfor %}
</div>
