{{define "content"}}
<div class="page-header">
  <div>
    <h1 class="page-title">Standort-Monitoring</h1>
    <p class="page-sub">Erreichbarkeit von Internet, Diensten und Netzwerkgeräten.</p>
  </div>
  <div style="display:flex;gap:8px;align-items:center;">
    {{if .AllOnline}}
    <div class="status-pill online"><span class="dot green"></span> Alle Systeme Online</div>
    {{else if eq .TotalChecks 0}}
    <div class="status-pill"><span class="dot" style="background:var(--text-3);"></span> Noch keine Checks</div>
    {{else}}
    <div class="status-pill" style="background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);color:#ff3b30;">
      <span class="dot" style="background:#ff3b30;"></span> Probleme erkannt
    </div>
    {{end}}
    <form method="POST" action="/monitoring/scan" style="margin:0;">
      <button type="submit" class="btn btn-primary" style="height:32px;font-size:13px;">Jetzt prüfen</button>
    </form>
  </div>
</div>

<!-- Stats -->
<div class="stats-grid" style="grid-template-columns:repeat(3,1fr);margin-bottom:20px;">
  <div class="stat">
    <div class="stat-label">Checks gesamt</div>
    <div class="stat-value">{{.TotalChecks}}</div>
    <div class="stat-delta neutral">konfiguriert</div>
  </div>
  <div class="stat">
    <div class="stat-label">Online</div>
    <div class="stat-value" style="{{if gt .OnlineCount 0}}color:var(--success);{{end}}">{{.OnlineCount}}</div>
    <div class="stat-delta up">erreichbar</div>
  </div>
  <div class="stat">
    <div class="stat-label">Offline</div>
    <div class="stat-value" style="{{if gt .OfflineCount 0}}color:#ff3b30;{{end}}">{{.OfflineCount}}</div>
    <div class="stat-delta {{if gt .OfflineCount 0}}down{{else}}neutral{{end}}">nicht erreichbar</div>
  </div>
</div>

<!-- Checks Table -->
<div class="card" style="margin-bottom:20px;">
  {{if .Checks}}
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Typ</th>
        <th>Ziel</th>
        <th>Status</th>
        <th>Latenz</th>
        <th style="width:180px;">Verlauf (letzte 20)</th>
        <th>Geprüft</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      {{range .Checks}}
      <tr>
        <td style="font-weight:600;">{{.Check.Name}}</td>
        <td>
          <span style="background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:1px 7px;font-size:11px;font-family:monospace;text-transform:uppercase;color:var(--text-2);">{{.Check.Type}}</span>
        </td>
        <td style="color:var(--text-2);font-size:12px;font-family:monospace;">{{.Check.Target}}</td>
        <td>
          {{if not .HasResult}}
          <span class="badge" style="color:var(--text-3);">Ausstehend</span>
          {{else if eq .Latest.Status "online"}}
          <span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;display:inline-block;"></span>Online</span>
          {{else}}
          <span class="badge" style="background:rgba(255,59,48,.1);border-color:rgba(255,59,48,.3);color:#ff3b30;"><span class="dot" style="background:#ff3b30;width:5px;height:5px;margin-right:4px;display:inline-block;border-radius:50%;"></span>Offline</span>
          {{end}}
        </td>
        <td style="color:var(--text-2);font-size:12px;">
          {{if and .HasResult (gt .Latest.LatencyMS 0)}}{{.Latest.LatencyMS}} ms{{else}}—{{end}}
        </td>
        <td>
          <div style="display:flex;gap:2px;align-items:center;">
            {{range .History}}
            <div style="width:8px;height:20px;border-radius:2px;flex-shrink:0;
              background:{{if eq .Status "online"}}var(--success){{else}}#ff3b30{{end}};
              opacity:0.8;"
              title="{{formatTime .CheckedAt}} · {{.Status}}{{if gt .LatencyMS 0}} · {{.LatencyMS}}ms{{end}}{{if .Error}} · {{.Error}}{{end}}">
            </div>
            {{end}}
            {{if eq (len .History) 0}}
            <span style="color:var(--text-3);font-size:11px;">noch keine Daten</span>
            {{end}}
          </div>
        </td>
        <td style="color:var(--text-3);font-size:12px;">
          {{if .HasResult}}{{formatTime .Latest.CheckedAt}}{{else}}—{{end}}
        </td>
        <td>
          <form method="POST" action="/monitoring/checks/{{.Check.ID}}/delete" style="margin:0;">
            <button type="submit" class="icon-btn" title="Löschen"
              onclick="return confirm('Check \'{{.Check.Name}}\' löschen?')"
              style="color:var(--text-3);">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                <polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14H6L5 6"/><path d="M10 11v6M14 11v6"/><path d="M9 6V4h6v2"/>
              </svg>
            </button>
          </form>
        </td>
      </tr>
      {{end}}
    </tbody>
  </table>
  {{else}}
  <div style="text-align:center;padding:48px;color:var(--text-3);">
    <div style="font-size:32px;margin-bottom:8px;">📡</div>
    <div style="font-weight:600;margin-bottom:4px;">Noch keine Checks konfiguriert</div>
    <div style="font-size:13px;">Füge unten deinen ersten Check hinzu.</div>
  </div>
  {{end}}
</div>

<!-- Add Check Form -->
<div class="card" style="margin-top:4px;">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--border);">
    <div>
      <div style="font-weight:600;font-size:14px;color:var(--text-1);">Check hinzufügen</div>
      <div style="font-size:12px;color:var(--text-3);margin-top:2px;">Jeder Standort prüft unabhängig — Ping, HTTP oder TCP Port.</div>
    </div>
  </div>
  {{if .AddErr}}<div class="error-msg" style="margin-bottom:14px;">{{.AddErr}}</div>{{end}}
  <form method="POST" action="/monitoring/checks/add">
    <div style="display:grid;grid-template-columns:1fr 110px 1fr;gap:12px;margin-bottom:14px;">
      <div>
        <label class="input-label">Name</label>
        <input class="input" type="text" name="name" placeholder="z.B. Internet (Google)" required>
      </div>
      <div>
        <label class="input-label">Typ</label>
        <select class="select" name="type" style="width:100%;">
          <option value="ping">Ping</option>
          <option value="http">HTTP/S</option>
          <option value="tcp">TCP Port</option>
        </select>
      </div>
      <div>
        <label class="input-label">Ziel</label>
        <input class="input" type="text" name="target"
          placeholder="8.8.8.8  ·  https://…  ·  host:443" required>
      </div>
    </div>
    <div style="display:flex;align-items:center;justify-content:space-between;">
      <span style="font-size:12px;color:var(--text-3);">
        <span style="color:var(--text-2);font-weight:600;">Ping:</span> IP-Adresse &nbsp;&nbsp;
        <span style="color:var(--text-2);font-weight:600;">HTTP/S:</span> https://hostname &nbsp;&nbsp;
        <span style="color:var(--text-2);font-weight:600;">TCP:</span> hostname:port
      </span>
      <button type="submit" class="btn btn-primary">+ Hinzufügen</button>
    </div>
  </form>
</div>
{{end}}