{{define "login"}}
<!DOCTYPE html>
<html data-theme="light">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anmelden — Nexus Scanner</title>
  <link rel="stylesheet" href="/static/style.css">
  <script src="https://unpkg.com/htmx.org@1.9.12" defer></script>
</head>
<body>
<div class="auth-wrap">
  <div class="auth-card">
    <div class="auth-logo">
      <div class="brand-mark">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M22 12h-4l-3 9L9 3l-3 9H2"/>
        </svg>
      </div>
      <div>
        <div class="brand-name">Nexus Scanner</div>
        <div class="brand-sub">Netzwerk-Inventar Agent</div>
      </div>
    </div>

    <h1 class="auth-title">Willkommen zurück.</h1>
    <p class="auth-sub">Passwort eingeben um fortzufahren.</p>

    {{if .Error}}
    <div class="error-msg">{{.Error}}</div>
    {{end}}

    <form method="POST" action="/login">
      <div class="form-group">
        <label class="input-label" for="password">Passwort</label>
        <div class="password-wrap">
          <input class="input" type="password" id="password" name="password"
            placeholder="••••••••" autocomplete="current-password" autofocus required>
          <button type="button" class="eye-btn" onclick="togglePw()" title="Anzeigen">
            <svg id="eye-icon" 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>
      <button type="submit" class="btn btn-primary w-full" style="justify-content:center;">
        Anmelden
      </button>
    </form>

    <p style="font-size:12px;color:var(--text-3);text-align:center;margin-top:20px;">
      Nexus Scanner · Cereda Systems GmbH
    </p>
  </div>
</div>
<script>
function togglePw() {
  const f = document.getElementById('password');
  const i = document.getElementById('eye-icon');
  if (f.type === 'password') {
    f.type = 'text';
    i.innerHTML = '<path d="M17.94 17.94A10.94 10.94 0 0 1 12 20c-6.5 0-10-7-10-7a18.4 18.4 0 0 1 4.06-4.94"/><path d="M9.9 4.24A10 10 0 0 1 12 4c6.5 0 10 7 10 7a18.4 18.4 0 0 1-3.16 4.19"/><path d="m2 2 20 20"/>';
  } else {
    f.type = 'password';
    i.innerHTML = '<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"/>';
  }
}
</script>
</body>
</html>
{{end}}
