{% extends "base.html" %}
{# Fleet map with the desktop Fleet Map's field tools (2026-10-02): towers,
   sector wedges, CPEs, devices and sites on a real map, line of sight over
   USGS 3DEP LiDAR terrain, RF coverage heatmaps, "can we serve this
   address?", mast heights (typed or measured from LiDAR), and placing
   devices and sites by hand. Leaflet ships with AidaIDE (static/vendor) and
   map tiles come through this PC: the server's Content-Security-Policy
   allows images only from this PC, and the PC keeps every tile it fetches,
   so the map works on a LAN with no internet wherever it has looked. #}
{% block title %}Fleet map{% endblock %}
{% block page_id %}fleet_map{% endblock %}
{% block head %}
<link rel="stylesheet" href="{{ aida_rel('static/vendor/leaflet/leaflet.css') }}">
<style>
  .fm-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
  .fm-modes { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--radius-sm); overflow: hidden; }
  .fm-modes .a-btn { border: 0; border-radius: 0; background: transparent; }
  .fm-modes .a-btn + .a-btn { border-left: 1px solid var(--line-2); }
  .fm-modes .a-btn[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
  .fm-find { display: flex; gap: 6px; flex: 1 1 260px; min-width: 0; max-width: 520px; }
  .fm-find .a-input { flex: 1 1 auto; min-width: 0; }
  .fm-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 30px; padding: 5px 10px; margin-bottom: 8px;
             border-radius: var(--radius-sm); background: var(--bg-2); border: 1px solid var(--line); font-size: 13px; color: var(--muted); }
  .fm-hint.fm-hint--act { background: var(--info-soft); border-color: var(--info); color: var(--text); }
  .fm-hint .a-progress { flex: 1 1 120px; min-width: 80px; max-width: 260px; }
  .fm-counts { font-size: 12px; color: var(--faint); margin: -2px 0 8px; }
  .fm-wrap { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
  .fm-map { height: 62vh; min-height: 320px; border-radius: var(--radius); border: 1px solid var(--line); background: #0e1526; z-index: 0; }
  .fm-map:focus { outline: none; }
  .fm-map:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
  .fm-popup-open .fm-legend, .fm-popup-open .fm-legend-btn { display: none; }
  @media (max-width: 719px) { .fm-popup-open .leaflet-top { visibility: hidden; } }
  .fm-side { min-width: 0; }
  .fm-side > .a-card + .a-card { margin-top: 12px; }
  @media (min-width: 1100px) {
    .fm-wrap { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
    .fm-map { height: calc(100vh - 300px); min-height: 440px; }
    .fm-side { max-height: calc(100vh - 300px); overflow: auto; padding-right: 2px; }
  }
  .fm-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
  .fm-card-head h2 { font-size: 15px; margin: 0; margin-right: auto; min-width: 0; overflow-wrap: anywhere; }
  .fm-sub { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
  .fm-chip { font-weight: 700; letter-spacing: .02em; color: #0e1526; border-radius: 999px; padding: 2px 10px; font-size: 12px; white-space: nowrap; }
  .fm-knobs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 10px; margin: 8px 0; }
  .fm-knobs .a-field { margin: 0; }
  .fm-knobs .a-input { min-height: 34px; }
  .fm-stats { font-size: 12px; color: var(--muted); line-height: 1.5; }
  .fm-stats div + div { margin-top: 2px; }
  .fm-chart { display: block; width: 100%; height: 230px; background: #0e1526; border-radius: var(--radius-sm); }
  .fm-chart text { font: 10px var(--font); fill: #8899bb; }
  .fm-rows { width: 100%; border-collapse: collapse; font-size: 12px; }
  .fm-rows th, .fm-rows td { text-align: left; padding: 5px 4px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  .fm-rows th { color: var(--faint); font-weight: 600; }
  .fm-rows td.fm-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .fm-cls { display: inline-block; border-radius: 4px; padding: 1px 6px; font-weight: 700; font-size: 11px; color: #0e1526; }
  .fm-list { list-style: none; margin: 0; padding: 0; }
  .fm-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .fm-list li > div { min-width: 0; flex: 1 1 auto; }
  .fm-list .fm-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .fm-list .fm-why { font-size: 12px; color: var(--faint); overflow-wrap: anywhere; }
  .fm-pick { max-height: 46vh; overflow: auto; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
  .fm-pick button { display: block; width: 100%; text-align: left; background: transparent; color: var(--text); border: 0; border-bottom: 1px solid var(--line); padding: 8px 10px; cursor: pointer; font: inherit; }
  .fm-pick button:hover, .fm-pick button:focus { background: var(--bg-3); outline: none; }
  .fm-pick small { color: var(--faint); }
  .fm-unit { display: inline-flex; gap: 10px; align-items: center; }
  /* Leaflet in the page's dark theme */
  .leaflet-container { background: #0e1526; font: 12px/1.4 var(--font); }
  .leaflet-bar a, .leaflet-bar a:hover { background: var(--bg-2); color: var(--text); border-bottom-color: var(--line-2); }
  .leaflet-bar a.leaflet-disabled { background: var(--bg-3); color: var(--faint); }
  .leaflet-control-layers { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2) !important; }
  .leaflet-control-layers-expanded { padding: 8px 10px; }
  .leaflet-control-layers-separator { border-top-color: var(--line-2); }
  .leaflet-control-attribution { background: rgba(11, 22, 32, .78) !important; color: var(--muted); }
  .leaflet-control-attribution a { color: var(--accent); }
  .leaflet-control-scale-line { background: rgba(11, 22, 32, .7); color: var(--text); border-color: var(--muted); }
  .leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--bg-2); color: var(--text); box-shadow: var(--shadow); }
  .leaflet-popup-content { margin: 10px 12px; }
  .leaflet-container a.leaflet-popup-close-button { color: var(--muted); }
  .leaflet-tooltip { background: var(--bg-2); color: var(--text); border-color: var(--line-2); box-shadow: none; }
  .leaflet-tooltip-top:before { border-top-color: var(--line-2); }
  .leaflet-tooltip-bottom:before { border-bottom-color: var(--line-2); }
  .fm-heat { image-rendering: pixelated; image-rendering: crisp-edges; }
  .fm-lab { background: rgba(11, 22, 32, .72) !important; border: 0 !important; color: var(--text) !important; padding: 1px 5px !important; font-size: 11px; font-weight: 600; }
  .fm-lab:before { display: none; }
  .fm-wlab { background: transparent !important; border: 0 !important; box-shadow: none !important; color: #0e1526 !important; font: 700 10px var(--font); padding: 0 !important; }
  .fm-wlab:before { display: none; }
  .fm-dev { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%;
            border: 2px solid #0e1526; color: #0e1526; font: 700 9px var(--font); box-shadow: 0 0 0 1px rgba(255,255,255,.55); }
  .fm-dev--site { border-style: dashed; border-color: #e6f0f2; }
  .fm-dev--sel { box-shadow: 0 0 0 3px #ffffff; }
  .fm-site { width: 16px; height: 16px; transform: rotate(45deg); border: 1.5px solid #ffffff; }
  .fm-tower { width: 14px; height: 14px; border-radius: 50%; background: #e94560; border: 2px solid #ffffff; box-shadow: 0 0 0 1px #0e1526; }
  .fm-pin { width: 22px; height: 22px; border: 2px solid #ff5f9e; border-radius: 50%; position: relative; }
  .fm-pin:before, .fm-pin:after { content: ''; position: absolute; background: #ff5f9e; }
  .fm-pin:before { left: 9px; top: -6px; width: 2px; height: 30px; }
  .fm-pin:after { top: 9px; left: -6px; height: 2px; width: 30px; }
  .fm-end { width: 14px; height: 14px; border-radius: 3px; background: #e94560; border: 2px solid #ffffff; }
  .fm-pop { min-width: 210px; }
  .fm-pop-title { font-weight: 700; font-size: 14px; margin-bottom: 2px; overflow-wrap: anywhere; }
  .fm-pop .a-kv { margin: 6px 0; font-size: 12px; }
  .fm-pop-acts { display: flex; flex-direction: column; margin: 6px -6px -4px; }
  .fm-pop-acts .a-menu-item { width: 100%; }
  .fm-legend { background: rgba(15, 30, 43, .92); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 6px 8px; color: var(--text); font-size: 11px; max-width: 230px; }
  .fm-legend b { display: block; font-size: 11px; color: var(--muted); margin: 4px 0 2px; }
  .fm-legend b:first-child { margin-top: 0; }
  .fm-legend span.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
  .fm-legend .row { white-space: nowrap; }
  .fm-legend .rows { display: flex; flex-wrap: wrap; gap: 0 10px; }
  .fm-legend-btn { background: var(--bg-2); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 4px 8px; font: 12px var(--font); cursor: pointer; }
  @media (max-width: 719px) {
    .fm-modes .a-btn { padding-left: 9px; padding-right: 9px; font-size: 13px; }
    .fm-modes .a-btn i { margin-right: 0; }
    .fm-knobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fm-chart { height: 190px; }
  }
</style>
{% endblock %}
{% block content %}
<div class="a-page-head">
  <h1><i class="fa-solid fa-map-location-dot" aria-hidden="true"></i> Fleet map</h1>
  <div class="a-sub">Towers, sectors, CPEs and devices on a real map, with the desktop Fleet Map's field tools: line of sight over USGS LiDAR terrain, coverage heatmaps, "can we serve this address?" and mast heights. Read from the PC's caches: nothing here probes a radio.</div>
</div>
<div id="fm-root"></div>
{% endblock %}
{% block scripts %}
<script src="{{ aida_rel('static/vendor/leaflet/leaflet.js') }}"></script>
<script src="{{ aida_rel('static/js/fleet_map.js') }}"></script>
{% endblock %}