{{define "title"}}Dashboard{{end}}
{{define "page"}}dashboard{{end}}
{{define "content"}}
    <div class="page-header mb-3">
        <div class="row align-items-center">
            <div class="col-auto"><h2 class="page-title">Dashboard</h2></div>
            <div class="col-auto">
                <span id="system-health-pill" class="badge bg-secondary-lt" title="System health">
                    <span class="status-dot me-1"></span><span class="health-label">Checking...</span>
                </span>
            </div>
        </div>
    </div>

    <!-- Stat Cards -->
    <div class="row row-deck row-cards mb-3">
        <div class="col-6 col-lg">
            <a href="/findings?tab=history&severity=2" class="card card-link stat-card" title="Critical severity findings in the last 24 hours -- click to view history">
                <div class="card-body">
                    <div class="subheader">Critical (24h)</div>
                    <div class="d-flex align-items-baseline">
                        <div class="h1 mb-0 text-critical me-2" id="stat-critical">{{.Critical}}</div>
                        <div class="small stat-delta" id="stat-critical-delta"></div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-6 col-lg">
            <a href="/findings?tab=history&severity=1" class="card card-link stat-card" title="High severity findings in the last 24 hours -- click to view history">
                <div class="card-body">
                    <div class="subheader">High (24h)</div>
                    <div class="d-flex align-items-baseline">
                        <div class="h1 mb-0 text-high me-2" id="stat-high">{{.High}}</div>
                        <div class="small stat-delta" id="stat-high-delta"></div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-6 col-lg">
            <a href="/findings?tab=history&severity=0" class="card card-link stat-card" title="Warning severity findings in the last 24 hours -- click to view history">
                <div class="card-body">
                    <div class="subheader">Warning (24h)</div>
                    <div class="d-flex align-items-baseline">
                        <div class="h1 mb-0 text-warning me-2" id="stat-warning">{{.Warning}}</div>
                        <div class="small stat-delta" id="stat-warning-delta"></div>
                    </div>
                </div>
            </a>
        </div>
        <div class="col-6 col-lg">
            <div class="card" title="Time since the most recent critical severity finding">
                <div class="card-body">
                    <div class="subheader">Last Critical</div>
                    <div class="h3 mb-0" id="stat-last-critical"{{if .LastCriticalISO}} data-timestamp="{{.LastCriticalISO}}"{{end}}>{{.LastCriticalAgo}}</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-lg">
            <div class="card" title="Daemon uptime and monitoring status">
                <div class="card-body">
                    <div class="d-flex align-items-center justify-content-between">
                        <div>
                            <div class="subheader">Uptime</div>
                            <div class="h3 mb-0">{{.Uptime}}</div>
                        </div>
                        <div class="text-end">
                            {{if .FanotifyActive}}<span class="badge bg-green-lt" title="Real-time filesystem monitoring via fanotify"><i class="ti ti-eye"></i> fanotify</span>
                            {{else}}<span class="badge bg-yellow-lt" title="Fanotify unavailable, using polling fallback"><i class="ti ti-eye-off"></i> fallback</span>{{end}}
                            {{if .LogWatchers}}<span class="badge bg-blue-lt ms-1" title="Log files being watched"><i class="ti ti-file-text"></i> {{.LogWatchers}}</span>{{end}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Live Feed (full width, prominent) -->
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title">
                <span class="status-dot bg-yellow me-1" id="poll-status-dot" title="Polling active"></span>
                Live Feed
                <span class="text-muted ms-2 small">Polling (10s)</span>
            </h3>
            <div class="card-actions d-flex gap-2 align-items-center flex-wrap">
                <div class="btn-group btn-group-sm" role="group" aria-label="Severity filter">
                    <button type="button" class="btn btn-outline-critical feed-sev-chip active" data-sev="2" title="Show Critical findings"><i class="ti ti-alert-octagon"></i></button>
                    <button type="button" class="btn btn-outline-high feed-sev-chip active" data-sev="1" title="Show High findings"><i class="ti ti-alert-triangle"></i></button>
                    <button type="button" class="btn btn-outline-warning feed-sev-chip active" data-sev="0" title="Show Warning findings"><i class="ti ti-alert-circle"></i></button>
                </div>
                <input type="search" id="feed-search" class="form-control form-control-sm csm-input-sm" placeholder="Filter feed..." aria-label="Filter live feed">
                <span class="text-muted small" id="scan-status"></span>
                <span class="text-muted small" id="scan-detail"></span>
            </div>
        </div>
        <div class="list-group list-group-flush overflow-auto csm-feed-scroll" id="live-feed-entries">
            {{range .RecentFindings}}
            <div class="list-group-item feed-item" data-ts="{{.TimestampISO}}" data-sev="{{.SevClass}}" data-check="{{.Check}}">
                <div class="row align-items-center">
                    <div class="col-auto"><span class="text-muted font-monospace small">{{.Timestamp}}</span></div>
                    <div class="col-auto"><span class="badge badge-{{.SevClass}}">{{.Severity}}</span></div>
                    <div class="col"><span class="font-monospace small">{{.Check}}</span> - {{.Message}}</div>
                    {{if .HasFix}}<div class="col-auto"><button class="btn btn-warning btn-sm feed-fix-btn" data-key="{{.Key}}" data-check="{{.Check}}" data-message="{{.Message}}" data-fixdesc="{{.FixDesc}}" title="{{.FixDesc}}" aria-label="Fix: {{.FixDesc}}"><i class="ti ti-tool"></i></button></div>{{end}}
                </div>
                {{if .Details}}<div class="detail d-none mt-2 small text-muted csm-detail">{{.Details}}</div>{{end}}
            </div>
            {{else}}
            <div class="list-group-item text-center text-muted py-4">No recent findings. Waiting for events...</div>
            {{end}}
        </div>
    </div>

    <!-- Timeline + Attack Types side by side -->
    <div class="row row-deck row-cards mb-3">
        <div class="col-lg-8">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-chart-area-line"></i>&nbsp;Findings Timeline (24h)</h3>
                </div>
                <div class="card-body py-3 csm-chart-lg">
                    <canvas id="timeline-chart"></canvas>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-chart-bar-popular"></i>&nbsp;Top Attack Types (24h)</h3>
                </div>
                <div class="card-body csm-chart-lg">
                    <canvas id="attack-types-chart"></canvas>
                </div>
            </div>
        </div>
    </div>

    <!-- Accounts at Risk + Auto-Response + Brute Force -->
    <div class="row row-deck row-cards mb-3">
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="ti ti-alert-triangle"></i>&nbsp;Accounts at Risk</h3></div>
                <div class="card-body p-0 overflow-auto csm-list-scroll" id="accounts-at-risk">
                    <div class="text-muted text-center py-3"><span class="spinner-border spinner-border-sm"></span> Loading...</div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="ti ti-robot"></i>&nbsp;Auto-Response (24h)</h3></div>
                <div class="card-body" id="auto-response-summary">
                    <div class="text-muted text-center py-3"><span class="spinner-border spinner-border-sm"></span> Loading...</div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="ti ti-shield-bolt"></i>&nbsp;Brute Force (24h)</h3></div>
                <div class="card-body p-0" id="brute-force-summary">
                    <div class="text-muted text-center py-3"><span class="spinner-border spinner-border-sm"></span> Loading...</div>
                </div>
            </div>
        </div>
    </div>

    <!-- Trend (period selectable) -->
    <div class="card mb-3">
        <div class="card-header">
            <h3 class="card-title"><i class="ti ti-chart-line"></i>&nbsp;<span id="trend-title">30-Day Trend</span></h3>
            <div class="card-actions">
                <div class="btn-group btn-group-sm" role="group" aria-label="Trend period">
                    <button type="button" class="btn btn-outline-secondary trend-period-btn" data-days="7">7d</button>
                    <button type="button" class="btn btn-outline-secondary trend-period-btn active" data-days="30">30d</button>
                    <button type="button" class="btn btn-outline-secondary trend-period-btn" data-days="90">90d</button>
                </div>
            </div>
        </div>
        <div class="card-body py-3 csm-chart-sm">
            <canvas id="trend-chart"></canvas>
        </div>
    </div>
{{end}}
{{define "scripts"}}
<script src="/static/js/chart.min.js"></script>
<script src="/static/js/dashboard.js"></script>
{{end}}
{{template "layout" .}}