<!DOCTYPE html>
<html lang="vi" xml:lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SSO — Authentication Error</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; padding: 1.5rem; }
    .card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); width: 100%; max-width: 480px; }
    .icon { font-size: 48px; text-align: center; margin-bottom: 16px; }
    h1 { margin-bottom: 8px; color: #1a1a2e; font-size: 22px; }
    .error-box { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 12px 16px; border-radius: 8px; margin-bottom: 24px; font-size: 14px; line-height: 1.5; }
    .error-code { font-weight: 700; font-size: 13px; letter-spacing: 0.03em; text-transform: uppercase; color: #991b1b; margin-bottom: 4px; }
    .description { color: #7f1d1d; margin-top: 4px; }
    p { color: #666; font-size: 14px; margin-bottom: 24px; line-height: 1.6; }
    a { color: #fff; background: #4f46e5; padding: 12px 24px; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; display: inline-block; text-decoration: none; }
    a:hover { background: #4338ca; }
    .secondary { background: #fff; color: #4f46e5; border: 1.5px solid #4f46e5; margin-left: 8px; }
    .secondary:hover { background: #f0f0ff; }
    .footer { margin-top: 20px; text-align: center; font-size: 13px; color: #888; }
    .footer a { background: none; color: #4f46e5; padding: 0; font-size: 13px; font-weight: normal; }
    .footer a:hover { background: none; text-decoration: underline; }
  </style>
</head>
<body>
  <div class="card">
    <div class="icon">&#9888;</div>
    <h1>Authentication Error</h1>
    <div class="error-box">
      <div class="error-code">{{ error }}</div>
      {{#if error_description}}<div class="description">{{ error_description }}</div>{{/if}}
    </div>
    <p>
      The SSO authorization could not be completed. This may be due to a configuration issue, an expired request, or a cancelled login.
    </p>
    <div>
      <a href="/auth/oidc/login">Try Again</a>
      <a href="/" class="secondary">Back to Home</a>
    </div>
    <div class="footer">
      <a href="/auth/oidc/login">Sign in with a different account</a>
    </div>
  </div>
</body>
</html>
