{{define "content"}}
<div class="page-header">
  <div>
    <h2 class="page-title">Übersicht</h2>
    <p class="page-sub">Status deines lokalen Scanners und der gefundenen Assets.</p>
  </div>
  <div style="display:flex;align-items:center;gap:10px;">
    <div class="scan-pill">
      {{if .Scanning}}<span class="dot green" style="animation:dotpulse 1.6s ease-out infinite;"></span>
      <span class="label">Scanner läuft</span>
      {{else}}<span class="dot yellow"></span>
      <span class="label">Bereit</span>{{end}}
      <span class="sep">·</span>
      <span class="site">Standort {{.SiteID}}</span>
    </div>
    <form method="POST" action="/scan/start" style="margin:0;">
      <button type="submit" class="btn btn-primary" {{if .Scanning}}disabled{{end}}>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:13px;height:13px;">
          {{if .Scanning}}<rect x="6" y="4" width="4" height="16"/><rect x="14" y="4" width="4" height="16"/>
          {{else}}<polygon points="6 4 20 12 6 20 6 4" fill="currentColor" stroke="none"/>{{end}}
        </svg>
        {{if .Scanning}}Scan läuft…{{else}}Jetzt scannen{{end}}
      </button>
    </form>
  </div>
</div>

<!-- Stats -->
<div class="stats-grid stats-grid-4">
  <div class="stat">
    <div class="stat-label">
      <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/></svg>
      Gefundene Geräte
    </div>
    <div class="stat-value">{{.HostCount}}</div>
    <div class="stat-delta up">+{{.RecentCount}} seit letztem Scan</div>
    <div class="sparkline">
      <span style="height:35%"></span><span style="height:42%"></span><span style="height:50%"></span><span style="height:58%"></span><span style="height:62%"></span><span style="height:70%"></span><span style="height:78%"></span><span style="height:82%"></span><span style="height:88%"></span><span style="height:92%"></span><span style="height:95%"></span><span style="height:100%"></span>
    </div>
  </div>
  <div class="stat">
    <div class="stat-label">
      <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg>
      Neu seit letztem Scan
    </div>
    <div class="stat-value">{{.RecentCount}}</div>
    <div class="stat-delta">In den letzten 60 Min</div>
    <div class="sparkline">
      <span style="height:20%"></span><span style="height:30%"></span><span style="height:25%"></span><span style="height:45%"></span><span style="height:55%"></span><span style="height:60%"></span><span style="height:70%"></span><span style="height:65%"></span><span style="height:80%"></span><span style="height:75%"></span><span style="height:85%"></span><span style="height:90%"></span>
    </div>
  </div>
  <div class="stat">
    <div class="stat-label">
      <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0zM12 9v4M12 17h.01"/></svg>
      Offline-Geräte
    </div>
    <div class="stat-value" style="{{if gt .OfflineCount 5}}color:var(--danger);{{end}}">{{.OfflineCount}}</div>
    <div class="stat-delta {{if gt .OfflineCount 5}}down{{end}}">{{if gt .OfflineCount 5}}Erhöht ggü. Vorwoche{{else}}Im Normalbereich{{end}}</div>
    <div class="sparkline">
      <span style="height:60%"></span><span style="height:70%"></span><span style="height:55%"></span><span style="height:65%"></span><span style="height:80%"></span><span style="height:60%"></span><span style="height:75%"></span><span style="height:65%"></span><span style="height:70%"></span><span style="height:85%"></span><span style="height:90%"></span><span style="height:70%"></span>
    </div>
  </div>
  <div class="stat">
    <div class="stat-label">
      <svg class="stat-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
      Letzter Scan
    </div>
    <div class="stat-value" style="font-size:26px;margin-top:4px;">{{.LastScan}}</div>
    <div class="stat-delta">Intervall: {{.ARPInterval}}</div>
  </div>
</div>

<!-- 2-col content -->
<div class="dash-grid">
  <!-- Zuletzt gefundene Geräte -->
  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">Zuletzt gefundene Geräte</div>
        <div class="card-sub">Die 5 jüngsten Einträge im Inventar</div>
      </div>
      <a href="/assets" class="card-action">
        Alle anzeigen
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
      </a>
    </div>
    <table>
      <thead>
        <tr>
          <th style="padding-left:20px;">Gerät</th>
          <th>IP-Adresse</th>
          <th>Standort</th>
          <th>Status</th>
          <th style="padding-right:20px;text-align:right;">Gesehen</th>
        </tr>
      </thead>
      <tbody>
        {{range .RecentHosts}}
        <tr>
          <td style="padding-left:20px;">
            <div class="device-row">
              <div class="device-icon">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/><path d="M6 7h.01M6 17h.01"/></svg>
              </div>
              <div>
                <div class="device-name">{{if .Hostname}}{{.Hostname}}{{else}}{{.IP}}{{end}}</div>
                <div class="device-vendor">{{if .Vendor}}{{.Vendor}}{{else}}Unbekannt{{end}}</div>
              </div>
            </div>
          </td>
          <td class="mono">{{.IP}}</td>
          <td><span class="badge badge-gray">{{.Site}}</span></td>
          <td>
            {{if eq .Status "online"}}
            <span class="badge badge-green"><span class="dot green" style="width:5px;height:5px;margin-right:4px;"></span>Online</span>
            {{else}}
            <span class="badge badge-red"><span class="dot red" style="width:5px;height:5px;margin-right:4px;"></span>Offline</span>
            {{end}}
          </td>
          <td style="padding-right:20px;text-align:right;color:var(--text-3);font-size:12px;">{{.LastSeenFmt}}</td>
        </tr>
        {{else}}
        <tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-3);">
          Noch keine Geräte — Scan starten.
        </td></tr>
        {{end}}
      </tbody>
    </table>
  </div>

  <!-- Aktive Module -->
  <div class="card">
    <div class="card-header">
      <div>
        <div class="card-title">Aktive Module</div>
        <div class="card-sub">Status der Scan-Quellen</div>
      </div>
      <a href="/modules" class="card-action">
        Verwalten
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>
      </a>
    </div>
    {{range $i, $m := .Modules}}
    <div class="dash-module-row" style="{{if eq $i 0}}border-top:none;{{end}}">
      <div class="dash-module-icon{{if not $m.Enabled}} off{{end}}">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" style="width:15px;height:15px;">
          {{if eq $m.Name "arp_discovery"}}<path d="M5 12.55a11 11 0 0 1 14 0M1.42 9a16 16 0 0 1 21.16 0M8.53 16.11a6 6 0 0 1 6.95 0M12 20h.01"/>
          {{else if eq $m.Name "dns_reverse"}}<path d="M18 10h-1.26A8 8 0 1 0 9 20h9a5 5 0 0 0 0-10z"/>
          {{else if eq $m.Name "ad_sync"}}<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75"/>
          {{else if eq $m.Name "site_monitoring"}}<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/>
          {{else if eq $m.Name "port_scan"}}<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
          {{else if eq $m.Name "snmp"}}<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>
          {{else}}<rect x="2" y="3" width="20" height="8" rx="2"/><rect x="2" y="13" width="20" height="8" rx="2"/>{{end}}
        </svg>
      </div>
      <div style="flex:1;min-width:0;">
        <div class="dash-module-name">{{$m.DisplayName}}</div>
        <div class="dash-module-sub">{{if $m.LastRun}}Letzter Lauf {{$m.LastRun}}{{else}}Noch nicht gelaufen{{end}}</div>
      </div>
      {{if $m.Enabled}}<span class="badge badge-green" style="font-size:11px;flex-shrink:0;">OK</span>
      {{else}}<span class="badge badge-gray" style="font-size:11px;flex-shrink:0;">Aus</span>{{end}}
    </div>
    {{end}}
  </div>
</div>
{{end}}