<!DOCTYPE html>
<html lang="nl">
<head>
  <%- include('partials/head', { pageTitle: 'Login' }) %>
  <style>
    html,body{height:100%;margin:0;padding:0}
    body{display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;font-family:'Inter',sans-serif}
    body::before{content:'';position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse 80% 60% at 50% -30%,rgba(0,212,255,.1) 0%,transparent 55%),radial-gradient(ellipse 55% 45% at 85% 85%,rgba(168,85,247,.08) 0%,transparent 50%),radial-gradient(ellipse 45% 35% at 15% 15%,rgba(0,255,136,.05) 0%,transparent 50%);pointer-events:none}
    .login-wrap{position:relative;z-index:1;width:100%;max-width:420px;padding:1.5rem}
    .login-card{background:var(--bg-card);border:1px solid rgba(0,212,255,.2);border-radius:16px;padding:2.25rem 2rem;animation:fadeInUp .5s ease-out;position:relative;overflow:hidden;box-shadow:0 0 40px rgba(0,212,255,.12),inset 0 1px 0 rgba(255,255,255,.05)}
    .login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--purple),var(--green),var(--accent));background-size:200% 100%;animation:gradientShift 4s ease infinite}
    .login-logo{text-align:center;margin-bottom:1.75rem}
    .login-logo img{height:56px;width:auto;margin-bottom:.35rem;animation:float 4s ease-in-out infinite;filter:drop-shadow(0 0 20px rgba(0,212,255,.25))}
    .login-logo .tagline{font-size:.7rem;color:var(--text-dim);letter-spacing:.6px;font-weight:500;text-transform:uppercase}
    .field{margin-bottom:1rem;opacity:0;animation:fadeInUp .45s ease-out forwards}
    .field:nth-child(1){animation-delay:.1s}.field:nth-child(2){animation-delay:.2s}
    .field label{display:block;font-size:.68rem;font-weight:600;color:var(--text-muted);margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.4px}
    .field input{width:100%;padding:.6rem .75rem;background:var(--bg);border:1px solid var(--border);border-radius:9px;color:var(--text);font-size:.85rem;font-family:inherit;transition:all .2s ease;box-sizing:border-box}
    .login-btn{width:100%;padding:.65rem;background:linear-gradient(135deg,var(--accent),#0099cc);color:#fff;border:none;border-radius:9px;font-size:.82rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s ease;opacity:0;animation:fadeInUp .45s ease-out .3s forwards;box-shadow:0 0 20px rgba(0,212,255,.3)}
    .login-footer{text-align:center;margin-top:1.15rem;opacity:0;animation:fadeInUp .45s ease-out .4s forwards}
    .login-footer a{color:var(--text-dim);text-decoration:none;font-size:.7rem;transition:color .15s}
    .login-footer a:hover{color:var(--accent)}
    .alert{font-size:.72rem;padding:.45rem .7rem;border-radius:7px;margin-bottom:1rem;font-weight:500}
    .alert-error{background:var(--red-bg);border:1px solid var(--red);color:var(--red)}
    .alert-success{background:var(--green-bg);border:1px solid var(--green);color:var(--green)}
  </style>
</head>
<body>
  <div class="login-wrap">
    <div class="login-card">
      <div class="login-logo">
        <img src="/img/logo.svg" alt="Mek-Tech">
        <p class="tagline">AI Consultancy & Data Engineering</p>
      </div>
      <% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
      <% if (reset) { %><div class="alert alert-success">Wachtwoord succesvol gewijzigd</div><% } %>
      <form action="/auth/login" method="POST" autocomplete="off">
        <div class="field">
          <label>Gebruikersnaam</label>
          <input type="text" name="username" placeholder="Voer uw gebruikersnaam in" required autofocus>
        </div>
        <div class="field">
          <label>Wachtwoord</label>
          <input type="password" name="password" placeholder="Voer uw wachtwoord in" required>
        </div>
        <button type="submit" class="login-btn">Inloggen</button>
      </form>
      <div class="login-footer">
        <a href="/wachtwoord-vergeten">Wachtwoord vergeten?</a>
        <span style="margin:0 .5rem;color:var(--border)">·</span>
        <span style="font-size:.62rem;color:var(--text-dim)">v2.1 Neon</span>
      </div>
    </div>
  </div>
</body>
</html>
