{% extends "base.html" %}
{% block title %}Mobile — SignalOps{% endblock %}
{% block extra_style %}
/* ── Responsive (mobile/tablet only; desktop >900px unchanged) ── */
@media (max-width:900px){
  .m-top-grid{grid-template-columns:minmax(0,1fr)!important}
  .m-top-grid>.card{min-width:0;margin-bottom:0}
  .m-table-card{overflow-x:auto!important;-webkit-overflow-scrolling:touch}
  .m-table-card #m-table{min-width:680px}
  .m-top-grid .btn,#m-geo-btn{min-height:36px}
  #imsi-list>div>div:first-child{flex-wrap:wrap;gap:4px}
  #imsi-list>div{overflow-wrap:anywhere}
  #tower-detail-overlay{padding:10px!important}
  #tower-detail-overlay [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:minmax(0,1fr)!important}
  #tower-detail-overlay>div{overflow-wrap:anywhere}
}
@media (max-width:600px){
  #m-empty{padding:40px 16px!important}
  #tower-detail-overlay>div>div{padding-left:16px!important;padding-right:16px!important}
}
{% endblock %}
{% block content %}
<div class="section-hdr" style="flex-wrap:wrap">Mobile Network Intelligence<span id="so-case-bar" style="margin:-5px 0 -5px auto;letter-spacing:0"></span></div>
<div class="m-top-grid" style="display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px">
  <div class="card">
    <div class="section-hdr" style="font-size:13px;margin-bottom:14px">Cell Tower Search</div>
    <input id="m-lat" placeholder="Latitude" style="margin-bottom:8px">
    <input id="m-lon" placeholder="Longitude" style="margin-bottom:10px">
    <div style="display:flex;gap:8px">
      <button id="m-scan-btn" class="btn btn-p" style="flex:1">Scan</button>
      <button id="m-geo-btn" class="btn btn-g"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z"/><circle cx="12" cy="10" r="2.5"/></svg></button>
    </div>
  </div>
  <div class="card">
    <div class="section-hdr" style="font-size:13px;margin-bottom:14px">Operator Lookup</div>
    <div style="display:flex;gap:8px;margin-bottom:8px">
      <input id="m-mcc" placeholder="MCC" style="width:30%">
      <input id="m-mnc" placeholder="MNC" style="width:30%">
      <input id="m-cellid" placeholder="Cell ID" style="width:40%">
    </div>
    <button id="m-op-btn" class="btn btn-outline" style="width:100%">Lookup</button>
    <div id="mobile-op-result" style="margin-top:12px;display:none"></div>
  </div>
</div>
<div id="imsi-panel" style="display:none;background:rgba(199, 123, 123,0.04);border:1px solid rgba(199, 123, 123,0.25);border-radius:8px;padding:16px;margin-bottom:16px">
  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px">
    <div class="section-hdr" style="margin:0;color:#C77B7B"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3l9.5 17h-19z"/><path d="M12 10v4M12 17.5v.01"/></svg> IMSI Catcher Indicators</div>
    <span id="imsi-count" class="badge badge-err"></span>
  </div>
  <div id="imsi-list" style="display:flex;flex-direction:column;gap:6px"></div>
</div>
<div class="card m-table-card" style="padding:0;overflow:hidden">
  <table id="m-table" style="display:none">
    <thead><tr>
      <th>Cell ID</th><th>Operator</th><th>Radio</th><th>Country</th>
      <th>MCC</th><th>MNC</th><th>LAC</th><th>Signal</th><th>Status</th>
    </tr></thead>
    <tbody id="m-tbody"></tbody>
  </table>
  <div id="m-empty" style="text-align:center;padding:60px;color:var(--tm)">
    <div style="font-size:36px;opacity:0.2;margin-bottom:12px"><svg class="so-ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="6" y="2" width="12" height="20" rx="2"/><path d="M11 18h2"/></svg></div>
    <div style="font-family:'Rajdhani',sans-serif;letter-spacing:3px">Scan an area</div>
  </div>
</div>
{% endblock %}
{% block scripts %}
<script src="/static/js/so-cases.js" defer></script>
<script>
// Vaka araç çubuğu (Save to case / Export) — son kule taraması
document.addEventListener('DOMContentLoaded', () => {
  if(window.SignalOpsCase) SignalOpsCase.attach(document.getElementById('so-case-bar'), {
    kind: 'cell', title: 'Cell Towers (Mobile)',
    getDevices: () => (window.__soCellScan && window.__soCellScan.towers) || [],
    getCenter: () => (window.__soCellScan && window.__soCellScan.center) || null,
  });
});

function mobileGeo(){
  console.log('[mobileGeo] clicked');
  const btn = document.getElementById('m-geo-btn');
  const orig = btn ? btn.innerHTML : window.SO_PIN;
  if(btn){ btn.textContent = '…'; btn.disabled = true; }

  const restoreBtn = () => {
    if(btn){ btn.innerHTML = orig; btn.disabled = false; }
  };

  const apply = (lat, lon, src) => {
    console.log('[mobileGeo] got coords from', src, ':', lat, lon);
    document.getElementById('m-lat').value = lat.toFixed(5);
    document.getElementById('m-lon').value = lon.toFixed(5);
    try { localStorage.setItem('sigops_last_coords', JSON.stringify({lat, lon})); } catch(e){}
    restoreBtn();
    mobileScan();
  };

  const fail = (msg) => {
    console.warn('[mobileGeo] failed:', msg);
    restoreBtn();
    // Try cached coords as fallback
    try {
      const saved = JSON.parse(localStorage.getItem('sigops_last_coords') || 'null');
      if(saved && typeof saved.lat === 'number'){
        console.warn('[mobileGeo] using cached coords:', saved);
        apply(saved.lat, saved.lon, 'cache');
        return;
      }
    } catch(e){}
    const empty = document.getElementById('m-empty');
    if(empty){
      empty.innerHTML = '<div style="color:#F87171;font-family:Rajdhani,sans-serif;letter-spacing:2px;font-size:12px">' + escapeHtml(msg) + '</div>';
      empty.style.display = 'block';
    } else {
      alert('Location: ' + msg);
    }
  };

  if(!navigator.geolocation){
    fail('Geolocation not supported by this browser');
    return;
  }

  try {
    navigator.geolocation.getCurrentPosition(
      p => apply(p.coords.latitude, p.coords.longitude, 'gps'),
      err => {
        const codeNames = {1:'PERMISSION_DENIED', 2:'POSITION_UNAVAILABLE', 3:'TIMEOUT'};
        const name = codeNames[err.code] || 'UNKNOWN_ERROR';
        fail(name + ' — ' + (err.message || 'could not get location'));
      },
      {timeout: 10000, enableHighAccuracy: false, maximumAge: 60000}
    );
  } catch(e){
    fail('Error: ' + e.message);
  }
}

async function mobileScan(){
  const lat=parseFloat(document.getElementById('m-lat').value);
  const lon=parseFloat(document.getElementById('m-lon').value);
  if(isNaN(lat)||isNaN(lon))return;
  const scanBtn=document.getElementById('m-scan-btn');
  if(scanBtn) scanBtn.disabled=true;
  document.getElementById('m-empty').innerHTML='<div style="color:var(--p);font-family:Rajdhani,sans-serif;letter-spacing:2px">SCANNING...</div>';
  document.getElementById('m-empty').style.display='block';
  document.getElementById('m-table').style.display='none';
  document.getElementById('imsi-panel').style.display='none';
  try {
  // mode=cell: only cell towers (WiGLE cell + OpenCellID) — this page uses towers + imsi_findings only
  const res=await fetch(`/nearby?lat=${lat}&lon=${lon}&mode=cell`);
  let data={};
  try { data=await res.json(); } catch(_){ data={}; }
  if(!res.ok){
    throw new Error((data && data.error) || ('HTTP '+res.status));
  }
  const towers=(data.devices||[]).filter(d=>d.type==='cell_tower');
  window.__soCellScan = {towers, center: {lat, lon}};
  const imsiFindings = data.imsi_findings || [];
  const imsiByCell = {};
  imsiFindings.forEach(f => { if(f.cell_id) imsiByCell[String(f.cell_id)] = f; });

  // Dashboard threat aggregator
  try {
    const agg = JSON.parse(localStorage.getItem('sigops_threat_agg') || '{}') || {};
    agg.imsi = imsiFindings.length;   // current value (replace, not max)
    agg.imsi_ts = Date.now();
    agg.ts = Date.now();
    localStorage.setItem('sigops_threat_agg', JSON.stringify(agg));
  } catch(e){}

  if(!towers.length){
    document.getElementById('m-empty').innerHTML='<div style="color:var(--tm);font-family:Rajdhani,sans-serif;letter-spacing:2px">No towers found</div>';
    return;
  }
  document.getElementById('m-empty').style.display='none';
  document.getElementById('m-table').style.display='table';

  // Signal quality labels
  const sigLabel = (s) => {
    if (s == null) return '—';
    if (s >= -65) return 'Excellent';
    if (s >= -75) return 'Good';
    if (s >= -85) return 'Fair';
    if (s >= -95) return 'Poor';
    return 'Very Weak';
  };
  const sigColor = (s) => {
    if (s == null) return '#9896AE';
    if (s >= -75) return '#4ADE80';
    if (s >= -90) return '#FBBF24';
    return '#F87171';
  };

  const rc={lte:'#A78BFA',gsm:'#4ADE80',umts:'#60A5FA',nr:'#F87171',cdma:'#FB923C'};
  const radioSpeed = {
    gsm:  '2G · ~384 Kbps · Voice+SMS',
    umts: '3G · ~42 Mbps · Mobile data',
    lte:  '4G · ~300 Mbps · Broadband',
    nr:   '5G · >1 Gbps · Ultra-broadband',
    cdma: '2G CDMA · Legacy',
  };

  // Stash towers globally so detail panel can look them up
  window.__scanTowers = towers;
  window.__scanImsi = imsiByCell;

  document.getElementById('m-tbody').innerHTML=towers.map((t,idx)=>{
    const imsi = imsiByCell[String(t.cell_id)];
    const levelCol = imsi ? (imsi.level === 'CRITICAL' ? '#F87171' : imsi.level === 'HIGH' ? '#FB7185' : '#FBBF24') : null;
    const statusCell = imsi
      ? `<span class="badge badge-err" style="background:rgba(248,113,113,0.15);color:${levelCol};border-color:${levelCol}60">IMSI:${imsi.level}</span>`
      : `<span class="badge badge-ok">OK</span>`;
    const rowBg = imsi ? 'background:rgba(248,113,113,0.04)' : '';
    const sig = t.signal;
    const sigDisplay = (sig == null || sig === 0) ? '—' : `${sig} dBm`;
    return `<tr data-idx="${idx}" onclick="showTowerDetail(${idx})" style="${rowBg};cursor:pointer;transition:background 0.15s" onmouseover="this.style.background='${imsi?'rgba(248,113,113,0.08)':'rgba(139,92,246,0.04)'}'" onmouseout="this.style.background='${imsi?'rgba(248,113,113,0.04)':'transparent'}'">
      <td style="color:var(--t);font-family:'JetBrains Mono',monospace;font-size:11px">${escapeHtml(String(t.cell_id||'—'))}</td>
      <td style="color:var(--pl);font-family:'Rajdhani',sans-serif;font-weight:600">${t.operator ? escapeHtml(t.operator) : '<span style="color:#F87171">Unknown</span>'}</td>
      <td><span style="color:${rc[(t.radio||'').toLowerCase()]||'#9896AE'};font-family:'Rajdhani',sans-serif;font-weight:700;letter-spacing:0.5px">${escapeHtml((t.radio||'?').toUpperCase())}</span></td>
      <td style="font-size:10px;color:var(--td)">${escapeHtml(t.country||'—')}</td>
      <td style="font-family:'JetBrains Mono',monospace;font-size:10px">${escapeHtml(String(t.mcc||'—'))}</td>
      <td style="font-family:'JetBrains Mono',monospace;font-size:10px">${escapeHtml(String(t.mnc||'—'))}</td>
      <td style="font-family:'JetBrains Mono',monospace;font-size:10px">${escapeHtml(String(t.lac||'—'))}</td>
      <td style="color:${sigColor(sig)};font-weight:600">${sigDisplay}</td>
      <td>${statusCell}</td>
    </tr>`;
  }).join('');
  // Expose helpers so detail fn can use them
  window.__sigLabel = sigLabel;
  window.__sigColor = sigColor;
  window.__radioSpeed = radioSpeed;

  // Render IMSI panel
  if(imsiFindings.length > 0){
    document.getElementById('imsi-panel').style.display='block';
    document.getElementById('imsi-count').textContent = imsiFindings.length + ' suspect(s)';
    document.getElementById('imsi-list').innerHTML = imsiFindings.map(f => {
      const col = f.level === 'CRITICAL' ? '#F87171' : f.level === 'HIGH' ? '#FB7185' : '#FBBF24';
      return `<div style="background:var(--s);border:1px solid ${col}30;border-left:3px solid ${col};border-radius:6px;padding:10px 12px">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px">
          <span style="font-family:'Rajdhani',sans-serif;font-weight:700;color:var(--t);font-size:13px">
            Cell ${escapeHtml(String(f.cell_id||'?'))} · ${escapeHtml(f.operator||'Unknown')} · ${escapeHtml((f.radio||'?').toUpperCase())}
          </span>
          <span style="color:${col};font-size:11px;font-weight:700">${escapeHtml(f.level)} · ${escapeHtml(f.severity)}/100</span>
        </div>
        <div style="font-size:10px;color:var(--td);margin-bottom:4px">
          MCC:${escapeHtml(f.mcc||'?')} · MNC:${escapeHtml(f.mnc||'?')} · LAC:${escapeHtml(f.lac||'?')} · Signal:${escapeHtml(f.signal||'?')} dBm
        </div>
        <ul style="font-size:10px;color:var(--tm);margin:0;padding-left:16px;line-height:1.6">
          ${(f.reasons||[]).map(r => `<li>${escapeHtml(r)}</li>`).join('')}
        </ul>
      </div>`;
    }).join('');
  }
  } catch(e){
    document.getElementById('m-table').style.display='none';
    document.getElementById('m-empty').innerHTML='<div style="color:#F87171;font-family:Rajdhani,sans-serif;letter-spacing:2px;font-size:12px">SCAN FAILED — '+escapeHtml(e && e.message || 'network error')+'</div>';
    document.getElementById('m-empty').style.display='block';
  } finally {
    if(scanBtn) scanBtn.disabled=false;
  }
}

function escapeHtml(s){
  if(s==null) return '';
  return String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
}

// Click on any tower row to see full detail in a modal
function showTowerDetail(idx){
  const t = (window.__scanTowers || [])[idx];
  if(!t) return;
  const imsi = (window.__scanImsi || {})[String(t.cell_id)];
  const sigLabel = window.__sigLabel || ((s) => '—');
  const sigColor = window.__sigColor || (() => '#9896AE');
  const radioSpeed = window.__radioSpeed || {};

  const sig = t.signal;
  const sigDisplay = (sig == null || sig === 0) ? 'Unknown' : `${sig} dBm`;
  const radio = (t.radio||'').toLowerCase();
  const radioInfo = radioSpeed[radio] || 'Radio type unknown';

  // Build OpenCellID external link for verification
  const ocidUrl = t.mcc && t.mnc && t.lac && t.cell_id
    ? `https://opencellid.org/#zoom=15&lat=${t.lat}&lon=${t.lon}&mcc=${t.mcc}&mnc=${t.mnc}&lac=${t.lac}&cid=${t.cell_id}`
    : null;
  // Google Maps deep-link for location verification
  const mapsUrl = (t.lat && t.lon) ? `https://www.google.com/maps/@${t.lat},${t.lon},18z` : null;

  const imsiSection = imsi ? `
    <div style="background:rgba(248,113,113,0.08);border:1px solid rgba(248,113,113,0.3);border-left:4px solid #F87171;border-radius:6px;padding:14px;margin-top:14px">
      <div style="font-family:'Rajdhani',sans-serif;font-weight:700;color:#F87171;letter-spacing:1.5px;margin-bottom:8px">
        IMSI CATCHER INDICATORS · ${imsi.level} · ${imsi.severity}/100
      </div>
      <div style="font-size:11px;color:var(--td);margin-bottom:6px">Why this tower is flagged:</div>
      <ul style="margin:0;padding-left:18px;color:var(--tm);font-size:11px;line-height:1.7">
        ${(imsi.reasons||[]).map(r => `<li>${escapeHtml(r)}</li>`).join('')}
      </ul>
    </div>` : '';

  const html = `
    <div onclick="closeTowerDetail(event)" style="position:fixed;inset:0;background:rgba(0,0,0,0.75);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px" id="tower-detail-overlay">
      <div onclick="event.stopPropagation()" style="background:var(--s,#15171c);border:1px solid rgba(139,92,246,0.3);border-radius:12px;max-width:640px;width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 10px 60px rgba(0,0,0,0.6)">
        <div style="padding:20px 24px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;justify-content:space-between;align-items:flex-start">
          <div>
            <div style="font-family:'Rajdhani',sans-serif;font-size:11px;letter-spacing:2px;color:var(--tm);margin-bottom:4px">CELL TOWER DETAILS</div>
            <div style="font-family:'Rajdhani',sans-serif;font-size:22px;font-weight:700;color:${imsi?'#F87171':'var(--pl)'}">${escapeHtml(t.operator||'Unknown Operator')}</div>
            <div style="font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--td);margin-top:2px">Cell ID: ${escapeHtml(String(t.cell_id||'—'))}</div>
          </div>
          <button onclick="closeTowerDetail()" style="background:none;border:1px solid rgba(255,255,255,0.1);color:var(--tm);width:32px;height:32px;border-radius:6px;cursor:pointer;font-size:16px">×</button>
        </div>

        <div style="padding:20px 24px">
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px 16px;margin-bottom:14px">
            <div>
              <div style="font-size:10px;color:var(--tm);letter-spacing:1.5px;margin-bottom:4px">COUNTRY</div>
              <div style="color:var(--t);font-size:13px">${escapeHtml(t.country || '—')}${t.country_iso ? ` <span style="color:var(--tm);font-size:10px">(${escapeHtml(t.country_iso)})</span>` : ''}</div>
            </div>
            <div>
              <div style="font-size:10px;color:var(--tm);letter-spacing:1.5px;margin-bottom:4px">TECHNOLOGY</div>
              <div style="color:var(--t);font-size:13px">${escapeHtml((t.radio||'?').toUpperCase())} <span style="color:var(--td);font-size:10px">· ${escapeHtml(radioInfo)}</span></div>
            </div>
            <div>
              <div style="font-size:10px;color:var(--tm);letter-spacing:1.5px;margin-bottom:4px">SIGNAL STRENGTH</div>
              <div style="color:${sigColor(sig)};font-size:13px;font-weight:600">${sigDisplay} <span style="color:var(--tm);font-size:10px;font-weight:400">· ${sigLabel(sig)}</span></div>
            </div>
            <div>
              <div style="font-size:10px;color:var(--tm);letter-spacing:1.5px;margin-bottom:4px">COORDINATES</div>
              <div style="color:var(--t);font-size:12px;font-family:'JetBrains Mono',monospace">${t.lat ? Number(t.lat).toFixed(5) : '—'}, ${t.lon ? Number(t.lon).toFixed(5) : '—'}</div>
            </div>
          </div>

          <div style="background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);border-radius:6px;padding:12px;font-family:'JetBrains Mono',monospace;font-size:11px;line-height:1.8">
            <div style="color:var(--tm);font-size:9px;letter-spacing:1.5px;margin-bottom:6px">NETWORK IDENTIFIERS</div>
            <div><span style="color:var(--tm);display:inline-block;width:70px">MCC:</span><span style="color:var(--t)">${escapeHtml(String(t.mcc||'—'))}</span> <span style="color:var(--td);font-size:10px">— Mobile Country Code</span></div>
            <div><span style="color:var(--tm);display:inline-block;width:70px">MNC:</span><span style="color:var(--t)">${escapeHtml(String(t.mnc||'—'))}</span> <span style="color:var(--td);font-size:10px">— Mobile Network Code</span></div>
            <div><span style="color:var(--tm);display:inline-block;width:70px">LAC/TAC:</span><span style="color:var(--t)">${escapeHtml(String(t.lac||'—'))}</span> <span style="color:var(--td);font-size:10px">— Location/Tracking Area Code</span></div>
            <div><span style="color:var(--tm);display:inline-block;width:70px">Cell ID:</span><span style="color:var(--t)">${escapeHtml(String(t.cell_id||'—'))}</span></div>
            <div><span style="color:var(--tm);display:inline-block;width:70px">Source:</span><span style="color:#60A5FA">${escapeHtml(String(t.source||'—'))}</span></div>
            ${t.timestamp ? `<div><span style="color:var(--tm);display:inline-block;width:70px">Last seen:</span><span style="color:var(--td)">${escapeHtml(String(t.timestamp))}</span></div>` : ''}
          </div>

          ${imsiSection}

          <div style="display:flex;gap:8px;margin-top:16px;flex-wrap:wrap">
            ${ocidUrl ? `<a href="${escapeHtml(ocidUrl)}" target="_blank" rel="noopener" class="btn btn-outline" style="text-decoration:none;font-size:11px">Verify on OpenCellID</a>` : ''}
            ${mapsUrl ? `<a href="${escapeHtml(mapsUrl)}" target="_blank" rel="noopener" class="btn btn-outline" style="text-decoration:none;font-size:11px">Open in Maps</a>` : ''}
          </div>
        </div>
      </div>
    </div>`;

  const existing = document.getElementById('tower-detail-overlay');
  if(existing) existing.remove();
  document.body.insertAdjacentHTML('beforeend', html);
}

function closeTowerDetail(e){
  if(e && e.target.id !== 'tower-detail-overlay') return;
  const el = document.getElementById('tower-detail-overlay');
  if(el) el.remove();
}
// ESC to close
document.addEventListener('keydown', e => { if(e.key === 'Escape') closeTowerDetail(); });

async function mobileOp(){
  const mcc=document.getElementById('m-mcc').value;
  const mnc=document.getElementById('m-mnc').value;
  if(!mcc||!mnc)return;
  try{
    const res=await fetch(`/api/mccmnc-lookup?mcc=${encodeURIComponent(mcc)}&mnc=${encodeURIComponent(mnc)}`);
    let d={};
    try { d=await res.json(); } catch(_){ d={}; }
    const el=document.getElementById('mobile-op-result');
    if(!res.ok){
      el.innerHTML=`<div style="color:#F87171;font-size:12px">${escapeHtml((d && d.error) || ('HTTP '+res.status))}</div>`;
      el.style.display='block';
      return;
    }
    el.innerHTML=`<div style="background:rgba(74,222,128,0.06);border:1px solid rgba(74,222,128,0.2);border-radius:6px;padding:12px;font-size:12px">
      <div style="color:var(--g);font-family:'Rajdhani',sans-serif;font-size:16px;font-weight:700">${escapeHtml(d.operator||d.network||'Unknown')}</div>
      <div style="color:var(--td);margin-top:4px">Country: ${escapeHtml(d.country||'?')} · Type: ${escapeHtml(d.type||'?')}</div>
    </div>`;
    el.style.display='block';
  }catch(e){}
}

// Expose to global scope (some Jinja templates load scripts in a way that scopes them)
window.mobileGeo = mobileGeo;
window.mobileScan = mobileScan;
window.mobileOp = mobileOp;
window.showTowerDetail = showTowerDetail;
window.closeTowerDetail = closeTowerDetail;

// Bind event handlers after DOM is ready — this works regardless of script load order
function _bindMobileHandlers(){
  const scanBtn = document.getElementById('m-scan-btn');
  const geoBtn  = document.getElementById('m-geo-btn');
  const opBtn   = document.getElementById('m-op-btn');
  if(scanBtn) scanBtn.addEventListener('click', mobileScan);
  if(geoBtn)  geoBtn.addEventListener('click',  mobileGeo);
  if(opBtn)   opBtn.addEventListener('click',   mobileOp);
  console.log('[mobile] handlers bound — scan:', !!scanBtn, 'geo:', !!geoBtn, 'op:', !!opBtn);
}
if(document.readyState === 'loading'){
  document.addEventListener('DOMContentLoaded', _bindMobileHandlers);
} else {
  _bindMobileHandlers();
}
</script>
{% endblock %}