{% extends "base.html" %}

{% block extra_head %}
<style>
/* Hosts Page */
.hosts-section { max-width: 1440px; margin: 0 auto; }

.performance-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.search-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.pagination-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

#page-info {
    color: var(--text-muted);
    font-size: 0.82rem;
    font-family: 'JetBrains Mono', monospace;
    white-space: nowrap;
}

.search-input {
    padding: 0.45rem 0.75rem;
    background: var(--gb-bg-h);
    border: 1px solid var(--gb-bg2);
    border-radius: 0;
    color: var(--text-primary);
    font-size: 0.82rem;
    min-width: 220px;
    font-family: 'JetBrains Mono', monospace;
    transition: border-color 0.1s;
}
.search-input:focus {
    outline: none;
    border-color: var(--gb-blue);
    box-shadow: 0 0 0 1px var(--gb-blue);
}

/* Filter pills */
.scanning-in-progress {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    margin-bottom: 1rem;
    background: var(--gb-bg);
    border: 1px solid var(--gb-bg1);
    border-left: 3px solid var(--gb-yellow);
    color: var(--gb-yellow-b);
    font-size: 0.85rem;
    font-family: 'JetBrains Mono', monospace;
}
.scanning-icon { font-size: 0.9rem; animation: pulse-dim 1.8s ease-in-out infinite; }
@keyframes pulse-dim { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
.scanning-text { color: var(--text-secondary); }

.filter-pills {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.filter-pill {
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-family: 'JetBrains Mono', monospace;
    border: 1px solid var(--gb-bg2);
    background: var(--gb-bg-h);
    color: var(--text-muted);
    text-decoration: none;
    transition: border-color 0.1s, color 0.1s, background 0.1s;
    white-space: nowrap;
}
.filter-pill:hover { border-color: var(--gb-blue); color: var(--gb-fg); }
.filter-pill.active { background: var(--gb-blue); color: var(--gb-fg); border-color: var(--gb-blue-b); }

/* Wrapper is the scroll container — table must NOT have width:100% to overflow correctly */
.table-wrapper { overflow-x: auto; }

/* width:auto lets table grow to natural content width — min-width:100% ensures it fills wrapper */
/* when natural width > wrapper → overflow-x:auto triggers scrollbar */
.hosts-table {
    table-layout: auto;
    width: auto;
    min-width: 100%;
}

/* All cells nowrap so columns size to their largest content */
.hosts-table th,
.hosts-table td { white-space: nowrap; }

/* Visible column and row separators */
.hosts-table td { border-right: 1px solid var(--gb-bg2); border-bottom: 1px solid var(--gb-bg2); }
.hosts-table td:last-child { border-right: none; }
.hosts-table th { border-right: 1px solid var(--gb-bg2); }
.hosts-table th:last-child { border-right: none; }

/* Tags: rows of 3, each row packed tightly at natural widths */
.hosts-table .tags { display: flex; flex-direction: column; gap: 0.3rem; width: fit-content; }
.hosts-table .tag-row { display: flex; gap: 0.3rem; }

.host-domain { color: var(--text-muted); font-size: 0.78rem; margin-left: 0.25rem; }

/* Center all columns except Tags (5) */
.hosts-table th:not(:nth-child(5)),
.hosts-table td:not(:nth-child(5)) {
    text-align: center;
}

.host-ad-domain { color: var(--text-muted); font-size: 0.82rem; font-family: 'JetBrains Mono', monospace; }

/* Sort headers with explicit up/down arrows */
th { cursor: default; }
.sort-header {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
}
.sort-arrows {
    display: flex;
    flex-direction: column;
    gap: 0;
    line-height: 1;
}
.sort-btn {
    display: block;
    font-size: 0.58rem;
    color: var(--text-dim);
    text-decoration: none;
    cursor: pointer;
    line-height: 1.15;
    transition: color 0.1s;
}
.sort-btn:hover { color: var(--gb-blue); }
.sort-active { color: var(--gb-yellow) !important; }

.port-count { white-space: nowrap; }
.service-count { white-space: nowrap; }

.analysis-status-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 32px;
}

.analysis-complete,
.analysis-pending,
.analysis-not-ready {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-family: 'JetBrains Mono', monospace;
    border-radius: 0;
    border: 1px solid;
    min-width: 110px;
    justify-content: center;
}

.analysis-complete {
    background-color: var(--gb-blue);
    color: var(--gb-fg);
    border-color: var(--gb-blue-b);
}

.analysis-pending {
    background-color: var(--gb-yellow);
    color: var(--gb-bg-h);
    border-color: var(--gb-yellow-b);
}

.analysis-not-ready {
    background-color: var(--gb-bg1);
    color: var(--text-dim);
    border-color: var(--gb-bg2);
    cursor: not-allowed;
}

.bookmark-btn {
    background: none;
    border: 1px solid var(--gb-bg2);
    color: var(--text-dim);
    line-height: 1;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s, background 0.1s;
    border-radius: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bookmark-btn:hover      { color: var(--gb-yellow); border-color: var(--gb-yellow); }
.bookmark-btn.bookmarked { color: var(--gb-yellow); border-color: var(--gb-yellow-b);
                           background: rgba(215,153,33,0.12); }

.host-row { border-left: 3px solid var(--gb-bg3); }
.analyzed-host {
    background-color: rgba(69, 133, 136, 0.06);
    border-left: 3px solid var(--gb-blue);
}
.nuclei-reviewed-host {
    background-color: rgba(104, 157, 106, 0.06);
    border-left: 3px solid var(--gb-aqua);
}

.nuclei-review-complete {
    background-color: var(--gb-aqua);
    color: var(--gb-bg-h);
    border-color: var(--gb-aqua);
}
.nuclei-review-pending {
    background-color: var(--gb-yellow);
    color: var(--gb-bg-h);
    border-color: var(--gb-yellow-b);
}


@media (max-width: 900px) {
    .performance-controls { flex-direction: column; align-items: flex-start; }
    .pagination-controls { margin-left: 0; }
}

@media (max-width: 768px) {
    .search-input { min-width: 180px; }
    .hosts-table th:nth-child(3), .hosts-table td:nth-child(3) { display: none; }
    .hosts-table th:nth-child(8), .hosts-table td:nth-child(8) { display: none; }
}

/* Hide all rows by default; JS shows only the current page */
#hosts-tbody tr { display: none; }

/* Non-sortable column headers */
th.no-sort { color: var(--text-muted); cursor: default; }
</style>
{% endblock %}
{% block title %}Hosts{% endblock %}

{% block content %}
<div class="hosts-section">
    <div class="section-header">
        <h1>Discovered Hosts</h1>
        <div class="host-stats">
            <span id="host-count">{{ hosts.len() }} hosts total</span>
            <span class="separator">|</span>
            <span id="filtered-count">{{ hosts.len() }} showing</span>
        </div>
    </div>

    <!-- Controls -->
    <div class="performance-controls">
        <div class="search-controls">
            <input type="text" id="quick-search" placeholder="Search IP, hostname, or tags..." class="search-input">
            <button id="clear-search" class="btn btn-secondary">Clear</button>
        </div>
        <div class="pagination-controls">
            <select id="page-size">
                <option value="50">50 per page</option>
                <option value="100" selected>100 per page</option>
                <option value="200">200 per page</option>
                <option value="all">Show all</option>
            </select>
            <div class="pagination-info">
                <span id="page-info">Page 1 of 1</span>
                <button id="prev-page" class="btn btn-secondary" disabled>Previous</button>
                <button id="next-page" class="btn btn-secondary" disabled>Next</button>
            </div>
        </div>
    </div>

    <!-- Filter pills -->
    <div class="filter-pills">
        <span style="font-size:0.72rem;color:var(--text-muted);font-family:'JetBrains Mono',monospace;">Filter:</span>
        <a href="{{ url_filter_clear }}" class="filter-pill {% if filter == "" %}active{% endif %}" data-filter="">All</a>
        <a href="{% if filter == "interesting" %}{{ url_filter_clear }}{% else %}{{ url_filter_interesting }}{% endif %}" class="filter-pill {% if filter == "interesting" %}active{% endif %}" data-filter="interesting">★ Bookmarked</a>
        <a href="{% if filter == "not_interesting" %}{{ url_filter_clear }}{% else %}{{ url_filter_not_interesting }}{% endif %}" class="filter-pill {% if filter == "not_interesting" %}active{% endif %}" data-filter="not_interesting">Not Bookmarked</a>
        <a href="{% if filter == "analyzed_ready" %}{{ url_filter_clear }}{% else %}{{ url_filter_analyzed_ready }}{% endif %}" class="filter-pill {% if filter == "analyzed_ready" %}active{% endif %}" data-filter="analyzed_ready">Ready to Analyze</a>
        <a href="{% if filter == "analyzed_done" %}{{ url_filter_clear }}{% else %}{{ url_filter_analyzed_done }}{% endif %}" class="filter-pill {% if filter == "analyzed_done" %}active{% endif %}" data-filter="analyzed_done">Analyzed</a>
    </div>

    <!-- Empty state for analyzed_ready filter while scanning is still running -->
    {% if filter == "analyzed_ready" && hosts.is_empty() %}
    <div class="scanning-in-progress">
        <span class="scanning-icon">◎</span>
        <span class="scanning-text">Scanning in progress — no hosts have completed all workflow actions yet</span>
    </div>
    {% endif %}

    <!-- Hosts Table -->
    <div class="table-wrapper">
        <table class="hosts-table" id="hosts-table">
            <thead>
                <tr>
                    <th>
                        <div class="sort-header">
                            <span>IP Address</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=ip&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "ip" && dir == "asc" %}sort-active{% endif %}" data-sort="ip" data-dir="asc">▲</a>
                                <a href="/hosts?sort=ip&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "ip" && dir == "desc" %}sort-active{% endif %}" data-sort="ip" data-dir="desc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th>
                        <div class="sort-header">
                            <span>Hostname</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=hostname&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "hostname" && dir == "asc" %}sort-active{% endif %}" data-sort="hostname" data-dir="asc">▲</a>
                                <a href="/hosts?sort=hostname&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "hostname" && dir == "desc" %}sort-active{% endif %}" data-sort="hostname" data-dir="desc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th class="no-sort">Domain</th>
                    <th>
                        <div class="sort-header">
                            <span>Ports</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=ports&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "ports" && dir == "desc" %}sort-active{% endif %}" data-sort="ports" data-dir="desc">▲</a>
                                <a href="/hosts?sort=ports&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "ports" && dir == "asc" %}sort-active{% endif %}" data-sort="ports" data-dir="asc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th class="no-sort">Tags</th>
                    <th>
                        <div class="sort-header">
                            <span>HTTP Services</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=http&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "http" && dir == "desc" %}sort-active{% endif %}" data-sort="http" data-dir="desc">▲</a>
                                <a href="/hosts?sort=http&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "http" && dir == "asc" %}sort-active{% endif %}" data-sort="http" data-dir="asc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th class="no-sort">Status</th>
                    <th>
                        <div class="sort-header">
                            <span>User Analysis</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=analyzed&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "analyzed" && dir == "desc" %}sort-active{% endif %}" data-sort="analyzed" data-dir="desc">▲</a>
                                <a href="/hosts?sort=analyzed&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "analyzed" && dir == "asc" %}sort-active{% endif %}" data-sort="analyzed" data-dir="asc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th>
                        <div class="sort-header">
                            <span>Nuclei Review</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=nuclei_reviewed&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "nuclei_reviewed" && dir == "desc" %}sort-active{% endif %}" data-sort="nuclei_reviewed" data-dir="desc">▲</a>
                                <a href="/hosts?sort=nuclei_reviewed&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "nuclei_reviewed" && dir == "asc" %}sort-active{% endif %}" data-sort="nuclei_reviewed" data-dir="asc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th>
                        <div class="sort-header">
                            <span>Bookmark</span>
                            <div class="sort-arrows">
                                <a href="/hosts?sort=interesting&amp;dir=desc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "interesting" && dir == "desc" %}sort-active{% endif %}" data-sort="interesting" data-dir="desc">▲</a>
                                <a href="/hosts?sort=interesting&amp;dir=asc{% if !filter.is_empty() %}&amp;filter={{ filter }}{% endif %}" class="sort-btn {% if sort == "interesting" && dir == "asc" %}sort-active{% endif %}" data-sort="interesting" data-dir="asc">▼</a>
                            </div>
                        </div>
                    </th>
                    <th class="no-sort">Actions</th>
                </tr>
            </thead>
            <tbody id="hosts-tbody">
                {% for host in hosts %}
                <tr class="host-row {% if host.analyzed %}analyzed-host{% endif %} {% if host.nuclei_reviewed %}nuclei-reviewed-host{% endif %}" data-ip="{{ host.ip }}">
                    <td><a href="/hosts/{{ host.ip }}" class="host-link">{{ host.ip }}</a></td>
                    <td>
                        {% if !host.short_hostname.is_empty() %}
                            {{ host.short_hostname }}
                        {% else %}
                            <span class="no-data">-</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if !host.ad_domain.is_empty() %}
                            <span class="host-ad-domain">{{ host.ad_domain }}</span>
                        {% else %}
                            <span class="no-data">-</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if host.ports_count > 0 %}
                            <span class="port-count">{{ host.ports_count }} ports</span>
                        {% else %}
                            <span class="no-data">No ports</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if host.tags_with_source.len() > 0 %}
                            <div class="tags">
                                {% for tag in host.tags_with_source %}
                                {% if loop.index0 % 3 == 0 %}<div class="tag-row">{% endif %}
                                <span class="tag tag-{{ tag.source }}">{{ tag.name }}</span>
                                {% if loop.index0 % 3 == 2 || loop.last %}</div>{% endif %}
                                {% endfor %}
                            </div>
                        {% else %}
                            <span class="no-data">No tags</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if host.http_services_count > 0 %}
                            <span class="service-count">{{ host.http_services_count }}</span>
                        {% else %}
                            <span class="no-data">-</span>
                        {% endif %}
                    </td>
                    <td>
                        <div class="status-indicators">
                            <span class="status-indicator {% if host.ports_count > 0 %}complete{% else %}incomplete{% endif %}" title="Port Discovery">P</span>
                            <span class="status-indicator {% if host.service_scan_complete %}complete{% else %}incomplete{% endif %}" title="Service Detection">S</span>
                            <span class="status-indicator {% if host.http_discovery_complete %}complete{% else %}incomplete{% endif %}" title="HTTP Services">H</span>
                            <span class="status-indicator {% if host.screenshots_complete %}complete{% else %}incomplete{% endif %}" title="Screenshots">SC</span>
                        </div>
                    </td>
                    <td>
                        <div class="analysis-status-container">
                            {% if host.analyzed %}
                                <div class="analysis-complete" onclick="toggleAnalysisStatus('{{ host.ip }}', false)">
                                    <span class="analysis-text">Analyzed (undo)</span>
                                </div>
                            {% else if host.full_scan_complete && host.service_scan_complete && host.http_discovery_complete && host.screenshots_complete %}
                                <div class="analysis-pending" onclick="toggleAnalysisStatus('{{ host.ip }}', true)">
                                    <span class="analysis-text">Mark Analyzed</span>
                                </div>
                            {% else %}
                                <div class="analysis-not-ready">
                                    <span class="analysis-text">In Progress</span>
                                </div>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        <div class="analysis-status-container">
                            {% if host.nuclei_reviewed %}
                                <div class="analysis-complete nuclei-review-complete" onclick="toggleNucleiReviewedStatus('{{ host.ip }}', false)">
                                    <span class="analysis-text">Reviewed (undo)</span>
                                </div>
                            {% else if host.has_nuclei_findings %}
                                <div class="analysis-pending nuclei-review-pending" onclick="toggleNucleiReviewedStatus('{{ host.ip }}', true)">
                                    <span class="analysis-text">Mark Reviewed</span>
                                </div>
                            {% else %}
                                <div class="analysis-not-ready">
                                    <span class="analysis-text">N/A</span>
                                </div>
                            {% endif %}
                        </div>
                    </td>
                    <td>
                        {% if host.interesting %}
                        <button class="bookmark-btn bookmarked"
                                onclick="toggleInterestingStatus('{{ host.ip }}', false)"
                                title="Bookmarked — click to remove">
                            <svg width="11" height="14" viewBox="0 0 11 14" fill="currentColor"><path d="M0 0 H11 V14 L5.5 10 L0 14 Z"/></svg>
                        </button>
                        {% else %}
                        <button class="bookmark-btn"
                                onclick="toggleInterestingStatus('{{ host.ip }}', true)"
                                title="Bookmark this host">
                            <svg width="11" height="14" viewBox="0 0 11 14" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M1 1 H10 V13 L5.5 9.5 L1 13 Z"/></svg>
                        </button>
                        {% endif %}
                    </td>
                    <td><a href="/hosts/{{ host.ip }}" class="btn btn-primary">Details</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<script>
// State — initialised from server-rendered values
let rows = Array.from(document.querySelectorAll('#hosts-tbody tr'));
let searchQuery   = '';
let currentPage   = 1;
let pageSize      = 100;
let currentSort   = '{{ sort }}';
let currentDir    = '{{ dir }}';
let currentFilter = '{{ filter }}';

// ── Pagination / search ──────────────────────────────────────────────────────

function getVisible() {
    if (!searchQuery) return rows;
    return rows.filter(r => r.textContent.toLowerCase().includes(searchQuery));
}

function render() {
    const visible = getVisible();
    const total   = Math.max(1, Math.ceil(visible.length / pageSize));
    if (currentPage > total) currentPage = total;
    const start = (currentPage - 1) * pageSize;
    rows.forEach(r => r.style.display = 'none');
    visible.slice(start, start + pageSize).forEach(r => r.style.display = 'table-row');
    document.getElementById('page-info').textContent       = `Page ${currentPage} of ${total}`;
    document.getElementById('host-count').textContent      = `${rows.length} hosts total`;
    document.getElementById('filtered-count').textContent  = `${visible.length} showing`;
    document.getElementById('prev-page').disabled = currentPage <= 1;
    document.getElementById('next-page').disabled = currentPage >= total;
}

// ── AJAX sort / filter ───────────────────────────────────────────────────────

function fetchRows(sort, dir, filter) {
    const params = new URLSearchParams({ sort, dir });
    if (filter) params.set('filter', filter);
    fetch('/hosts/rows?' + params.toString())
        .then(r => r.text())
        .then(html => {
            document.getElementById('hosts-tbody').innerHTML = html;
            rows          = Array.from(document.querySelectorAll('#hosts-tbody tr'));
            currentSort   = sort;
            currentDir    = dir;
            currentFilter = filter;
            currentPage   = 1;
            searchQuery   = '';
            document.getElementById('quick-search').value = '';
            render();
            history.pushState({}, '', '/hosts?' + params.toString());
            updateSortUI(sort, dir);
            updateFilterUI(filter);
        })
        .catch(() => window.ROFMAD?.showNotification('Failed to load rows', 'error'));
}

function updateSortUI(sort, dir) {
    document.querySelectorAll('.sort-btn').forEach(btn => {
        btn.classList.toggle('sort-active',
            btn.dataset.sort === sort && btn.dataset.dir === dir);
    });
}

function updateFilterUI(filter) {
    document.querySelectorAll('.filter-pill').forEach(p => {
        p.classList.toggle('active', (p.dataset.filter || '') === filter);
    });
}

// ── Event wiring ─────────────────────────────────────────────────────────────

document.addEventListener('DOMContentLoaded', () => {
    render();

    document.getElementById('quick-search').addEventListener('input', e => {
        searchQuery = e.target.value.toLowerCase();
        currentPage = 1;
        render();
    });

    document.getElementById('clear-search').addEventListener('click', () => {
        document.getElementById('quick-search').value = '';
        searchQuery = '';
        currentPage = 1;
        render();
    });

    document.getElementById('page-size').addEventListener('change', e => {
        pageSize = e.target.value === 'all' ? 99999 : parseInt(e.target.value);
        currentPage = 1;
        render();
    });

    document.getElementById('prev-page').addEventListener('click', () => {
        if (currentPage > 1) { currentPage--; render(); }
    });

    document.getElementById('next-page').addEventListener('click', () => {
        if (currentPage < Math.ceil(getVisible().length / pageSize)) { currentPage++; render(); }
    });

    // Sort arrow clicks → AJAX
    document.querySelectorAll('.sort-btn').forEach(btn => {
        btn.addEventListener('click', e => {
            e.preventDefault();
            fetchRows(btn.dataset.sort, btn.dataset.dir, currentFilter);
        });
    });

    // Filter pill clicks → AJAX (toggle: clicking active pill clears it)
    document.querySelectorAll('.filter-pill').forEach(pill => {
        pill.addEventListener('click', e => {
            e.preventDefault();
            const pillFilter = pill.dataset.filter || '';
            const newFilter  = pillFilter === currentFilter ? '' : pillFilter;
            fetchRows(currentSort, currentDir, newFilter);
        });
    });

    // Tag click → search page
    document.addEventListener('click', e => {
        if (e.target.classList.contains('tag')) {
            const tag = e.target.textContent.trim();
            if (tag) window.location.href = `/tags?tag=${encodeURIComponent(tag)}`;
        }
    });
});

// ── Toggle handlers (inline onclick in rows) ──────────────────────────────────

function toggleAnalysisStatus(ip, analyzed) {
    fetch('/mark-analyzed', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `ip=${encodeURIComponent(ip)}&analyzed=${analyzed}`
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            fetchRows(currentSort, currentDir, currentFilter);
        } else {
            window.ROFMAD?.showNotification('Failed to update analysis status', 'error');
        }
    })
    .catch(() => window.ROFMAD?.showNotification('Failed to update analysis status', 'error'));
}

function toggleInterestingStatus(ip, interesting) {
    fetch('/mark-interesting', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `ip=${encodeURIComponent(ip)}&interesting=${interesting}`
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            fetchRows(currentSort, currentDir, currentFilter);
        } else {
            window.ROFMAD?.showNotification('Failed to update bookmark status', 'error');
        }
    })
    .catch(() => window.ROFMAD?.showNotification('Failed to update bookmark status', 'error'));
}

function toggleNucleiReviewedStatus(ip, reviewed) {
    fetch('/mark-nuclei-reviewed', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: `ip=${encodeURIComponent(ip)}&nuclei_reviewed=${reviewed}`
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            fetchRows(currentSort, currentDir, currentFilter);
        } else {
            window.ROFMAD?.showNotification('Failed to update nuclei review status', 'error');
        }
    })
    .catch(() => window.ROFMAD?.showNotification('Failed to update nuclei review status', 'error'));
}
</script>
{% endblock %}