{% extends "base.html" %}
{% block title %}{{ site_name }} - Cockpit{% endblock %}
{% block body_class %}page-cockpit{% endblock %}
{% block content %}
<div id="user-info" style="text-align:right;padding:12px 16px 0;max-width:900px;margin:0 auto;">
  <span style="color:#888;font-size:13px;">{{ email }} ({{ role }})</span>
  <button onclick="window.location.href='/'" style="background:#333;color:#e0e0e0;border:none;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:13px;margin-left:8px;">Karte</button>
  <button onclick="localStorage.removeItem('adsb_jwt');window.location.href='/'" style="background:#333;color:#e0e0e0;border:none;padding:6px 14px;border-radius:4px;cursor:pointer;font-size:13px;margin-left:4px;">Abmelden</button>
</div>
<div class="dashboard-content">
  <div class="tabs">
    <button class="active" onclick="switchTab('system')">System</button>
    <button id="tabBtn-users" onclick="switchTab('users')" {% if role != 'admin' %}style="display:none"{% endif %}>Benutzer</button>
    <button id="tabBtn-receivers" onclick="switchTab('receivers')" {% if role != 'admin' %}style="display:none"{% endif %}>Receiver</button>
    <button id="tabBtn-aircraft" onclick="switchTab('aircraft')" {% if role != 'admin' %}style="display:none"{% endif %}>Flugzeuge</button>
    <button onclick="switchTab('alerting')">Alerting</button>
  </div>

  <!-- Tab: System -->
  <div id="tab-system" class="tab-content active">
    <div class="panel">
      <h3>System-Übersicht</h3>
      <table class="stats-table" id="system-stats">
        <tr><td>Version</td><td id="stat-version">lade...</td></tr>
        <tr><td>Schema-Version</td><td id="stat-schema">lade...</td></tr>
        <tr><td>Empfänger gesamt</td><td id="stat-receivers-total">lade...</td></tr>
        <tr><td>Empfänger online</td><td id="stat-receivers-online">lade...</td></tr>
        <tr><td>Benutzer</td><td id="stat-users-total">lade...</td></tr>
        <tr><td>Flugzeuge in Registry</td><td id="stat-registry-total">lade...</td></tr>
        <tr><td>Unbekannte Hex-Codes</td><td id="stat-unknown-total">lade...</td></tr>
        <tr><td>Verschiedene Länder</td><td id="stat-countries-total">lade...</td></tr>
        <tr><td>Track-Punkte gespeichert</td><td id="stat-trackpoints-total">lade...</td></tr>
        <tr><td>Letzte Daten</td><td id="stat-last-data">lade...</td></tr>
      </table>
    </div>
  </div>

  <!-- Tab: Benutzer (nur Admin) -->
  <div id="tab-users" class="tab-content">
    <div class="admin-only panel" id="pending-panel" style="display:none">
      <h3>Ausstehende Freischaltungen</h3>
      <table><thead><tr><th>Email</th><th>Erstellt</th><th>Rolle</th></tr></thead>
      <tbody id="pending-list"><tr><td colspan="3">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel">
      <h3>Alle Benutzer <button class="btn btn-success" onclick="showAddUser()" style="float:right">+ Hinzufügen</button></h3>
      <table><thead><tr><th>Aktionen</th><th>Username</th><th>Email</th><th>Display Name</th><th>Rolle</th><th>Status</th><th>Letzter Login</th></tr></thead>
      <tbody id="user-list"><tr><td colspan="7">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel" id="add-user-panel" style="display:none">
      <h3>Benutzer hinzufügen</h3>
      <input id="new-username" placeholder="Username (Email)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <select id="new-role" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px;margin-right:8px">
        <option value="user">user</option>
        <option value="admin">admin</option>
        <option value="pending">pending</option>
      </select>
      <button class="btn btn-success" onclick="addUser()">Speichern</button>
      <button class="btn" onclick="hideAddUser()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Receiver (nur Admin) -->
  <div id="tab-receivers" class="tab-content">
    <div class="panel">
      <h3>Receiver <button class="btn" onclick="addReceiver()" style="float:right;margin-left:8px">+ Neu</button></h3>
      <table><thead><tr><th>Aktionen</th><th>ID</th><th>Name</th><th>Status</th><th>Standort</th><th>Letztes Update</th></tr></thead>
      <tbody id="receiver-list"><tr><td colspan="6">Laden...</td></tr></tbody></table>
    </div>
    <div class="panel" id="edit-receiver-panel" style="display:none">
      <h3 id="edit-receiver-title">Receiver bearbeiten</h3>
      <input id="edit-rec-name" placeholder="Name" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-lat" placeholder="Lat" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-lon" placeholder="Lon" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <input id="edit-rec-desc" placeholder="Beschreibung" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px">
      <label style="color:#aaa;font-size:13px;margin-right:8px"><input id="edit-rec-enabled" type="checkbox" checked> Aktiv</label>
      <button class="btn btn-success" onclick="saveReceiver()">Speichern</button>
      <button class="btn" onclick="hideEditReceiver()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Flugzeuge (nur Admin) -->
  <div id="tab-aircraft" class="tab-content">
    <div class="panel">
      <h3>Flugzeug-Registry
        <button class="btn btn-success" onclick="showAddAircraft()" style="float:right">+ Hinzufügen</button>
        <button class="btn" onclick="loadUnknownAircraft()" style="float:right;margin-right:8px">Unbekannte</button>
      </h3>
      <table><thead><tr><th>Aktionen</th><th>Hex</th><th>Callsign</th><th>Registration</th><th>Land</th><th>Typ</th><th>Betreiber</th><th>Zuletzt aktualisiert</th></tr></thead>
      <tbody id="aircraft-list"><tr><td colspan="8">Laden...</td></tr></tbody></table>
      <div id="aircraft-pagination"></div>
    </div>
    <div class="panel" id="unknown-aircraft-panel" style="display:none">
      <h3>Unbekannte Hex-Codes</h3>
      <p style="color:#888;font-size:13px;">Flugzeuge die kürzlich gesehen wurden, aber noch nicht in der Registry sind.</p>
      <table><thead><tr><th>Aktionen</th><th>Hex</th><th>Callsign</th><th>Registration</th><th>Zuletzt gesehen</th><th>ADS-B Exchange</th></tr></thead>
      <tbody id="unknown-list"></tbody></table>
      <button class="btn" onclick="hideUnknownAircraft()" style="margin-top:8px">Zurück</button>
    </div>
    <div class="panel" id="add-aircraft-panel" style="display:none">
      <h3>Flugzeug hinzufügen</h3>
      <input id="new-ac-hex" placeholder="Hex (z.B. abc123)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="new-ac-callsign" placeholder="Callsign" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ac-registration" placeholder="Registration" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ac-country" placeholder="Land" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="new-ac-type" placeholder="Typ (z.B. B738)" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="new-ac-operator" placeholder="Betreiber" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:150px">
      <button class="btn btn-success" onclick="addAircraft()">Speichern</button>
      <button class="btn" onclick="hideAddAircraft()">Abbrechen</button>
    </div>
    <div class="panel" id="edit-aircraft-panel" style="display:none">
      <h3 id="edit-aircraft-title">Flugzeug bearbeiten</h3>
      <input id="edit-ac-hex" placeholder="Hex" readonly style="background:#1a1f2e;color:#888;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="edit-ac-callsign" placeholder="Callsign" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="edit-ac-registration" placeholder="Registration" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="edit-ac-country" placeholder="Land" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:120px">
      <input id="edit-ac-type" placeholder="Typ" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:100px">
      <input id="edit-ac-operator" placeholder="Betreiber" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:150px">
      <button class="btn btn-success" onclick="saveAircraft()">Speichern</button>
      <button class="btn" onclick="hideEditAircraft()">Abbrechen</button>
    </div>
  </div>

  <!-- Tab: Alerting -->
  <div id="tab-alerting" class="tab-content">
    <div class="panel">
      <h3>Telegram-Alerting</h3>
      <p style="color:#aaa;font-size:14px;line-height:1.6;">
        Erhalte Benachrichtigungen über interessante Flugzeuge direkt auf dein Telefon.<br><br>
        <b>So richtest du Alerting ein:</b><br>
        1. Öffne Telegram und suche nach <b>@ADSB_Nearby_Bot</b><br>
        2. Sende <code>/start</code> an den Bot<br>
        3. Der Bot antwortet mit deiner Chat-ID und bestätigt die Verbindung<br>
        4. Deine Chat-ID wird automatisch hinterlegt<br><br>
        <b>Verfügbare Alert-Typen (in Kürze):</b><br>
        &bull; Flugzeuge einer bestimmten Airline (z.B. "Lufthansa")<br>
        &bull; Flugzeuge in einem bestimmten Radius (z.B. &lt; 50 km)<br>
        &bull; Bestimmte Hex-Codes / Registrationen<br>
        &bull; Anflüge auf einen bestimmten Flughafen<br>
      </p>
    </div>
    <div class="panel" style="opacity:0.5;pointer-events:none;">
      <h3>Meine Alerting-Regeln <span style="color:#888;font-size:12px;font-weight:normal;">(Coming soon)</span></h3>
      <table><thead><tr><th>Typ</th><th>Filter</th><th>Status</th><th>Aktionen</th></tr></thead>
      <tbody><tr><td colspan="4" style="text-align:center;color:#666;">Noch keine Regeln konfiguriert.</td></tr></tbody></table>
      <div style="margin-top:12px;border-top:1px solid #2a2f3f;padding-top:12px;">
        <h4 style="color:#888;font-size:13px;">Neue Regel (Demo / kommendes Feature)</h4>
        <select style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px;margin-right:8px;">
          <option>Airline</option><option>Radius</option><option>Hex-Code</option><option>Flughafen</option>
        </select>
        <input placeholder="z.B. Lufthansa" style="background:#0b1220;color:#e0e0e0;border:1px solid #2a2f3f;border-radius:4px;padding:6px 10px;margin-right:8px;width:200px;">
        <button class="btn" disabled>Hinzufügen</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
{% block scripts_extra %}
<script>
TOKEN={{ token_js_escaped|tojson }};
</script>
<script src="/static/js/admin.js"></script>
{% endblock %}