{% extends "ui/_layout.html" %}
{% from "ui/_table_macros.html" import sort_header, pagination_inline, filter_form with context %}
{% block title %}Misses - withcache{% endblock %}

{% block subnav %}
<nav class="navbar subnav-strip" aria-label="Section sub-navigation">
    <div class="container">
        <span class="subnav-jumps d-flex align-items-center flex-wrap">
            <a href="#misses-list">Misses</a>
        </span>
    </div>
</nav>
{% endblock %}

{% block intro %}
<div class="alert alert-secondary small mb-3">
    URLs that clients requested but withcache doesn't have downloaded.
    Useful for the "what's suddenly popular?" question: if a URL keeps
    showing up here, it's probably worth adding to the catalog. Per-row
    <strong>Fetch</strong> promotes the URL to a first-class catalog
    entry AND enqueues its download; <strong>Dismiss</strong> removes
    the recorded miss when the operator doesn't want it in the catalog.
</div>
{% endblock %}

{% block content %}
<div class="card mb-3" id="misses-list">
    <div class="card-header bg-light fw-semibold d-flex flex-wrap align-items-center gap-3 py-2">
        <span class="text-nowrap"><i class="bi bi-exclamation-diamond me-1"></i>Recorded misses</span>
        <span class="vr"></span>
        {{ filter_form(q, sort, page, per_page_choices, 'misses-q', placeholder='Filter (URL substring)') }}
        {{ pagination_inline(page, preserved, label='misses') }}
    </div>
    <div class="table-responsive">
        <table class="table table-striped table-hover mb-0 align-middle">
            <thead class="table-light">
                <tr>
                    {{ sort_header('URL', 'url', sort, preserved) }}
                    {{ sort_header('Count', 'count', sort, preserved, 'class="text-end" style="width: 1%; white-space: nowrap;"') }}
                    {{ sort_header('First seen', 'first_seen', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    {{ sort_header('Last seen', 'last_seen', sort, preserved, 'style="width: 1%; white-space: nowrap;"') }}
                    <th class="text-end" style="width: 1%; white-space: nowrap;">Action</th>
                </tr>
            </thead>
            <tbody>
                {% for r in rows %}
                <tr>
                    <td class="small font-monospace text-truncate" style="max-width: 32rem;"
                        title="{{ r['url'] }}">{{ r['url'] }}</td>
                    <td class="text-end">{{ r['count'] }}</td>
                    <td class="small text-muted">{{ r['first_seen'] }}</td>
                    <td class="small text-muted">{{ r['last_seen'] }}</td>
                    <td class="text-end text-nowrap">
                        <form method="post" action="/admin/fetch" class="d-inline m-0">
                            <input type="hidden" name="url" value="{{ r['url'] }}">
                            <button type="submit" class="btn btn-sm btn-outline-primary me-1"
                                    title="Add this URL as a catalog entry and download it">
                                <i class="bi bi-cloud-download"></i>
                            </button>
                        </form>
                        <form method="post" action="/admin/dismiss" class="d-inline m-0">
                            <input type="hidden" name="key" value="{{ r['key'] }}">
                            <button type="submit" class="btn btn-sm btn-outline-secondary"
                                    title="Dismiss this recorded miss">
                                <i class="bi bi-x-lg"></i>
                            </button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
                {% if not rows %}
                <tr><td colspan="5" class="text-muted text-center py-3">
                    {% if q %}
                    No misses match <code>{{ q }}</code>.
                    {% else %}
                    No recorded misses yet.
                    {% endif %}
                </td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>
{% endblock %}