<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TM GNSS Guard</title>
    
    <!-- LEAFLET (local) -->
    <link rel="stylesheet" href="{{ url_for('static', filename='leaflet/leaflet.css') }}" />
    
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v={{ range(1000000) | random }}">
</head>
<body data-show-route="{{ show_route|tojson }}">

<!-- HEALTH STATUS BORDER FRAME (full viewport) -->
<div class="health-border-frame" id="healthBorderFrame"></div>

<!-- HEADER -->
<div class="header">
    <div class="header-left">
        <div class="header-title">TM GNSS Guard</div>
        <div class="header-sub">GNSS Spoofing &amp; Jamming Monitoring Console</div>
    </div>
    <div class="header-right">
        <button class="status-pill-btn" id="globalStatusPill" onclick="acknowledgeAlarm()" title="Click to acknowledge alarm and mute buzzer">
            <span class="status-text">GNSS Integrity: Stable</span>
            <span class="speaker-icon" id="speakerIcon">
                <!-- Speaker/Sound icon (SVG) - shown when alarm is active -->
                <svg class="icon-sound" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                    <path d="M15.54 8.46a5 5 0 0 1 0 7.07"></path>
                    <path d="M19.07 4.93a10 10 0 0 1 0 14.14"></path>
                </svg>
                <!-- Muted Speaker icon (SVG) - shown when alarm is acknowledged/muted -->
                <svg class="icon-muted" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
                    <line x1="22" y1="9" x2="16" y2="15"></line>
                    <line x1="16" y1="9" x2="22" y2="15"></line>
                </svg>
            </span>
        </button>
    </div>
</div>

<!-- ALERT BANNER (dynamic) -->
<div class="alert-banner alert-critical hidden" id="alertBanner">
    <div class="alert-indicator" id="alertIndicator"></div>
    <div id="alertText">GPS Jamming or Spoofing Alert! Location Distance: <span id="alert-distance-value">-</span></div>
</div>

<!-- MOBILE TAB BAR (only visible in portrait mode) -->
<div class="mobile-tabs">
    <button class="tab-btn active" data-tab="status">Status</button>
    <button class="tab-btn" data-tab="map">Map</button>
</div>

<!-- MAIN LAYOUT -->
<div class="layout">
    <!-- STATUS TAB CONTENT (Sources + Event Log) -->
    <div class="tab-content tab-status active" id="tab-status">
        <div class="left-panel">
            <div class="panel-title">GNSS Sources</div>

            <!-- PRIMARY GPS -->
            <div class="card ok" id="card-nmea_primary">
                <div class="card-header">
                    <div class="card-title">Primary GPS</div>
                    <div class="badge badge-healthy" id="badge-nmea_primary">HEALTHY</div>
                </div>
                <div class="card-line"><strong>Lat/Lon</strong>: <span id="coords-nmea_primary">Loading...</span></div>
                <div class="card-line"><strong>Updated</strong>: <span id="update-nmea_primary">-</span></div>
            </div>

            <!-- SECONDARY GPS -->
            <div class="card warn" id="card-nmea_secondary">
                <div class="card-header">
                    <div class="card-title">Secondary GPS</div>
                    <div class="badge badge-offline" id="badge-nmea_secondary">NOT CONFIGURED</div>
                </div>
                <div class="card-line"><strong>Lat/Lon</strong>: <span id="coords-nmea_secondary">No data source configured.</span></div>
                <div class="card-line"><strong>Updated</strong>: <span id="update-nmea_secondary">-</span></div>
            </div>

            <!-- TM AIS GPS -->
            <div class="card ok" id="card-tm_ais">
                <div class="card-header">
                    <div class="card-title">TM AIS GPS</div>
                    <div class="badge badge-healthy" id="badge-tm_ais">HEALTHY</div>
                </div>
                <div class="card-line"><strong>Lat/Lon</strong>: <span id="coords-tm_ais">Loading...</span></div>
                <div class="card-line"><strong>Updated</strong>: <span id="update-tm_ais">-</span></div>
            </div>

            <!-- STARLINK GPS -->
            <div class="card ok" id="card-starlink_gps">
                <div class="card-header">
                    <div class="card-title">Starlink GPS</div>
                    <div class="badge badge-healthy" id="badge-starlink_gps">HEALTHY</div>
                </div>
                <div class="card-line"><strong>Lat/Lon</strong>: <span id="coords-starlink_gps">Loading...</span></div>
                <div class="card-line"><strong>Updated</strong>: <span id="update-starlink_gps">-</span></div>
            </div>

            <!-- STARLINK LOCATION -->
            <div class="card ok" id="card-starlink_location">
                <div class="card-header">
                    <div class="card-title">Starlink Location</div>
                    <div class="badge badge-healthy" id="badge-starlink_location">HEALTHY</div>
                </div>
                <div class="card-line"><strong>Lat/Lon</strong>: <span id="coords-starlink_location">Loading...</span></div>
                <div class="card-line"><strong>Updated</strong>: <span id="update-starlink_location">-</span></div>
            </div>
        </div>

        <!-- EVENT LOG (inside status tab for mobile) -->
        <div class="event-log" id="eventLog">
            <div class="event-log-title">Event Stream</div>
        </div>
        
        <!-- COPYRIGHT -->
        <div class="copyright">Tototheo Global © 2025</div>
    </div>

    <!-- MAP TAB CONTENT -->
    <div class="tab-content tab-map" id="tab-map">
        <div class="map-panel">
            <div id="map"></div>
            <div class="map-overlay-legend">
                <div class="legend-section">Sources</div>
                <div><span class="legend-dot legend-primary"></span>Primary GPS</div>
                <div><span class="legend-dot legend-secondary"></span>Secondary GPS</div>
                <div><span class="legend-dot legend-ais"></span>TM AIS GPS</div>
                <div><span class="legend-dot legend-starlink-gps"></span>Starlink GPS</div>
                <div><span class="legend-dot legend-starlink-location"></span>Starlink Location</div>
                {% if show_route %}
                <div class="legend-section">24h Route</div>
                <div><span class="legend-dot legend-valid"></span>Valid</div>
                <div><span class="legend-dot legend-degraded"></span>Degraded</div>
                <div><span class="legend-dot legend-alert"></span>Alert</div>
                {% endif %}
            </div>
            {% if show_route %}
            <div class="map-route-toggle">
                <label>
                    <input type="checkbox" id="showRoute" checked onchange="toggleRoute()">
                    Show 24h Route
                </label>
            </div>
            {% endif %}
        </div>
    </div>
</div>

<script src="{{ url_for('static', filename='leaflet/leaflet.js') }}"></script>
<script>
    // Config passed from server
    window.SHOW_ROUTE = document.body.dataset.showRoute === 'true';
</script>
<script src="{{ url_for('static', filename='app.js') }}?v={{ range(1000000) | random }}"></script>
</body>
</html>
