intercept/templates/partials/modes/analytics.html

<!-- ANALYTICS MODE -->
                <div id="analyticsMode" class="mode-content">
{# Analytics Dashboard Sidebar Panel #}

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Summary</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="analytics-grid" id="analyticsSummaryCards">
            <div class="analytics-card" data-mode="adsb">
                <div class="card-count" id="analyticsCountAdsb">0</div>
                <div class="card-label">Aircraft</div>
                <div class="card-sparkline" id="analyticsSparkAdsb"></div>
            </div>
            <div class="analytics-card" data-mode="ais">
                <div class="card-count" id="analyticsCountAis">0</div>
                <div class="card-label">Vessels</div>
                <div class="card-sparkline" id="analyticsSparkAis"></div>
            </div>
            <div class="analytics-card" data-mode="wifi">
                <div class="card-count" id="analyticsCountWifi">0</div>
                <div class="card-label">WiFi</div>
                <div class="card-sparkline" id="analyticsSparkWifi"></div>
            </div>
            <div class="analytics-card" data-mode="bluetooth">
                <div class="card-count" id="analyticsCountBt">0</div>
                <div class="card-label">Bluetooth</div>
                <div class="card-sparkline" id="analyticsSparkBt"></div>
            </div>
            <div class="analytics-card" data-mode="dsc">
                <div class="card-count" id="analyticsCountDsc">0</div>
                <div class="card-label">DSC</div>
                <div class="card-sparkline" id="analyticsSparkDsc"></div>
            </div>
            <div class="analytics-card" data-mode="acars">
                <div class="card-count" id="analyticsCountAcars">0</div>
                <div class="card-label">ACARS</div>
                <div class="card-sparkline" id="analyticsSparkAcars"></div>
            </div>
            <div class="analytics-card" data-mode="vdl2">
                <div class="card-count" id="analyticsCountVdl2">0</div>
                <div class="card-label">VDL2</div>
                <div class="card-sparkline" id="analyticsSparkVdl2"></div>
            </div>
            <div class="analytics-card" data-mode="aprs">
                <div class="card-count" id="analyticsCountAprs">0</div>
                <div class="card-label">APRS</div>
                <div class="card-sparkline" id="analyticsSparkAprs"></div>
            </div>
            <div class="analytics-card" data-mode="meshtastic">
                <div class="card-count" id="analyticsCountMesh">0</div>
                <div class="card-label">Mesh</div>
                <div class="card-sparkline" id="analyticsSparkMesh"></div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Operational Insights</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="analytics-insight-grid" id="analyticsInsights">
            <div class="analytics-empty">Insights loading...</div>
        </div>
        <div class="analytics-top-changes">
            <div class="analytics-section-header">Top Changes</div>
            <div id="analyticsTopChanges">
                <div class="analytics-empty">No change signals yet</div>
            </div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Mode Health</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="analytics-health" id="analyticsHealth"></div>
    </div>
</div>

<div class="section" id="analyticsSquawkSection" style="display:none;">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Emergency Squawks</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="squawk-emergency" id="analyticsSquawkPanel">
            <div class="squawk-title">Active Emergency Codes</div>
            <div id="analyticsSquawkList"></div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Temporal Patterns</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div id="analyticsPatternList">
            <div class="analytics-empty">No recurring patterns detected</div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Recent Alerts</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="analytics-alert-feed" id="analyticsAlertFeed">
            <div class="analytics-empty">No recent alerts</div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Correlations</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div id="analyticsCorrelations">
            <div class="analytics-empty">No correlations detected</div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Geofences</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div id="analyticsGeofenceList"></div>
        <button class="btn btn-sm" onclick="Analytics.addGeofence()" style="margin-top:8px; font-size:10px; padding:4px 10px; background:var(--accent-cyan); color:#fff; border:none; border-radius:4px; cursor:pointer;">
            + Add Zone
        </button>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Target View</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="analytics-target-toolbar">
            <input id="analyticsTargetQuery" type="text" placeholder="Search callsign, ICAO, MMSI, MAC, SSID, node..." onkeydown="if(event.key==='Enter'){Analytics.searchTarget();}">
            <button onclick="Analytics.searchTarget()">Search</button>
        </div>
        <div id="analyticsTargetSummary" class="analytics-target-summary">Search to correlate entities across modes</div>
        <div id="analyticsTargetResults">
            <div class="analytics-empty">No target selected</div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Session Replay</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="analytics-replay-toolbar">
            <select id="analyticsReplaySelect"></select>
            <button onclick="Analytics.loadReplay()">Load</button>
            <button onclick="Analytics.playReplay()">Play</button>
            <button onclick="Analytics.pauseReplay()">Pause</button>
            <button onclick="Analytics.stepReplay()">Step</button>
        </div>
        <div id="analyticsReplayMeta" class="analytics-target-summary">No replay loaded</div>
        <div id="analyticsReplayTimeline">
            <div class="analytics-empty">Select a recording to replay key events</div>
        </div>
    </div>
</div>

<div class="section">
    <h3 class="section-header collapsible" onclick="toggleSection(this)">
        <span>Export Data</span>
        <span class="collapse-icon">&#9660;</span>
    </h3>
    <div class="section-content">
        <div class="export-controls">
            <select id="exportMode">
                <option value="adsb">ADS-B</option>
                <option value="ais">AIS</option>
                <option value="wifi">WiFi</option>
                <option value="bluetooth">Bluetooth</option>
                <option value="dsc">DSC</option>
            </select>
            <select id="exportFormat">
                <option value="json">JSON</option>
                <option value="csv">CSV</option>
            </select>
            <button onclick="Analytics.exportData()">Export</button>
        </div>
    </div>
</div>

                </div>