{% load static tz core_tags %}

{% snapshot_base_url link as snapshot_base %}
{% snapshot_url link 'screenshot/screenshot.png' as screenshot_plugin_url %}
{% snapshot_url link 'screenshot.png' as screenshot_root_url %}
{% snapshot_url link 'favicon/favicon.ico' as favicon_plugin_url %}
{% snapshot_url link 'favicon.ico' as favicon_root_url %}

<tr class="snapshot-row status-{{ link.status|default:'unknown' }}">
    <td class="snapshot-time" title="Bookmarked: {{ link.bookmarked_at|localtime }} ({{ link.timestamp }})" data-sort="{{ link.bookmarked_at.timestamp }}">
        <a href="{{ snapshot_base }}/index.html">
            <span>{{ link.bookmarked_at|localtime|date:"Y-m-d" }}</span>
            <small>{{ link.bookmarked_at|localtime|date:"H:i" }}</small>
        </a>
    </td>
    <td class="snapshot-preview-cell">
        <a href="{{ snapshot_base }}/index.html" title="Open archived snapshot">
            {% if link.is_archived %}
                <img src="{{ screenshot_plugin_url }}"
                     data-fallbacks="{{ screenshot_root_url }},{{ favicon_plugin_url }},{{ favicon_root_url }}"
                     onerror="nextPublicSnapshotPreview(this)"
                     class="snapshot-preview screenshot"
                     alt=""
                     decoding="async"
                     loading="lazy">
            {% else %}
                <img src="{% static 'spinner.gif' %}"
                     class="snapshot-preview"
                     alt=""
                     decoding="async"
                     loading="lazy">
            {% endif %}
        </a>
    </td>
    <td class="snapshot-title-cell" title="{{ link.title|default:link.url }}">
        <div class="snapshot-title-line">
            <a href="{{ snapshot_base }}/index.html" class="snapshot-favicon-link" title="Open archived snapshot">
                <img src="{{ favicon_plugin_url }}"
                     data-fallbacks="{{ favicon_root_url }}"
                     onerror="nextPublicSnapshotPreview(this)"
                     class="link-favicon"
                     alt=""
                     decoding="async"
                     loading="lazy">
            </a>
            <a href="{{ snapshot_base }}/index.html" class="snapshot-title">
                {{ link.title|default:'Loading...'|truncatechars:110 }}
            </a>
        </div>
        <a href="{{ link.url }}" class="snapshot-url" title="{{ link.url }}" target="_blank" rel="noopener noreferrer">
            {{ link.url }}
        </a>
    </td>
    <td class="snapshot-tags-cell">
        {% if link.tags_str %}
            <span class="snapshot-tags">
                {% for tag in link.tags_str|split:',' %}
                    {% if tag %}
                        <span class="snapshot-tag">{{ tag }}</span>
                    {% endif %}
                {% endfor %}
            </span>
        {% else %}
            <span class="empty-value">...</span>
        {% endif %}
    </td>
    <td class="snapshot-status-cell">
        <span class="snapshot-status">{{ link.status|default:'unknown' }}</span>
    </td>
    <td class="snapshot-files-cell">
        <span data-number-for="{{ link.url }}" title="{{ link.num_outputs }} successful outputs">
            {% if link.icons %}
                {{ link.icons }}
            {% else %}
                <span class="empty-value">...</span>
            {% endif %}
        </span>
    </td>
    <td class="snapshot-size-cell">
        <a href="{{ snapshot_base }}/?files=1" title="View archived files">
            {% if link.archive_size %}
                {{ link.archive_size|file_size }}
            {% else %}
                <span class="empty-value">...</span>
            {% endif %}
        </a>
        <small>{{ link.num_outputs }} output{{ link.num_outputs|pluralize }}</small>
    </td>
</tr>