{% extends "base.html" %}

{% block content %}
<main class="main">
  <div class="toolbar" style="margin-bottom: 16px; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;">
    <span class="section-title">SoundVision Clusters</span>
    <div style="display:flex; align-items:center; gap:8px; flex-wrap:wrap;">
      <!-- Live Amp Telemetry Toolbar Toggle Button -->
      <button id="btnToggleAmpOnline" onclick="toggleAmpOnlineDataToolbar()" style="padding:5px 12px; font-size:11px; border:1px solid rgba(255,255,255,0.12); border-radius:6px; font-weight:700; cursor:pointer; transition:all .2s; background:rgba(255,255,255,0.06); color:var(--txt-dim); display:inline-flex; align-items:center; gap:6px;">
        <span id="ampToolbarDot" style="width:7px; height:7px; border-radius:50%; background:#64748b; display:inline-block; transition:all .2s;"></span>
        <span id="ampToolbarText">Amp Online Data: OFF</span>
      </button>

      <span style="font-size:11px; color:var(--txt-dim); font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-left:4px;">Details:</span>
      <div class="table-view-switcher" style="display:flex; gap:3px; background:rgba(0,0,0,0.45); padding:3px; border-radius:6px; border:1px solid rgba(255,255,255,0.08);">
        <button id="btnGlobalAngles" onclick="setGlobalClusterView('angles')" style="padding:5px 12px; font-size:11px; border:none; border-radius:4px; font-weight:700; cursor:pointer; transition:all .15s; background:rgba(34,211,238,0.22); color:var(--cyan); display:inline-flex; align-items:center; gap:5px;">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h20M12 2v20M20 12a8 8 0 0 0-16 0"></path></svg>
          <span>Cabinet Angles</span>
        </button>
        <button id="btnGlobalAmp" onclick="setGlobalClusterView('amp')" style="padding:5px 12px; font-size:11px; border:none; border-radius:4px; font-weight:700; cursor:pointer; transition:all .15s; background:transparent; color:var(--txt-dim); display:inline-flex; align-items:center; gap:5px;">
          <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon></svg>
          <span>Amp Channels &amp; IP</span>
        </button>
      </div>
    </div>
  </div>
  <div id="advancedPanel">
    <div id="advancedEmpty" class="empty-state" style="margin-top:20px;">
      <div style="margin-bottom:14px; display:inline-flex; align-items:center; justify-content:center; width:68px; height:68px; border-radius:18px; background:rgba(34,211,238,0.08); border:1px solid rgba(34,211,238,0.22); box-shadow:0 0 24px rgba(34,211,238,0.15);">
        <img src="/IMAGES/motometi_icon_1_neg.png" alt="MOTOMETI" style="width:42px; height:42px; object-fit:contain;">
      </div>
      <h2>No SoundVision Report</h2>
      <p>A venue SoundVision report is required to group and assign METI modules.</p>
      <button class="btn amber" onclick="openGlobalSettings()" style="margin-top:10px; display:inline-flex; align-items:center; gap:6px;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
        <span>Open Settings to Upload</span>
      </button>
    </div>
    <div id="clustersGrid" style="margin-top:16px"></div>
  </div>

</main>
{% endblock %}

{% block scripts %}
<script src="/static/js/meti.js?v=20261020_v278_telem"></script>
<script src="/static/js/clusters.js?v=20261020_v278_telem"></script>
<script>
  fetchDevices();
  setInterval(fetchDevices, 250);
  fetchReport();
  setInterval(fetchReport, 2000);
  _pollTunnel();
  setInterval(_pollTunnel, 15000);

  // Sync initial Amp Toolbar toggle status & polling loop
  fetch('/api/amps/status').then(r => r.json()).then(d => {
    window.ampTelemetryEnabled = Boolean(d.enabled);
    if (typeof updateAmpToolbarButton === 'function') updateAmpToolbarButton(d.enabled);
    if (d.enabled && typeof startAmpMeterPolling === 'function') {
      startAmpMeterPolling();
    }
  }).catch(()=>{});
</script>
{% endblock %}