{% extends "base.html" %}
{% block title %}MLAT - ESPILON{% endblock %}

{% block head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
{% endblock %}

{% block content %}
<div class="page">
    <div class="mlat-layout">
        <!-- Main: Map/Plan views -->
        <div class="mlat-main">
            <!-- View toggle toolbar -->
            <div class="toolbar">
                <button class="btn btn-sm" :class="currentView==='map'?'btn-primary':''" data-view="map" onclick="switchView('map')">Map</button>
                <button class="btn btn-sm" :class="currentView==='plan'?'btn-primary':''" data-view="plan" onclick="switchView('plan')">Plan</button>
                <div class="toolbar-sep"></div>
                <span class="toolbar-label" id="coord-mode-label">GPS</span>
            </div>

            <!-- Leaflet Map -->
            <div id="map-view" class="mlat-view active">
                <div id="leaflet-map"></div>
            </div>

            <!-- Plan Canvas -->
            <div id="plan-view" class="mlat-view">
                <div class="plan-controls">
                    <input type="file" id="plan-upload" accept="image/*" style="display:none" onchange="uploadPlanImage(this)">
                    <button class="btn btn-sm" onclick="document.getElementById('plan-upload').click()">Upload</button>
                    <button class="btn btn-sm" id="grid-toggle" onclick="toggleGrid()">Grid</button>
                    <button class="btn btn-sm" id="labels-toggle" onclick="toggleLabels()">Labels</button>
                    <div class="toolbar-sep"></div>
                    <button class="btn btn-sm" onclick="zoomPlan(-1)">-</button>
                    <span class="zoom-level" id="zoom-level">100%</span>
                    <button class="btn btn-sm" onclick="zoomPlan(1)">+</button>
                    <button class="btn btn-sm" onclick="resetZoom()">Reset</button>
                </div>
                <div class="plan-canvas-wrapper">
                    <canvas id="plan-canvas"></canvas>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="mlat-sidebar-panel" style="display:flex;flex-direction:column;gap:0;">
            <!-- Target -->
            <div class="panel" style="border:none;border-bottom:1px solid var(--border);">
                <div class="panel-header"><span>Target</span></div>
                <div class="panel-body">
                    <div class="kv">
                        <div class="kv-row"><span class="kv-key" id="target-coord1-label">Latitude</span><span class="kv-val" id="target-coord1">-</span></div>
                        <div class="kv-row"><span class="kv-key" id="target-coord2-label">Longitude</span><span class="kv-val" id="target-coord2">-</span></div>
                        <div class="kv-row"><span class="kv-key">Confidence</span><span class="kv-val" id="target-confidence">-</span></div>
                        <div class="kv-row"><span class="kv-key">Last Update</span><span class="kv-val" id="target-age">-</span></div>
                        <div class="kv-row"><span class="kv-key">Mode</span><span class="kv-val" id="coord-mode">GPS</span></div>
                    </div>
                </div>
            </div>

            <!-- Scanners -->
            <div class="panel" style="border:none;border-bottom:1px solid var(--border);flex:1;overflow:hidden;">
                <div class="panel-header"><span>Scanners (<span id="scanner-count">0</span>)</span></div>
                <div class="panel-body" id="scanner-list" style="overflow-y:auto;padding:4px;">
                    <div class="text-muted text-xs" style="padding:8px;">No scanners</div>
                </div>
            </div>

            <!-- Map/Plan Settings -->
            <div class="panel" id="map-settings" style="border:none;border-bottom:1px solid var(--border);">
                <div class="panel-header"><span>Map Settings</span></div>
                <div class="panel-body panel-body-pad">
                    <div class="form-row">
                        <span class="form-label">Lat</span>
                        <input type="number" class="input flex-1" id="map-center-lat" value="48.8566" step="0.0001">
                    </div>
                    <div class="form-row">
                        <span class="form-label">Lon</span>
                        <input type="number" class="input flex-1" id="map-center-lon" value="2.3522" step="0.0001">
                    </div>
                    <div class="form-row">
                        <span class="form-label">Zoom</span>
                        <input type="number" class="input" id="map-zoom" value="18" min="1" max="20" style="width:60px;">
                        <button class="btn btn-sm" onclick="centerMap()">Center</button>
                        <button class="btn btn-sm" onclick="fitMapToBounds()">Fit</button>
                    </div>
                </div>
            </div>
            <div class="panel" id="plan-settings" style="border:none;border-bottom:1px solid var(--border);display:none;">
                <div class="panel-header"><span>Plan Settings</span></div>
                <div class="panel-body panel-body-pad">
                    <div class="form-row">
                        <span class="form-label">W (m)</span>
                        <input type="number" class="input flex-1" id="plan-width" value="50" min="1">
                    </div>
                    <div class="form-row">
                        <span class="form-label">H (m)</span>
                        <input type="number" class="input flex-1" id="plan-height" value="30" min="1">
                    </div>
                    <div class="form-row">
                        <span class="form-label">Origin</span>
                        <input type="number" class="input" id="plan-origin-x" value="0" step="0.1" style="width:60px;" placeholder="X">
                        <input type="number" class="input" id="plan-origin-y" value="0" step="0.1" style="width:60px;" placeholder="Y">
                        <button class="btn btn-sm" onclick="applyPlanSettings()">Apply</button>
                    </div>
                </div>
            </div>

            <!-- MLAT Config -->
            <div class="panel" style="border:none;">
                <div class="panel-header"><span>Config</span></div>
                <div class="panel-body panel-body-pad">
                    <div class="form-row">
                        <span class="form-label">RSSI@1m</span>
                        <input type="number" class="input" id="config-rssi" value="-40" step="1" style="width:70px;">
                    </div>
                    <div class="form-row">
                        <span class="form-label">Loss (n)</span>
                        <input type="number" class="input" id="config-n" value="2.5" step="0.1" style="width:70px;">
                    </div>
                    <div class="form-row">
                        <span class="form-label">Smooth</span>
                        <input type="number" class="input" id="config-smooth" value="5" min="1" max="20" style="width:70px;">
                    </div>
                    <div class="form-row">
                        <span class="form-label"></span>
                        <button class="btn btn-sm btn-primary" onclick="saveConfig()">Save</button>
                        <button class="btn btn-sm btn-danger" onclick="clearData()">Clear</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/mlat.js') }}"></script>
{% endblock %}