{{define "content"}}
<div class="page-header">
  <div>
    <h1 class="page-title">Einstellungen</h1>
    <p class="page-sub">Standort, IT Nexus API und Scanner-Optionen.</p>
  </div>
</div>

{{if .Saved}}<div class="success-msg" style="margin-bottom:16px;">Einstellungen gespeichert.</div>{{end}}
{{if .SaveErr}}<div class="error-msg" style="margin-bottom:16px;">{{.SaveErr}}</div>{{end}}

<form method="POST" action="/settings">

  <!-- Standort -->
  <div class="settings-section">
    <div class="settings-title">Standort</div>
    <div class="card">
      <div class="setting-row">
        <div>
          <div class="setting-label">Standort-ID</div>
          <div class="setting-sub">Wird in allen gemeldeten Assets verwendet.</div>
        </div>
        <div class="setting-control">
          <select class="select" name="site" style="width:200px;">
            <option value="LUD"{{if eq .Site "LUD"}} selected{{end}}>Lüdenscheid (LUD)</option>
            <option value="BAR"{{if eq .Site "BAR"}} selected{{end}}>Barleben (BAR)</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- IT Nexus API -->
  <div class="settings-section">
    <div class="settings-title">IT Nexus Integration</div>
    <div class="card">
      <div class="setting-body full">
        <div class="form-group">
          <label class="input-label">API URL</label>
          <input class="input" type="url" name="nexus_url" value="{{.NexusURL}}"
            placeholder="https://it-nexus.cereda-systems.de">
        </div>
        <div class="form-group">
          <label class="input-label">API Key</label>
          <div class="password-wrap">
            <input class="input" type="password" id="api-key" name="nexus_api_key" value="{{.NexusAPIKey}}"
              placeholder="itx-…">
            <button type="button" class="eye-btn" onclick="toggleApiKey()" title="Anzeigen">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Scanner -->
  <div class="settings-section">
    <div class="settings-title">Scanner-Optionen</div>
    <div class="card">
      <div class="setting-row">
        <div>
          <div class="setting-label">Scan-Intervall</div>
          <div class="setting-sub">Wie oft der ARP-Scan automatisch ausgeführt wird.</div>
        </div>
        <div class="setting-control">
          <select class="select" name="arp_interval" style="width:160px;">
            <option value="1m"{{if eq .ARPInterval "1m"}} selected{{end}}>1 Minute</option>
            <option value="5m"{{if eq .ARPInterval "5m"}} selected{{end}}>5 Minuten</option>
            <option value="15m"{{if eq .ARPInterval "15m"}} selected{{end}}>15 Minuten</option>
            <option value="1h"{{if eq .ARPInterval "1h"}} selected{{end}}>1 Stunde</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Scanner-Verhalten -->
  <div class="settings-section">
    <div class="settings-title">Scanner-Verhalten</div>
    <div class="card">
      <div class="setting-row">
        <div>
          <div class="setting-label">Offline-Schwellwert</div>
          <div class="setting-sub">Host gilt als Offline wenn er seit dieser Zeit nicht mehr gesehen wurde.</div>
        </div>
        <div class="setting-control">
          <select class="select" name="offline_after" style="width:140px;">
            <option value="5m"{{if eq .OfflineAfter "5m0s"}} selected{{end}}>5 Minuten</option>
            <option value="10m"{{if eq .OfflineAfter "10m0s"}} selected{{end}}>10 Minuten</option>
            <option value="15m"{{if eq .OfflineAfter "15m0s"}} selected{{end}}>15 Minuten</option>
            <option value="30m"{{if eq .OfflineAfter "30m0s"}} selected{{end}}>30 Minuten</option>
            <option value="1h"{{if eq .OfflineAfter "1h0m0s"}} selected{{end}}>1 Stunde</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Active Directory -->
  <div class="settings-section">
    <div class="settings-title">Active Directory</div>
    <div class="card">
      <div class="setting-row">
        <div>
          <div class="setting-label">AD Sync aktivieren</div>
          <div class="setting-sub">Computer-Objekte aus winkel.local importieren.</div>
        </div>
        <div class="setting-control">
          <label class="toggle">
            <input type="checkbox" name="ad_enabled"{{if .ADEnabled}} checked{{end}}>
            <span class="toggle-track"></span>
          </label>
        </div>
      </div>
      <div class="setting-body">
        <div class="form-group">
          <label class="input-label">Domain Controller (IP oder Hostname)</label>
          <input class="input" type="text" name="ad_server" value="{{.ADServer}}" placeholder="192.168.0.12">
        </div>
        <div class="form-group">
          <label class="input-label">Port</label>
          <input class="input" type="number" name="ad_port" value="{{.ADPort}}" placeholder="389">
        </div>
        <div class="form-group">
          <label class="input-label">Bind-DN (Service Account)</label>
          <input class="input" type="text" name="ad_bind_dn" value="{{.ADBindDN}}" placeholder="svc-scanner@winkel.local">
        </div>
        <div class="form-group">
          <label class="input-label">Passwort</label>
          <div class="password-wrap">
            <input class="input" type="password" id="ad-pw" name="ad_bind_password" value="{{.ADBindPW}}" placeholder="Service-Account Passwort">
            <button type="button" class="eye-btn" onclick="toggleAdPw()">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/>
              </svg>
            </button>
          </div>
        </div>
        <div class="form-group">
          <label class="input-label">Search Base</label>
          <input class="input" type="text" name="ad_search_base" value="{{.ADSearchBase}}" placeholder="DC=winkel,DC=local">
        </div>
        <div class="form-group">
          <label class="input-label">Sync-Intervall</label>
          <select class="select" name="ad_interval">
            <option value="15m"{{if eq .ADInterval "15m0s"}} selected{{end}}>15 Minuten</option>
            <option value="30m"{{if eq .ADInterval "30m0s"}} selected{{end}}>30 Minuten</option>
            <option value="1h"{{if eq .ADInterval "1h0m0s"}} selected{{end}}>1 Stunde</option>
            <option value="6h"{{if eq .ADInterval "6h0m0s"}} selected{{end}}>6 Stunden</option>
          </select>
        </div>
      </div>
    </div>
  </div>

  <!-- Alerts -->
  <div class="settings-section">
    <div class="settings-title">Benachrichtigungen</div>
    <div class="card">
      <div class="setting-row">
        <div>
          <div class="setting-label">IT Nexus Alert</div>
          <div class="setting-sub">Bei Ausfall an IT Nexus API melden (POST /api/scanner/alert).</div>
        </div>
        <div class="setting-control">
          <label class="toggle">
            <input type="checkbox" name="alert_nexus"{{if .AlertNexus}} checked{{end}}>
            <span class="toggle-track"></span>
          </label>
        </div>
      </div>
      <div class="setting-row">
        <div>
          <div class="setting-label">E-Mail (SMTP)</div>
          <div class="setting-sub">E-Mail bei Status-Wechsel senden.</div>
        </div>
        <div class="setting-control">
          <label class="toggle">
            <input type="checkbox" name="smtp_enabled"{{if .SMTPEnabled}} checked{{end}}>
            <span class="toggle-track"></span>
          </label>
        </div>
      </div>
      <div class="setting-body" style="grid-template-columns:1fr 1fr;">
        <div class="form-group">
          <label class="input-label">SMTP-Host</label>
          <input class="input" type="text" name="smtp_host" value="{{.SMTPHost}}" placeholder="smtp.office365.com">
        </div>
        <div class="form-group">
          <label class="input-label">Port</label>
          <input class="input" type="number" name="smtp_port" value="{{.SMTPPort}}" placeholder="587">
        </div>
        <div class="form-group">
          <label class="input-label">Benutzername</label>
          <input class="input" type="text" name="smtp_user" value="{{.SMTPUser}}" placeholder="scanner@cereda-systems.de">
        </div>
        <div class="form-group">
          <label class="input-label">Passwort</label>
          <div class="password-wrap">
            <input class="input" type="password" name="smtp_pass" value="{{.SMTPPass}}" placeholder="SMTP-Passwort">
            <button type="button" class="eye-btn" onclick="this.previousElementSibling.type=this.previousElementSibling.type==='password'?'text':'password'">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>
            </button>
          </div>
        </div>
        <div class="form-group">
          <label class="input-label">Absender (From)</label>
          <input class="input" type="email" name="smtp_from" value="{{.SMTPFrom}}" placeholder="nexus-scanner@cereda-systems.de">
        </div>
        <div class="form-group">
          <label class="input-label">Empfänger (To)</label>
          <input class="input" type="email" name="smtp_to" value="{{.SMTPTo}}" placeholder="it@cereda-systems.de">
        </div>
      </div>
    </div>
  </div>

  <!-- Passwort -->
  <div class="settings-section">
    <div class="settings-title">Passwort ändern</div>
    <div class="card">
      <div class="setting-body">
        <div class="form-group">
          <label class="input-label">Neues Passwort</label>
          <input class="input" type="password" name="new_password" placeholder="Mindestens 6 Zeichen" autocomplete="new-password">
        </div>
        <div class="form-group">
          <label class="input-label">Bestätigung</label>
          <input class="input" type="password" name="confirm_password" placeholder="Passwort wiederholen" autocomplete="new-password">
        </div>
      </div>
    </div>
  </div>

  <div style="display:flex;justify-content:flex-end;gap:10px;">
    <button type="reset" class="btn">Zurücksetzen</button>
    <button type="submit" class="btn btn-primary">Einstellungen speichern</button>
  </div>
</form>

<script>
function togglePw(id) {
  const f = document.getElementById(id);
  f.type = f.type === 'password' ? 'text' : 'password';
}
function toggleApiKey() { togglePw('api-key'); }
function toggleAdPw()   { togglePw('ad-pw'); }
</script>
{{end}}