{{define "title"}}Findings{{end}}
{{define "page"}}findings{{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-alert-triangle"></i>&nbsp;Security Findings</h1>
            <div class="csm-page-header__subtitle">
                <span id="findings-count" class="text-muted"></span>
                <span id="severity-badges" class="ms-2"></span>
            </div>
        </div>
        <div class="csm-page-header__actions">
            <button type="button" class="btn btn-primary btn-sm" id="open-scan-modal" data-bs-toggle="modal" data-bs-target="#scan-account-modal" title="Run all security checks on a single cPanel account">
                <i class="ti ti-radar-2"></i>&nbsp;Scan account
            </button>
            <div class="btn-group btn-group-sm" id="group-mode-toggle" role="group" aria-label="Findings view mode">
                <button type="button" class="btn btn-ghost-secondary active" data-group-mode="none" aria-pressed="true" title="List findings without grouping">
                    <i class="ti ti-list"></i>&nbsp;List
                </button>
                <button type="button" class="btn btn-ghost-secondary" data-group-mode="account" aria-pressed="false" title="Group findings by account">
                    <i class="ti ti-user"></i>&nbsp;Account
                </button>
                <button type="button" class="btn btn-ghost-secondary" data-group-mode="check" aria-pressed="false" title="Group findings by check type">
                    <i class="ti ti-tags"></i>&nbsp;Type
                </button>
            </div>
            <div class="dropdown">
                <button class="btn btn-ghost-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" title="Export visible findings">
                    <i class="ti ti-download"></i>&nbsp;Export
                </button>
                <div class="dropdown-menu dropdown-menu-end">
                    <a class="dropdown-item" href="#" id="export-csv" title="Download findings as CSV spreadsheet"><i class="ti ti-file-spreadsheet me-2"></i>CSV</a>
                    <a class="dropdown-item" href="#" id="export-json" title="Download findings as JSON data file"><i class="ti ti-braces me-2"></i>JSON</a>
                </div>
            </div>
        </div>
    </div>

    <div id="refresh-banner" class="alert alert-info d-none mb-3" role="alert">
        <div class="d-flex align-items-center">
            <div>New findings detected since this page loaded.</div>
            <a href="#" id="refresh-page-btn" class="btn btn-sm btn-info ms-auto">Refresh</a>
        </div>
    </div>

    <!-- Tabbed card: Active Findings + History -->
    <div class="card" id="findings-card">
        <div class="card-header">
            <ul class="nav nav-tabs card-header-tabs" data-bs-toggle="tabs">
                <li class="nav-item">
                    <a class="nav-link active" href="#tab-active" data-bs-toggle="tab">
                        <i class="ti ti-alert-triangle"></i>&nbsp;Active
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#tab-history" data-bs-toggle="tab">
                        <i class="ti ti-history"></i>&nbsp;History <span class="text-muted" id="history-count"></span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="tab-content">
            <!-- Active Findings Tab -->
            <div class="tab-pane active show" id="tab-active">
                <div class="csm-toolbar">
                    <input type="text" id="findings-search" class="form-control form-control-sm csm-toolbar__search" placeholder="Search findings..." aria-label="Search findings">
                    <select id="check-filter" class="form-select form-select-sm csm-auto-width" aria-label="Filter by check type">
                        <option value="all">All Types</option>
                    </select>
                    <input type="search" id="account-filter" list="account-filter-list" class="form-control form-control-sm csm-input-sm" placeholder="All accounts" autocomplete="off" aria-label="Filter by account">
                    <datalist id="account-filter-list"></datalist>
                    <select id="per-page" class="form-select form-select-sm csm-auto-width" aria-label="Page size">
                        <option value="25">25/page</option>
                        <option value="50">50/page</option>
                        <option value="100">100/page</option>
                        <option value="250">250/page</option>
                        <option value="0">All</option>
                    </select>
                    <select id="group-by" class="d-none" aria-hidden="true" tabindex="-1">
                        <option value="none">No Grouping</option>
                        <option value="account">Group by Account</option>
                        <option value="check">Group by Check Type</option>
                    </select>
                </div>
                <div id="findings-loading" class="card-body text-center text-muted py-4">
                    <span class="spinner-border spinner-border-sm"></span> Loading findings...
                </div>
                <div id="findings-empty" class="d-none">
                    <div class="csm-empty">
                        <div class="csm-empty__icon"><i class="ti ti-circle-check"></i></div>
                        <div class="csm-empty__title">No active findings</div>
                        <div class="csm-empty__reason">All checks are clean. New findings appear here as the daemon detects them.</div>
                    </div>
                </div>
                <div class="table-responsive d-none" id="findings-table-wrap">
                    <table class="table table-vcenter card-table w-100" id="findings-table">
                        <thead>
                            <tr>
                                <th><input type="checkbox" id="select-all" class="form-check-input" aria-label="Select all visible findings"></th>
                                <th>Severity</th>
                                <th>Check</th>
                                <th>Message</th>
                                <th>First Seen</th>
                                <th>Last Seen</th>
                                <th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="findings-tbody"></tbody>
                    </table>
                </div>
            </div>

            <!-- History Tab -->
            <div class="tab-pane" id="tab-history">
                <div class="csm-toolbar">
                    <input type="text" id="history-search" class="form-control form-control-sm csm-toolbar__search" placeholder="Search history..." aria-label="Search history">
                    <select id="sev-filter" class="form-select form-select-sm csm-auto-width" aria-label="Severity filter">
                        <option value="all">All Severities</option>
                        <option value="2">Critical</option>
                        <option value="1">High</option>
                        <option value="0">Warning</option>
                    </select>
                    <div class="d-flex gap-1 align-items-center">
                        <input type="date" id="date-from" class="form-control form-control-sm csm-input-sm" title="Show findings from this date" aria-label="From date">
                        <span class="text-muted small">to</span>
                        <input type="date" id="date-to" class="form-control form-control-sm csm-input-sm" title="Show findings up to this date" aria-label="To date">
                        <button type="button" class="btn btn-primary btn-sm" id="date-filter-btn" title="Apply date range filter" aria-label="Apply date filter"><i class="ti ti-filter"></i></button>
                        <button type="button" class="btn btn-ghost-secondary btn-sm d-none" id="date-clear-btn" title="Clear date filter" aria-label="Clear date filter"><i class="ti ti-x"></i></button>
                    </div>
                    <a href="/api/v1/history/csv" class="btn btn-ghost-secondary btn-sm" title="Download full history as CSV"><i class="ti ti-download"></i>&nbsp;CSV</a>
                </div>
                <div id="history-content">
                    <div class="card-body text-center text-muted py-4"><span class="spinner-border spinner-border-sm"></span> Loading...</div>
                </div>
                <div class="card-footer d-flex justify-content-between align-items-center" id="history-pager"></div>
            </div>
        </div>
    </div>

    <!-- Sticky bulk-action bar: hidden until a row is selected -->
    <div class="csm-sticky-actions" id="findings-bulk-bar" hidden>
        <span class="csm-sticky-actions__count"><strong id="selected-count">0</strong> selected</span>
        <button type="button" id="bulk-fix-btn" class="btn btn-sm btn-warning d-none" title="Apply automated fixes to all selected findings">
            <i class="ti ti-tool"></i>&nbsp;Fix
        </button>
        <button type="button" id="bulk-dismiss-btn" class="btn btn-sm btn-ghost-secondary" title="Dismiss all selected findings">
            <i class="ti ti-x"></i>&nbsp;Dismiss
        </button>
        <button type="button" id="bulk-cancel-btn" class="btn btn-sm btn-ghost-secondary" title="Clear selection">
            Cancel
        </button>
    </div>

    <!-- Scan account modal -->
    <div class="modal fade" id="scan-account-modal" tabindex="-1" aria-hidden="true" aria-labelledby="scan-account-modal-title">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="scan-account-modal-title"><i class="ti ti-radar-2"></i>&nbsp;Scan account</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p class="text-muted small">Run every security check on a single cPanel account. Results open in the Findings list filtered to that account.</p>
                    <form id="scan-form" class="row g-2 align-items-end">
                        <div class="col">
                            <label class="form-label" for="scan-account">cPanel account</label>
                            <input type="text" id="scan-account" list="account-list" class="form-control font-monospace" placeholder="username" autocomplete="off">
                            <datalist id="account-list"></datalist>
                        </div>
                        <div class="col-auto">
                            <button type="submit" id="scan-btn" class="btn btn-primary">
                                <i class="ti ti-radar-2"></i>&nbsp;Scan
                            </button>
                        </div>
                    </form>
                    <div id="scan-status" class="mt-3 small text-muted" aria-live="polite"></div>
                </div>
            </div>
        </div>
    </div>
{{end}}
{{define "scripts"}}
<script src="/static/js/findings.js"></script>
<script src="/static/js/history.js"></script>
{{end}}
{{template "layout" .}}