<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - SSO VietProDev</title>
  <style>
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f5f5f5; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
    .login-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); width: 100%; max-width: 400px; }
    .login-card h2 { margin-bottom: 8px; color: #1a1a2e; font-size: 24px; }
    .login-card p { margin-bottom: 24px; color: #666; font-size: 14px; }
    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: #333; font-size: 14px; }
    .form-group input { width: 100%; padding: 10px 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
    .form-group input:focus { outline: none; border-color: #4f46e5; }
    .remember-row { display: flex; align-items: center; margin-bottom: 20px; font-size: 14px; }
    .remember-row input { margin-right: 8px; }
    button { width: 100%; padding: 12px; background: #4f46e5; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
    button:hover { background: #4338ca; }
    .error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
    .footer { margin-top: 20px; text-align: center; font-size: 13px; color: #888; }
    .footer a { color: #4f46e5; text-decoration: none; }
  </style>
</head>
<body>
  <div class="login-card">
    <h2>Sign In</h2>
    <p>Sign in to access <strong>{{ client }}</strong></p>
    {{#if error}}<div class="error">{{ error }}</div>{{/if}}
    <form method="POST" action="/oidc/interaction/{{ uid }}/login">
      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" required autocomplete="email" placeholder="you@example.com">
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="Your password">
      </div>
      <div class="remember-row">
        <input type="checkbox" id="remember" name="remember" value="1">
        <label for="remember" style="margin-bottom:0; font-weight:normal;">Remember me</label>
      </div>
      <button type="submit">Sign In</button>
    </form>
    <div class="footer">
      <a href="/oidc/interaction/{{ uid }}/register">Create an account</a>
    </div>
  </div>
</body>
</html>
