<div class="auth-page">
  <div class="auth-card">
    <div class="auth-header">
      <a href="/" class="auth-logo">
        <svg width="40" height="40" viewBox="0 0 36 36" fill="none"><rect width="36" height="36" rx="8" fill="#1a56db"/><path d="M8 10h8v16H8zM20 10h8v8h-8zM20 22h8v4h-8z" fill="white" opacity="0.9"/></svg>
      </a>
      <h1>Welcome Back</h1>
      <p>Sign in to your Biz2Biz Chamber account</p>
    </div>

    <% if (error && error.length) { %><div class="alert alert-error"><i class="bi bi-exclamation-circle-fill"></i> <%= error[0] %></div><% } %>
    <% if (success && success.length) { %><div class="alert alert-success"><i class="bi bi-check-circle-fill"></i> <%= success[0] %></div><% } %>

    <form action="/login" method="POST" class="auth-form">
      <div class="form-group">
        <label>Email Address</label>
        <div class="input-icon"><i class="bi bi-envelope-fill"></i><input type="email" name="email" required placeholder="you@company.com" autofocus></div>
      </div>
      <div class="form-group">
        <label>Password <a href="/forgot-password" class="float-right">Forgot password?</a></label>
        <div class="input-icon"><i class="bi bi-lock-fill"></i><input type="password" name="password" required placeholder="••••••••" id="passwordField">
        <button type="button" class="input-toggle" onclick="togglePassword('passwordField',this)"><i class="bi bi-eye"></i></button></div>
      </div>
      <div class="form-check">
        <input type="checkbox" name="remember" id="remember">
        <label for="remember">Keep me signed in for 30 days</label>
      </div>
      <button type="submit" class="btn btn-primary btn-block btn-lg">Sign In <i class="bi bi-arrow-right"></i></button>
    </form>

    <div class="auth-divider"><span>New to Biz2Biz Chamber?</span></div>
    <a href="/register" class="btn btn-outline-primary btn-block">Create an Account — $299/year</a>
  </div>
</div>

<script>
function togglePassword(id, btn) {
  const f = document.getElementById(id);
  const icon = btn.querySelector('i');
  f.type = f.type === 'password' ? 'text' : 'password';
  icon.className = f.type === 'password' ? 'bi bi-eye' : 'bi bi-eye-slash';
}
</script>
