{% load core_tags %}
{% snapshot_results snapshot 'screenshot,chrome_extension_screenshot,chrome_extension_viewport' as screenshots %}
{% with screenshot=screenshots.0 %}
{% snapshot_result_file_url snapshot screenshot 'screenshot.png' as screenshot_url %}
{% if screenshot.plugin == 'chrome_extension_screenshot' %}
    {% snapshot_result_file_url snapshot screenshot 'screenshot-1.png' as extension_first %}
{% endif %}
{% with thumbnail_url=extension_first|default:screenshot_url %}
<!-- Reuse the screenshot card's crop/lazy loading, keeping the original WACZ
     information visible when the optional sibling screenshot is absent or fails.
     Clicking anywhere on the card
     loads the full replayweb.page viewer in the main iframe (handled by the
     snapshot.html thumbnail-click-overlay). -->
<div style="width:100%;height:100%;overflow:hidden;">
{% if thumbnail_url %}
    <img src="{{ thumbnail_url }}" 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='flex';">
{% endif %}
<div class="extractor-thumbnail archivewebpage-thumbnail"
     style="width: 100%; height: 100%; display: {% if thumbnail_url %}none{% else %}flex{% endif %}; align-items: center; gap: 10px; padding: 10px; box-sizing: border-box; background: #1a1a2e; color: #e6e6f0; overflow: hidden;">
    <svg width="40" height="40" viewBox="0 0 24 24" aria-hidden="true" focusable="false" fill="none" stroke="#7ed4ff" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink: 0;">
        <rect x="3" y="7" width="18" height="13" rx="1.5"/>
        <path d="M3 11h18"/>
        <path d="M6 7V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2"/>
        <circle cx="8" cy="15" r="0.8" fill="#ff5b5b" stroke="#ff5b5b"/>
        <path d="M11 15h7"/>
    </svg>
    <div style="min-width: 0; flex: 1; display: flex; flex-direction: column; justify-content: center;">
        <div style="font-family: monospace; font-size: 11px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;" title="{{ output_path_raw }}">./{{ output_path_raw }}</div>
        <div style="font-size: 10px; color: #9aa3b8; margin-top: 2px;"><span class="archive-size"></span> &middot; WACZ archive</div>
    </div>
</div>
<script>
(() => {
    const formatSize = (value) => {
      let size = Number(value) || 0;
      const units = ["B", "KB", "MB", "GB", "TB"];
      let unit = 0;
      while (Math.abs(size) >= 1000 && unit < units.length - 1) {
        size /= 1000;
        unit++;
      }
      const precision = unit < 2 ? 1 : 10;
      return `${Math.round(size * precision) / precision} ${units[unit]}`;
    };
    document.currentScript.previousElementSibling.querySelector('.archive-size').textContent = formatSize({{ result.output_size|default:0 }});
})();
</script>
</div>
{% endwith %}
{% endwith %}