<!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 Cloud</title>
    
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
    
    <link rel="stylesheet" href="/static/style.css?v={{ cache_buster }}">
</head>
<body>

<!-- HEADER -->
<div class="header">
    <div class="header-left">
        <div class="header-title">TM GNSS Guard</div>
        <div class="header-sub">Multi-Asset Monitoring Cloud</div>
    </div>
    <div class="header-right">
        <div class="user-menu">
            <span class="user-name">{{ username }}</span>
            <button class="logout-btn" onclick="logout()">Logout</button>
        </div>
    </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 ASSET DROPDOWN -->
<div class="mobile-asset-dropdown" id="mobileAssetDropdown">
    <select id="mobileAssetSelect" onchange="selectAsset(this.value)">
        <option value="">Select Asset...</option>
    </select>
</div>

<!-- MOBILE TIME SELECTOR -->
<div class="mobile-time-selector" id="mobileTimeSelector">
    <div class="time-radio-group">
        <label class="time-radio">
            <input type="radio" name="timeModeM" value="now" checked onchange="setTimeMode('now')">
            <span>Now</span>
        </label>
        <label class="time-radio">
            <input type="radio" name="timeModeM" value="select" onchange="setTimeMode('select')">
            <span>Select Day/Time</span>
        </label>
    </div>
    <div class="datetime-picker hidden" id="mobileDatetimePicker">
        <input type="datetime-local" id="mobileSelectedDatetime" onchange="onDatetimeChange()">
        <button class="apply-time-btn" onclick="applySelectedTime()">Apply</button>
    </div>
    <div class="selected-time-display hidden" id="mobileSelectedTimeDisplay">
        Viewing: <span id="mobileSelectedTimeText"></span>
    </div>
</div>

<!-- MOBILE GNSS STATUS (visible only in mobile view) -->
<div class="mobile-gnss-status" id="mobileGnssStatus">
    <div class="status-pill" id="mobileStatusPill">GNSS Integrity: —</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">
    <!-- ASSET PANEL (desktop only) -->
    <div class="asset-panel" id="assetPanel">
        <div class="panel-title">Assets</div>
        <div class="asset-list" id="assetList">
            <!-- Assets populated by JavaScript -->
            <div class="asset-loading">Loading assets...</div>
        </div>
        
        <!-- TIME SELECTOR -->
        <div class="time-selector" id="timeSelector">
            <div class="panel-title">Time</div>
            <div class="time-radio-group">
                <label class="time-radio">
                    <input type="radio" name="timeMode" value="now" checked onchange="setTimeMode('now')">
                    <span>Now</span>
                </label>
                <label class="time-radio">
                    <input type="radio" name="timeMode" value="select" onchange="setTimeMode('select')">
                    <span>Select Day/Time</span>
                </label>
            </div>
            <div class="datetime-picker hidden" id="datetimePicker">
                <input type="datetime-local" id="selectedDatetime" onchange="onDatetimeChange()">
                <button class="apply-time-btn" onclick="applySelectedTime()">Apply</button>
            </div>
            <div class="selected-time-display hidden" id="selectedTimeDisplay">
                Viewing: <span id="selectedTimeText"></span>
            </div>
        </div>
    </div>

    <!-- STATUS TAB CONTENT (Sources + Event Log) -->
    <div class="tab-content tab-status active" id="tab-status">
        <div class="left-panel">
            <!-- DESKTOP GNSS STATUS (visible only in desktop view) -->
            <div class="desktop-gnss-status" id="desktopGnssStatus">
                <div class="status-pill" id="desktopStatusPill">GNSS Integrity: —</div>
            </div>
            <div class="panel-title">GNSS Sources</div>
            <div id="sourcesContainer">
                <div class="no-asset-selected">Select an asset to view GNSS sources</div>
            </div>
        </div>

        <!-- EVENT LOG -->
        <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>
                <div class="legend-section">72h 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>
            </div>
            <div class="map-route-toggle">
                <label>
                    <input type="checkbox" id="showRoute" checked onchange="toggleRoute()">
                    Show 72h Route
                </label>
            </div>
        </div>
    </div>
</div>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="/static/app.js?v={{ cache_buster }}"></script>
</body>
</html>

