{% extends "base.html" %}
{% load static tz %}
{% load core_tags %}

{% block extra_head %}
<style>
    #content.flex {
        display: block;
    }

    .public-snapshot-list {
        width: 100%;
    }

    .public-snapshot-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        margin: 0 0 14px;
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    .public-snapshot-toolbar form {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        flex: 1;
        margin: 0;
    }

    .public-search-input {
        position: relative;
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        flex: 1 1 420px;
        min-width: 220px;
        height: 34px;
        border: 1px solid #cbd5e1;
        border-radius: 7px;
        background: #fff;
        overflow: hidden;
    }

    .public-search-addon {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 2px;
        box-sizing: border-box;
        width: 46px;
        height: 100%;
        padding: 0;
        border-right: 1px solid #e2e8f0;
        background: #f8fafc;
        cursor: pointer;
    }

    .public-snapshot-toolbar label.search-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        height: 16px;
        margin: 0;
        opacity: 0.65;
    }

    .public-search-mode-select {
        appearance: none;
        -webkit-appearance: none;
        position: absolute;
        inset: 0 auto 0 0;
        width: 46px;
        min-width: 46px;
        max-width: 46px;
        height: 100%;
        padding: 0;
        border: 0;
        background: transparent;
        color: #111827;
        font-size: 14px;
        opacity: 1;
        outline: 0;
        text-indent: -9999px;
        cursor: pointer;
        z-index: 3;
    }

    .public-search-mode-select option {
        background: #ffffff;
        color: #111827;
        font-size: 14px;
        line-height: 1.4;
        text-indent: 0;
    }

    .public-search-addon .search-mode-caret {
        color: #64748b;
        font-size: 10px;
        line-height: 1;
        pointer-events: none;
        transform: translateY(1px);
    }

    .public-snapshot-toolbar #searchbar {
        width: 100%;
        min-width: 180px;
        height: 100%;
        box-sizing: border-box;
        padding: 6px 10px;
        border: 0;
        border-radius: 0;
        font-size: 13px;
    }

    .public-snapshot-toolbar input[type="submit"] {
        height: 34px;
        margin: 0;
        padding: 0 14px;
        border-radius: 7px;
    }

    .public-snapshot-count {
        color: #64748b;
        font-size: 12px;
        white-space: nowrap;
    }

    .public-snapshot-table-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid #e2e8f0;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    }

    #table-bookmarks {
        width: 100%;
        min-width: 980px;
        table-layout: fixed;
        border-collapse: collapse;
    }

    #table-bookmarks thead th {
        padding: 9px 10px;
        border-bottom: 1px solid #e2e8f0;
        background: #f8fafc;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.04em;
        text-transform: uppercase;
    }

    #table-bookmarks tbody td {
        padding: 10px;
        border-bottom: 1px solid #edf2f7;
        vertical-align: middle;
    }

    #table-bookmarks tbody tr:hover {
        background: #f8fafc;
    }

    #table-bookmarks tbody tr:last-child td {
        border-bottom: 0;
    }

    .snapshot-time {
        width: 102px;
        white-space: nowrap;
    }

    .snapshot-time a {
        display: inline-flex;
        flex-direction: column;
        color: #334155;
        text-decoration: none;
        line-height: 1.2;
    }

    .snapshot-time small {
        color: #94a3b8;
        font-size: 11px;
    }

    .snapshot-mobile-saved {
        display: none;
    }

    .snapshot-preview-cell {
        position: relative;
        width: 110px;
        min-width: 116px;
        vertical-align: middle;
    }

    .snapshot-preview-cell a {
        position: absolute;
        top: 10px;
        bottom: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 102px;
        line-height: 0;
        vertical-align: middle;
    }

    .snapshot-preview-cell .snapshot-thumbnail {
        width: 100% !important;
        height: 100% !important;
    }

    #content .public-snapshot-list .snapshot-preview-cell .snapshot-preview,
    #content .public-snapshot-list .snapshot-preview-cell img.snapshot-preview.screenshot {
        box-sizing: border-box;
        display: block;
        width: 100px;
        height: 100px;
        max-width: 100px;
        max-height: 100px;
        margin: 0;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        background: #f8fafc;
        object-fit: cover;
        object-position: top;
    }

    #content .public-snapshot-list .snapshot-preview-cell .snapshot-preview-spinner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        object-fit: unset;
    }

    #content .public-snapshot-list .snapshot-preview-cell .snapshot-preview-spinner img {
        display: block;
        width: 18px;
        height: 18px;
        max-width: 18px;
        max-height: 18px;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .snapshot-title-cell {
        min-width: 0;
    }

    .snapshot-title-line {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        margin-bottom: 1px;
    }

    #content .snapshot-url .link-favicon {
        display: block;
        width: 1em;
        height: 1em;
        max-width: 1em;
        flex: 0 0 1em;
        border-radius: 50%;
        object-fit: contain; opacity: 0.75; font-size: inherit;
    }

    #content .snapshot-url .link-favicon-empty { display: none; }
    .snapshot-url-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

    .snapshot-title {
        display: block;
        min-width: 0;
        overflow: hidden;
        color: #0f172a;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
    }

    .snapshot-url {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-left: 0;
        overflow: hidden;
        color: #84909f;
        font-family: "Helvetica Neue", Arial, sans-serif;
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.25;
        user-select: all;
        text-overflow: ellipsis;
        white-space: nowrap;
        text-decoration: none;
    }

    .snapshot-url:hover,
    .snapshot-title:hover {
        text-decoration: underline;
    }

    .snapshot-url .snapshot-url-domain {
        color: #64748b;
        font-weight: 400;
    }

    .snapshot-url :is(.snapshot-url-prefix, .snapshot-url-suffix) {
        color: #b0b7c0;
        font-weight: 400;
    }

    .snapshot-tags-cell {
        width: 190px;
    }

    .snapshot-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        max-height: 46px;
        overflow: hidden;
    }

    .snapshot-tag {
        display: block;
        min-width: 0;
        max-width: min(160px, 100%);
        box-sizing: border-box;
        padding: 2px 7px;
        border: 1px solid #bfdbfe;
        border-radius: 999px;
        background: #eff6ff;
        color: #1d4ed8;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.35;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .snapshot-status-cell {
        width: 96px;
    }

    .snapshot-status {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 68px;
        padding: 3px 8px;
        border-radius: 999px;
        background: #f1f5f9;
        color: #475569;
        font-size: 11px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }

    .status-sealed .snapshot-status,
    .status-succeeded .snapshot-status {
        background: #d1fae5;
        color: #047857;
    }

    .status-started .snapshot-status {
        background: #dbeafe;
        color: #1d4ed8;
    }

    .status-queued .snapshot-status,
    .status-backoff .snapshot-status {
        background: #fef3c7;
        color: #b45309;
    }

    .status-failed .snapshot-status {
        background: #fee2e2;
        color: #b91c1c;
    }

    .snapshot-files-cell {
        width: 132px;
        overflow: visible;
    }
    .snapshot-files-cell:has(.files-icon-pile:hover), .snapshot-files-cell:has(.files-icon-pile:focus-within) { position: relative; z-index: 10000; }

    .snapshot-files-cell .files-icons {
        display: inline-grid;
        grid-template-columns: repeat(5, 22px);
        grid-template-rows: 18px;
        grid-auto-flow: column;
        grid-auto-columns: 22px;
        gap: 0;
        max-width: 100%;
        vertical-align: middle;
    }

    .snapshot-files-cell .files-icon-pile { position: relative; display: inline-block; width: 16px; height: 18px; isolation: isolate; vertical-align: top; }
    .snapshot-files-cell .files-icon-pile::before, .snapshot-files-cell .files-icon-pile::after { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border: 1px solid #d9cdd3; border-radius: 3px; background: #f7f2f4; content: ""; pointer-events: none; }
    .snapshot-files-cell .files-icon-pile::before { transform: translate(2px,-2px) rotate(7deg); z-index: -2; }
    .snapshot-files-cell .files-icon-pile::after { transform: translate(1px,-1px) rotate(3deg); z-index: -1; background: #ece5e8; }
    .snapshot-files-cell .files-icon-pile-backplate { position: absolute; top: 20px; left: var(--files-icon-popup-left,0px); z-index: 0; display: none; width: var(--files-icon-card-width,116px); height: calc(var(--files-icon-rows,1) * 18px + 10px); border: 1px solid #d9cdd3; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px #35202d26; pointer-events: auto; }
    .snapshot-files-cell .files-icon-pile-popup { position: absolute; top: 20px; left: var(--files-icon-popup-left,0px); z-index: 0; box-sizing: border-box; display: block; width: var(--files-icon-card-width,116px); min-height: calc(var(--files-icon-rows,1) * 18px + 10px); margin: 0; padding: 8px 6px 4px; overflow: visible; border: 1px solid #d9cdd3; border-radius: 6px; background: #fff; box-shadow: 0 4px 12px #35202d26; opacity: 1; }
    .snapshot-files-cell .files-icon-pile-popup > a, .snapshot-files-cell .files-icon-pile-popup > span { position: absolute; top: var(--files-icon-member-top,8px); left: var(--files-icon-member-left,6px); }
    .snapshot-files-cell .files-icon-pile-popup::before { position: absolute; top: -5px; left: 0; width: 100%; height: 5px; clip-path: polygon(var(--files-icon-bridge-start,0px) 0,var(--files-icon-bridge-end,16px) 0,100% 100%,0 100%); content: ""; pointer-events: auto; }
    .snapshot-files-cell .files-icon-pile:hover > .files-icon-pile-backplate, .snapshot-files-cell .files-icon-pile:focus-within > .files-icon-pile-backplate { display: block; }
    .snapshot-files-cell .files-icon-pile > .files-icon-pile-hover-bridge { position: absolute; top: 17px; left: var(--files-icon-popup-left,0px); z-index: 1; display: none; width: var(--files-icon-card-width,116px); height: 5px; clip-path: polygon(var(--files-icon-bridge-start,0px) 0,var(--files-icon-bridge-end,16px) 0,100% 100%,0 100%); pointer-events: auto; }
    .snapshot-files-cell .files-icon-pile:hover > .files-icon-pile-hover-bridge, .snapshot-files-cell .files-icon-pile:focus-within > .files-icon-pile-hover-bridge { display: block; }
    .snapshot-files-cell .files-icon-pile > a:not(.files-icon-pile-popup), .snapshot-files-cell .files-icon-pile > span:not(.files-icon-pile-popup) { position: absolute; top: 1px; left: min(calc(var(--files-icon-index,0) * 1px),2px); z-index: var(--files-icon-index,0); }
    .snapshot-files-cell .files-icon-pile > .files-icon-pile-top { left: var(--files-icon-front-offset,0px); z-index: calc(100 + var(--files-icon-front-index,0)); }
    .snapshot-files-cell .files-icon-pile > a:hover, .snapshot-files-cell .files-icon-pile > a:focus-visible { z-index: 10000 !important; }
    .snapshot-files-cell .files-icon-pile:hover, .snapshot-files-cell .files-icon-pile:focus-within { z-index: 9999; overflow: visible; }
    .snapshot-files-cell .files-icon-pile > :not(.files-icon-pile-cover):not(.files-icon-pile-backplate):not(.files-icon-pile-hover-bridge):not(.files-icon-pile-popup) { visibility: hidden; transition: visibility 0s linear 150ms; }
    .snapshot-files-cell .files-icon-pile > .files-icon-pile-cover { z-index: 200; }
    .snapshot-files-cell .files-icon-pile a[data-tooltip]::after, .snapshot-files-cell .files-icon-pile span[data-tooltip]::after { position: absolute; bottom: calc(100% + 7px); left: 0; z-index: 10001; padding: 5px 8px; border: 1px solid #111827; border-radius: 6px; background: #1f2937; box-shadow: 0 4px 12px #0f172a33; color: #fff; content: attr(data-tooltip); font-size: 11px; font-weight: 600; line-height: 1.2; opacity: 0; pointer-events: none; transition: opacity .08s ease,visibility 0s linear .08s; visibility: hidden; white-space: nowrap; }
    .snapshot-files-cell .files-icon-pile a[data-tooltip]:hover::after, .snapshot-files-cell .files-icon-pile a[data-tooltip]:focus-visible::after, .snapshot-files-cell .files-icon-pile span[data-tooltip]:hover::after { opacity: 1; transition-delay: .08s,0s; visibility: visible; }
    .snapshot-files-cell .files-icon-pile:hover > :not(.files-icon-pile-cover):not(.files-icon-pile-backplate):not(.files-icon-pile-hover-bridge):not(.files-icon-pile-popup), .snapshot-files-cell .files-icon-pile:focus-within > :not(.files-icon-pile-cover):not(.files-icon-pile-backplate):not(.files-icon-pile-hover-bridge):not(.files-icon-pile-popup) { top: calc(24px + var(--files-icon-row,0) * 18px); left: var(--files-icon-member-left,3px); visibility: visible; transition-delay: 0s; }
    .snapshot-files-cell .files-icons:has(.files-icon-pile:hover) .files-icon-pile:not(:hover), .snapshot-files-cell .files-icons:has(.files-icon-pile:focus-within) .files-icon-pile:not(:focus-within) { opacity: .2; }
    .snapshot-files-cell .files-icon-pile > a.files-icon-pile-cover:hover::before, .snapshot-files-cell .files-icon-pile > a.files-icon-pile-cover:focus-visible::before { position: absolute; top: 17px; left: 50%; z-index: 210; width: 7px; height: 7px; transform: translateX(-50%) rotate(45deg); border-top: 1px solid #d9cdd3; border-left: 1px solid #d9cdd3; background: #fff; content: ""; }
    .snapshot-files-cell .files-icon-pile > .files-icon-pile-popup { top: 20px; left: var(--files-icon-popup-left,0px); visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .12s ease,visibility 0s linear 350ms; }
    .snapshot-files-cell .files-icon-pile:hover > .files-icon-pile-popup, .snapshot-files-cell .files-icon-pile:focus-within > .files-icon-pile-popup, .snapshot-files-cell .files-icon-pile > .files-icon-pile-popup:popover-open { top: 20px; left: var(--files-icon-popup-left,0px); visibility: visible; opacity: 1; pointer-events: auto; transition-delay: 0s; }

    .snapshot-files-cell .files-icons a {
        display: inline-flex;
        width: 16px;
        height: 16px;
        align-items: center;
        justify-content: center;
    }

    .snapshot-files-cell .abx-output-icon {
        display: inline-flex;
        width: 16px;
        height: 16px;
        align-items: center;
        justify-content: center;
        border: 1px solid #e2e8f0;
        border-radius: 3px;
        background: #f8fafc;
        color: #475569;
        font-size: 7px;
        font-weight: 700;
        pointer-events: none;
    }

    .snapshot-files-cell .abx-output-icon svg {
        display: block;
        width: 16px;
        height: 16px;
    }

    .snapshot-files-cell .abx-output-icon--singlefile { color: #4f46e5; background: #eef2ff; border-color: #c7d2fe; }
    .snapshot-files-cell .abx-output-icon--archivewebpage { color: #7c3aed; background: #f5f3ff; border-color: #ddd6fe; }
    .snapshot-files-cell .abx-output-icon--ytdlp { color: #dc2626; background: #fef2f2; border-color: #fecaca; }
    .snapshot-files-cell .abx-output-icon--readability { color: #b45309; background: #fffbeb; border-color: #fde68a; }
    .snapshot-files-cell .abx-output-icon--forumdl { color: #0369a1; background: #f0f9ff; border-color: #bae6fd; }
    .snapshot-files-cell .abx-output-icon--papersdl { color: #0f766e; background: #f0fdfa; border-color: #99f6e4; }
    .snapshot-files-cell .abx-output-icon--git { color: #c2410c; background: #fff7ed; border-color: #fed7aa; }
    .snapshot-files-cell .abx-output-icon--gallerydl { color: #be185d; background: #fdf2f8; border-color: #fbcfe8; }
    .snapshot-files-cell .abx-output-icon--screenshot { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
    .snapshot-files-cell .files-icon-plugin--screenshot { color: #15803d; }

    @keyframes snapshot-spin {
        to { transform: rotate(360deg); }
    }

    .snapshot-size-cell {
        width: 102px;
        white-space: nowrap;
    }

    .snapshot-size-cell a {
        display: block;
        color: #334155;
        font-size: 12px;
        font-weight: 700;
        text-decoration: none;
    }

    .snapshot-size-cell small {
        display: block;
        color: #94a3b8;
        font-size: 10px;
        line-height: 1.2;
    }

    .empty-value {
        color: #cbd5e1;
    }

    .public-search-empty {
        padding: 28px 18px;
        color: #475569;
        text-align: center;
        background: #f8fafc;
    }

    .public-search-empty code {
        display: inline-block;
        margin-left: 4px;
        padding: 2px 6px;
        border-radius: 5px;
        background: #e2e8f0;
        color: #0f172a;
        font-size: 12px;
    }

    .public-pagination {
        margin: 18px 0 0;
        text-align: center;
        color: #64748b;
        font-size: 13px;
    }

    .public-pagination .step-links {
        display: inline-flex;
        gap: 12px;
        align-items: center;
        margin-top: 6px;
    }

    @media (max-width: 980px) {
        .public-snapshot-toolbar,
        .public-snapshot-toolbar form {
            align-items: stretch;
            flex-direction: column;
        }

        .public-snapshot-count {
            align-self: flex-start;
        }

        .public-search-input {
            width: 100%;
            flex-basis: auto;
        }
    }

    @media (max-width: 600px) {
        .public-snapshot-toolbar {
            padding: 8px;
        }

        .public-snapshot-toolbar form {
            width: 100%;
        }

        .public-search-input {
            min-width: 0;
        }

        .public-snapshot-toolbar input[type="submit"] {
            display: none;
        }

        #table-bookmarks {
            min-width: 0;
        }

        #table-bookmarks th:nth-child(n + 4),
        #table-bookmarks td:nth-child(n + 4) {
            display: none;
        }

        #table-bookmarks th.snapshot-time,
        #table-bookmarks td.snapshot-time {
            display: none;
        }

        #table-bookmarks .snapshot-preview-cell {
            width: 92px;
            min-width: 92px;
            padding-left: 5px;
            padding-right: 5px;
        }

        .snapshot-preview-cell a {
            width: 82px;
            top: 7px;
            bottom: 7px;
        }

        #content .public-snapshot-list .snapshot-preview-cell .snapshot-preview,
        #content .public-snapshot-list .snapshot-preview-cell img.snapshot-preview.screenshot {
            width: 80px;
            height: 80px;
            max-width: 80px;
            max-height: 80px;
        }

        .snapshot-mobile-saved {
            display: block;
            margin: 4px 0 0 30px;
            color: #64748b;
            font-size: 11px;
            font-weight: 500;
            line-height: 1.2;
            white-space: nowrap;
        }

        #table-bookmarks thead th,
        #table-bookmarks tbody td {
            padding-top: 7px;
            padding-bottom: 7px;
        }
    }
</style>
<script>
    function nextPublicSnapshotPreview(img) {
        const fallbacks = (img.dataset.fallbacks || '').split(',').filter(Boolean)
        if (fallbacks.length) {
            img.src = fallbacks.shift()
            img.dataset.fallbacks = fallbacks.join(',')
            return
        }
        img.style.opacity = 0
    }
</script>
{% endblock %}

{% block body %}
    <div class="public-snapshot-list">
        <div class="public-snapshot-toolbar">
            <form id="changelist-search" action="{{ request.path }}" method="get">
                <span class="public-search-input">
                    <span class="public-search-addon">
                        <label class="search-icon" for="searchbar"><img src="/static/admin/img/search.svg" alt="Search"></label>
                        <select name="search_mode" class="public-search-mode-select" aria-label="Search mode">
                            {% for option in search_mode_options %}
                            <option value="{{ option.value }}"{% if search_mode == option.value %} selected{% endif %}>{{ option.label }}</option>
                            {% endfor %}
                        </select>
                        <span class="search-mode-caret" aria-hidden="true">▾</span>
                    </span>
                    <input type="text" size="40" name="q" value="{{ request.GET.q }}" id="searchbar" autofocus placeholder="Search title, URL, tags, timestamp, or content...">
                </span>
                <input type="submit" value="Search">
            </form>
            <div class="public-snapshot-count">
                {% if public_search_stream_pending %}
                    <span class="archivebox-search-stream-status" role="status" aria-live="polite">Searching...</span>
                {% else %}
                    {{ page_obj.start_index }}-{{ page_obj.end_index }}{% if public_snapshot_count != None %} of {{ public_snapshot_count }}{% endif %}
                    <span>(page {{ page_obj.number }}{% if public_page_count != None %} of {{ public_page_count }}{% endif %})</span>
                {% endif %}
            </div>
        </div>
        <div class="public-snapshot-table-wrap">
            <table id="table-bookmarks">
                <thead>
                    <tr>
                        <th class="snapshot-time">Saved</th>
                        <th class="snapshot-preview-cell">Preview</th>
                        <th>Snapshot{% if public_snapshot_count != None %} ({{ public_snapshot_count }}){% endif %}</th>
                        <th class="snapshot-tags-cell">Tags</th>
                        <th class="snapshot-status-cell">Status</th>
                        <th class="snapshot-files-cell">Files</th>
                        <th class="snapshot-size-cell">Size</th>
                    </tr>
                </thead>
                <tbody>
                    {% for link in object_list %}
                        {% snapshot_index_row link %}
                    {% empty %}
                        <tr>
                            <td colspan="7" class="public-search-empty">
                                {% if public_search_stream_pending %}
                                    Searching {{ search_mode }} for matching snapshots...
                                {% elif show_search_index_hint %}
                                    0 results from {{ search_mode }}. If this looks wrong, the search index may need to be updated:
                                    <code>archivebox update --index-only</code>
                                {% else %}
                                    No snapshots found.
                                {% endif %}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div class="public-pagination">
            Showing {{ page_obj.start_index }}-{{ page_obj.end_index }}{% if public_snapshot_count != None %} of {{ public_snapshot_count }} total{% endif %}
            <br>
            <span class="step-links">
                {% if page_obj.has_previous %}
                    <a href="?{% url_replace page='1' %}">&laquo; first</a>
                    <a href="?{% url_replace page=page_obj.previous_page_number %}">previous</a>
                {% endif %}

                <span class="current">
                    Page {{ page_obj.number }}{% if public_page_count != None %} of {{ public_page_count }}{% endif %}
                </span>

                {% if page_obj.has_next %}
                    <a href="?{% url_replace page=page_obj.next_page_number %}">next</a>
                {% endif %}
                {% if page_obj.has_next and public_page_count != None %}
                    <a href="?{% url_replace page=public_page_count %}">last &raquo;</a>
                {% endif %}
            </span>
        </div>
    </div>
    <script>
        (function() {
            if (window.archiveboxPublicSearchStreamReady) return
            window.archiveboxPublicSearchStreamReady = true

            const storageKey = 'archivebox-admin-search-mode'
            let activeSearch = null

            function initPublicSearchMode() {
                const params = new URLSearchParams(window.location.search)
                document.querySelectorAll('.public-search-mode-select').forEach(function(select) {
                    if (select.dataset.publicSearchModeReady) return
                    select.dataset.publicSearchModeReady = '1'
                    const values = Array.from(select.options).map(option => option.value)
                    const stored = localStorage.getItem(storageKey)
                    if (!params.has('search_mode') && values.includes(stored)) {
                        select.value = stored
                        if ((params.get('q') || '').trim()) {
                            params.set('search_mode', stored)
                            params.delete('page')
                            window.location.replace(window.location.pathname + '?' + params.toString() + window.location.hash)
                            return
                        }
                    }
                    select.addEventListener('change', function() {
                        localStorage.setItem(storageKey, select.value)
                    })
                })
            }

            function setSearchLoading(controller, text) {
                if (activeSearch !== controller) return
                const toolbar = document.querySelector('.public-snapshot-toolbar')
                if (!toolbar) return
                let status = toolbar.querySelector('.archivebox-search-stream-status')
                if (!status) {
                    status = document.createElement('span')
                    status.className = 'archivebox-search-stream-status'
                    status.setAttribute('role', 'status')
                    status.setAttribute('aria-live', 'polite')
                    const count = toolbar.querySelector('.public-snapshot-count')
                    if (count) count.appendChild(status)
                    else toolbar.appendChild(status)
                }
                status.textContent = text || 'Searching...'
                status.hidden = false
                toolbar.setAttribute('aria-busy', 'true')
            }

            function clearSearchLoading(controller) {
                if (activeSearch && activeSearch !== controller) return
                const toolbar = document.querySelector('.public-snapshot-toolbar')
                if (!toolbar) return
                const status = toolbar.querySelector('.archivebox-search-stream-status')
                if (status) status.hidden = true
                toolbar.removeAttribute('aria-busy')
            }

            function clearStaleSearchResults(mode) {
                const tbody = document.querySelector('#table-bookmarks tbody')
                if (tbody) {
                    tbody.innerHTML = '<tr><td colspan="7" class="public-search-empty">Searching ' + mode + ' for matching snapshots...</td></tr>'
                }
                const snapshotHeading = document.querySelector('#table-bookmarks thead th:nth-child(3)')
                if (snapshotHeading) snapshotHeading.textContent = 'Snapshot'
                const pagination = document.querySelector('.public-pagination')
                if (pagination) pagination.textContent = 'Searching...'
            }

            function cancelActiveSearch(event) {
                if (!event.target || (event.target.name !== 'q' && event.target.name !== 'search_mode')) return
                if (activeSearch) {
                    const controller = activeSearch
                    activeSearch.abort()
                    clearSearchLoading(controller)
                }
            }

            function streamPublicSnapshotSearch(eventOrForm) {
                const form = eventOrForm && eventOrForm.target ? eventOrForm.target : eventOrForm
                if (!form || form.id !== 'changelist-search') return

                const formData = new FormData(form)
                const mode = String(formData.get('search_mode') || 'meta')
                const query = String(formData.get('q') || '').trim()
                if (!query) return

                if (eventOrForm && eventOrForm.preventDefault) eventOrForm.preventDefault()
                if (activeSearch) activeSearch.abort()

                const controller = new AbortController()
                activeSearch = controller
                setSearchLoading(controller, 'Searching...')
                let resultVersion = 0

                function buildListUrl() {
                    const url = new URL(window.location.href)
                    for (const pair of formData.entries()) url.searchParams.set(pair[0], pair[1])
                    url.searchParams.delete('page')
                    url.searchParams.delete('p')
                    return url
                }

                function replaceRegionFromDocument(doc, selector) {
                    const next = doc.querySelector(selector)
                    const current = document.querySelector(selector)
                    if (next && current) current.innerHTML = next.innerHTML
                }

                async function renderNow() {
                    const url = buildListUrl()
                    const response = await fetch(url, {headers: {'X-Requested-With': 'XMLHttpRequest'}, signal: controller.signal})
                    const html = await response.text()
                    const doc = new DOMParser().parseFromString(html, 'text/html')
                    replaceRegionFromDocument(doc, '.public-snapshot-count')
                    replaceRegionFromDocument(doc, '#table-bookmarks thead th:nth-child(3)')
                    replaceRegionFromDocument(doc, '#table-bookmarks tbody')
                    replaceRegionFromDocument(doc, '.public-pagination')
                    setSearchLoading(controller, resultVersion ? 'Searching... ' + resultVersion + ' found' : 'Searching...')
                }

                const listUrl = buildListUrl()
                history.replaceState(null, '', listUrl)
                clearStaleSearchResults(mode)
                const streamUrl = new URL("{% url 'public-search-stream' %}", window.location.href)
                streamUrl.searchParams.set('q', query)
                streamUrl.searchParams.set('search_mode', mode)
                streamUrl.searchParams.set('search_url', listUrl.pathname + listUrl.search)
                fetch(streamUrl, {signal: controller.signal})
                    .then(function(response) {
                        const reader = response.body.getReader()
                        const decoder = new TextDecoder()
                        let buffer = ''
                        async function read() {
                            const result = await reader.read()
                            buffer += decoder.decode(result.value || new Uint8Array(), {stream: !result.done})
                            const lines = buffer.split('\n')
                            buffer = lines.pop()
                            let shouldRender = false
                            lines.forEach(function(count) {
                                count = parseInt(count.trim(), 10)
                                if (Number.isFinite(count)) {
                                    resultVersion = count
                                    if (count > 0) shouldRender = true
                                } else {
                                    resultVersion += 1
                                    shouldRender = true
                                }
                            })
                            setSearchLoading(controller, resultVersion ? 'Searching... ' + resultVersion + ' found' : 'Searching...')
                            if (shouldRender || result.done) await renderNow()
                            if (!result.done) return read()
                        }
                        return read()
                    })
                    .catch(function(error) {
                        if (error.name !== 'AbortError') throw error
                    })
                    .finally(function() {
                        clearSearchLoading(controller)
                        if (activeSearch === controller) activeSearch = null
                    })
            }

            initPublicSearchMode()
            document.addEventListener('input', cancelActiveSearch)
            document.addEventListener('change', cancelActiveSearch)
            document.addEventListener('submit', streamPublicSnapshotSearch)
            const initialForm = document.getElementById('changelist-search')
            if (initialForm && initialForm.tagName === 'FORM' && String(new FormData(initialForm).get('q') || '').trim()) {
                streamPublicSnapshotSearch(initialForm)
            }
        })()
    </script>
{% endblock %}