{% load core_tags %}
<!-- Screenshot and extension screenshot fallback order belongs to this plugin. -->
<div class="screenshot-card" style="position:relative;width:100%;height:100%;overflow:hidden;background:#333;">
{% if result.plugin == 'chrome_extension_screenshot' %}
    {% snapshot_result_file_url snapshot result 'screenshot-1.png' as extension_first %}
    {% snapshot_result_file_url snapshot result 'screenshot.png' as extension_fallback %}
    {% if extension_first %}<img src="{{ extension_first }}" alt="Screenshot of page" class="extractor-thumbnail screenshot-thumbnail" style="display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#333;" loading="lazy" decoding="async" fetchpriority="low" onerror="this.style.display='none';this.nextElementSibling.style.display='block';">{% endif %}
    {% if extension_fallback %}<img src="{{ extension_fallback }}" alt="Screenshot of page" class="extractor-thumbnail screenshot-thumbnail" style="display:{% if extension_first %}none{% else %}block{% endif %};width:100%;height:100%;object-fit:cover;object-position:top center;background:#333;" loading="lazy" decoding="async" fetchpriority="low" onerror="this.style.display='none';this.nextElementSibling.style.display='block';">{% endif %}
{% else %}
    <img src="{{ output_path }}" alt="Screenshot of page" class="extractor-thumbnail screenshot-thumbnail" style="display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#333;" loading="lazy" decoding="async" fetchpriority="low" onerror="this.style.display='none';this.nextElementSibling.style.display='block';">
{% endif %}
<div style="display:none;text-align:center;padding:20px;color:#999;">📷 Screenshot</div>
</div>