{{define "title"}}Dashboard{{end}}
{{define "page"}}dashboard{{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-dashboard"></i>&nbsp;Dashboard</h1>
            <div class="csm-page-header__subtitle" id="dashboard-subtitle">
                <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>
                <span class="ms-2" id="dashboard-summary"></span>
            </div>
        </div>
        <div class="csm-page-header__actions">
            <a class="btn btn-primary btn-sm" href="/incident" title="Open the Incidents triage surface">
                <i class="ti ti-timeline-event"></i>&nbsp;View Incidents
            </a>
            <a class="btn btn-ghost-secondary btn-sm" href="/findings" title="Open active findings">
                <i class="ti ti-alert-triangle"></i>&nbsp;Findings
            </a>
        </div>
    </div>

    <!-- Priority queue + system posture. The posture card now also carries
         the runtime status chips (uptime, fanotify, watchers, rules) and the
         24h severity totals so the right rail uses the height the priority
         queue forces; the previous standalone status-strip and stat-card row
         were left empty next to a long queue column. -->
    <div class="row row-cards mb-3 align-items-start">
        <div class="col-lg-7">
            <div class="card">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-flame"></i>&nbsp;Needs your attention</h3>
                    <div class="card-actions">
                        <button id="priority-queue-refresh" class="btn btn-ghost-secondary btn-sm" title="Refresh queue" aria-label="Refresh queue">
                            <i class="ti ti-refresh"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0" id="priority-queue">
                    <div class="csm-empty">
                        <div class="csm-empty__icon"><i class="ti ti-loader-2"></i></div>
                        <div class="csm-empty__reason">Loading...</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-5">
            <div class="card">
                <div class="card-header"><h3 class="card-title"><i class="ti ti-shield"></i>&nbsp;System posture</h3></div>
                <div class="card-body">
                    <div class="csm-status-strip mb-3">
                        <span class="csm-status-strip__chip" title="Daemon uptime since last restart">
                            <i class="ti ti-clock"></i>
                            <span class="csm-status-strip__chip-value">{{.Uptime}}</span>
                            <span class="csm-status-strip__chip-label">uptime</span>
                        </span>
                        <span class="csm-status-strip__chip" title="Time since the most recent critical finding"{{if .LastCriticalISO}} data-timestamp="{{.LastCriticalISO}}"{{end}}>
                            <i class="ti ti-alert-octagon"></i>
                            <span class="csm-status-strip__chip-value" id="stat-last-critical"{{if .LastCriticalISO}} data-timestamp="{{.LastCriticalISO}}"{{end}}>{{.LastCriticalAgo}}</span>
                            <span class="csm-status-strip__chip-label">since last critical</span>
                        </span>
                        <span class="csm-status-strip__chip" title="Loaded YARA / YAML signatures">
                            <i class="ti ti-shield-check"></i>
                            <span class="csm-status-strip__chip-value">{{.SigCount}}</span>
                            <span class="csm-status-strip__chip-label">rules</span>
                        </span>
                    </div>
                    <div class="row g-2 csm-posture-stats mb-3">
                        <div class="col-12 col-sm-4 col-lg-12 col-xxl-4">
                            <a href="/findings?tab=history&severity=2" class="csm-posture-stat stat-card" title="Critical findings in the last 24 hours">
                                <div class="subheader">Critical (24h)</div>
                                <div class="csm-posture-stat__metric">
                                    <div class="h2 mb-0 text-critical me-2" id="stat-critical">{{.Critical}}</div>
                                    <div class="small stat-delta" id="stat-critical-delta"></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12 col-sm-4 col-lg-12 col-xxl-4">
                            <a href="/findings?tab=history&severity=1" class="csm-posture-stat stat-card" title="High findings in the last 24 hours">
                                <div class="subheader">High (24h)</div>
                                <div class="csm-posture-stat__metric">
                                    <div class="h2 mb-0 text-high me-2" id="stat-high">{{.High}}</div>
                                    <div class="small stat-delta" id="stat-high-delta"></div>
                                </div>
                            </a>
                        </div>
                        <div class="col-12 col-sm-4 col-lg-12 col-xxl-4">
                            <a href="/findings?tab=history&severity=0" class="csm-posture-stat stat-card" title="Warning findings in the last 24 hours">
                                <div class="subheader">Warning (24h)</div>
                                <div class="csm-posture-stat__metric">
                                    <div class="h2 mb-0 text-warning me-2" id="stat-warning">{{.Warning}}</div>
                                    <div class="small stat-delta" id="stat-warning-delta"></div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-header">
                    <h3 class="card-title"><i class="ti ti-list-tree"></i>&nbsp;Components</h3>
                    <div class="card-actions">
                        <button id="components-refresh" class="btn btn-ghost-secondary btn-sm" title="Refresh components" aria-label="Refresh components">
                            <i class="ti ti-refresh"></i>
                        </button>
                    </div>
                </div>
                <div class="card-body p-0">
                    <div class="px-3 pt-3" id="components-feature-flags">
                        <div class="text-muted small"><span class="spinner-border spinner-border-sm"></span> Loading feature flags...</div>
                    </div>
                    <div id="components-matrix">
                        <div class="text-muted text-center py-3"><span class="spinner-border spinner-border-sm"></span> Loading watchers...</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Below the fold: investigation context -->
    <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>

    <!-- Analysis charts -->
    <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>

    <!-- 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" .}}