{{define "title"}}Incidents{{end}}
{{define "page"}}incident{{end}}
{{define "content"}}
    <div class="csm-page-header mb-3">
        <div class="csm-page-header__main">
            <h1 class="csm-page-header__title"><i class="ti ti-timeline-event"></i>&nbsp;Incidents</h1>
        </div>
    </div>

    <ul class="nav nav-tabs mb-3" role="tablist">
        <li class="nav-item" role="presentation">
            <button class="nav-link active" id="incidents-tab" type="button" role="tab" aria-controls="incidents-panel" aria-selected="true">
                <i class="ti ti-list-details"></i>&nbsp;Correlated
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="grouped-tab" type="button" role="tab" aria-controls="grouped-panel" aria-selected="false">
                <i class="ti ti-stack-2"></i>&nbsp;Grouped
            </button>
        </li>
        <li class="nav-item" role="presentation">
            <button class="nav-link" id="timeline-tab" type="button" role="tab" aria-controls="timeline-panel" aria-selected="false">
                <i class="ti ti-search"></i>&nbsp;Timeline Search
            </button>
        </li>
    </ul>

    <div id="incidents-panel" role="tabpanel" aria-labelledby="incidents-tab">
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-timeline-event"></i>&nbsp;Correlated Incidents</h3>
                <div class="card-actions d-flex gap-2 align-items-center flex-wrap">
                    <select id="incident-status-filter" class="form-select form-select-sm" aria-label="Status filter">
                        <option value="active">Open + contained</option>
                        <option value="all">All statuses</option>
                        <option value="open">Open</option>
                        <option value="contained">Contained</option>
                        <option value="resolved">Resolved</option>
                        <option value="dismissed">Dismissed</option>
                    </select>
                    <select id="incident-page-size" class="form-select form-select-sm" aria-label="Page size">
                        <option value="25">25 / page</option>
                        <option value="50" selected>50 / page</option>
                        <option value="100">100 / page</option>
                        <option value="200">200 / page</option>
                    </select>
                    <button class="btn btn-outline-secondary btn-sm" id="incidents-refresh-btn" title="Refresh incidents" aria-label="Refresh incidents">
                        <i class="ti ti-refresh"></i>
                    </button>
                </div>
            </div>
            <div id="incidents-content"></div>
            <div id="incidents-pagination" class="card-footer d-none">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="text-muted small" id="incidents-page-summary"></div>
                    <ul class="pagination pagination-sm m-0">
                        <li class="page-item"><button class="page-link" id="incidents-page-first" type="button" aria-label="First page"><i class="ti ti-chevrons-left"></i></button></li>
                        <li class="page-item"><button class="page-link" id="incidents-page-prev" type="button" aria-label="Previous page"><i class="ti ti-chevron-left"></i></button></li>
                        <li class="page-item active"><span class="page-link" id="incidents-page-indicator">1</span></li>
                        <li class="page-item"><button class="page-link" id="incidents-page-next" type="button" aria-label="Next page"><i class="ti ti-chevron-right"></i></button></li>
                        <li class="page-item"><button class="page-link" id="incidents-page-last" type="button" aria-label="Last page"><i class="ti ti-chevrons-right"></i></button></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div id="grouped-panel" class="d-none" role="tabpanel" aria-labelledby="grouped-tab">
        <div class="card mb-3">
            <div class="card-header">
                <h3 class="card-title"><i class="ti ti-stack-2"></i>&nbsp;Grouped Incidents</h3>
                <div class="card-actions d-flex gap-2 align-items-center flex-wrap">
                    <select id="grouped-status-filter" class="form-select form-select-sm" aria-label="Status filter">
                        <option value="active">Open + contained</option>
                        <option value="all">All statuses</option>
                        <option value="open">Open</option>
                        <option value="resolved">Resolved</option>
                    </select>
                    <select id="grouped-kind-filter" class="form-select form-select-sm" aria-label="Kind filter">
                        <option value="">All kinds</option>
                        <option value="mailbox_takeover">Mailbox takeover</option>
                        <option value="web_account_compromise">Web account compromise</option>
                        <option value="credential_spray">Credential spray</option>
                        <option value="post_exploit_process">Post-exploit process</option>
                        <option value="host_integrity_risk">Host integrity</option>
                    </select>
                    <select id="grouped-page-size" class="form-select form-select-sm" aria-label="Page size">
                        <option value="25">25 / page</option>
                        <option value="50" selected>50 / page</option>
                        <option value="100">100 / page</option>
                        <option value="200">200 / page</option>
                    </select>
                    <button class="btn btn-outline-secondary btn-sm" id="grouped-refresh-btn" title="Refresh groups" aria-label="Refresh groups">
                        <i class="ti ti-refresh"></i>
                    </button>
                </div>
            </div>
            <div class="csm-summary-list" id="grouped-content" aria-live="polite">
                <div class="csm-empty">
                    <div class="csm-empty__icon"><i class="ti ti-loader-2"></i></div>
                    <div class="csm-empty__reason">Loading groups...</div>
                </div>
            </div>
            <div id="grouped-pagination" class="card-footer d-none">
                <div class="d-flex align-items-center justify-content-between flex-wrap gap-2">
                    <div class="text-muted small" id="grouped-page-summary"></div>
                    <ul class="pagination pagination-sm m-0">
                        <li class="page-item"><button class="page-link" id="grouped-page-first" type="button" aria-label="First page"><i class="ti ti-chevrons-left"></i></button></li>
                        <li class="page-item"><button class="page-link" id="grouped-page-prev" type="button" aria-label="Previous page"><i class="ti ti-chevron-left"></i></button></li>
                        <li class="page-item active"><span class="page-link" id="grouped-page-indicator">1</span></li>
                        <li class="page-item"><button class="page-link" id="grouped-page-next" type="button" aria-label="Next page"><i class="ti ti-chevron-right"></i></button></li>
                        <li class="page-item"><button class="page-link" id="grouped-page-last" type="button" aria-label="Last page"><i class="ti ti-chevrons-right"></i></button></li>
                    </ul>
                </div>
            </div>
            <div class="card-footer text-muted small" id="grouped-footer"></div>
        </div>
    </div>

    <div id="timeline-panel" class="d-none" role="tabpanel" aria-labelledby="timeline-tab">
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-timeline-event"></i>&nbsp;Incident Timeline</h3>
            <div class="card-actions d-flex gap-2 align-items-center flex-wrap">
                <input type="text" id="incident-query" class="form-control form-control-sm csm-input-lg" placeholder="e.g. 203.0.113.5 or jdoe">
                <div class="btn-group btn-group-sm" role="group" aria-label="Time range">
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn" data-hours="24">24h</button>
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn active" data-hours="72">3d</button>
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn" data-hours="168">7d</button>
                    <button type="button" class="btn btn-outline-secondary incident-hours-btn" data-hours="720">30d</button>
                </div>
                <button class="btn btn-primary btn-sm" id="incident-search-btn"><i class="ti ti-search"></i>&nbsp;Search</button>
            </div>
        </div>
        <div id="incident-content">
            <div class="card-body text-muted py-4">
                <div class="mb-2 fw-bold text-center">Search across finding history, incident timelines, and UI audit log for a source IP or cPanel account.</div>
                <ul class="small mb-2 ps-4">
                    <li><strong>Finding history</strong> -- raw findings stored in bbolt. Rotates aggressively on busy hosts; older entries fall off first.</li>
                    <li><strong>Incident timelines</strong> -- structured per-incident events that survive even when the underlying findings have rotated out of history.</li>
                    <li><strong>UI audit log</strong> -- operator actions (manual blocks, dismissals, status changes) keyed by IP or account.</li>
                </ul>
                <div class="small mb-1">Tip: an IP that appears in the Grouped tab but returns no rows here at the 3d default is usually past the finding-history window. Switch the range button to 7d or 30d -- incident timelines are kept until the per-kind auto-close threshold fires.</div>
                <div class="small">Examples: <code>203.0.113.5</code>, <code>2001:db8::1</code>, <code>jdoe</code></div>
            </div>
        </div>
    </div>
    </div>
{{end}}
{{define "scripts"}}
<script src="/static/js/incident.js"></script>
{{end}}
{{template "layout" .}}