<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Authorize - 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; }
    .consent-card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); width: 100%; max-width: 400px; text-align: center; }
    .consent-card h2 { margin-bottom: 8px; color: #1a1a2e; font-size: 22px; }
    .consent-card p { margin-bottom: 24px; color: #666; font-size: 14px; }
    .client-name { font-weight: 600; color: #333; }
    .permissions { background: #f9f9f9; border: 1px solid #eee; border-radius: 8px; padding: 16px; margin-bottom: 24px; text-align: left; }
    .permissions h3 { font-size: 14px; color: #555; margin-bottom: 12px; }
    .permissions ul { list-style: none; font-size: 13px; color: #555; }
    .permissions ul li { padding: 4px 0; }
    .permissions ul li::before { content: '✓'; color: #4f46e5; margin-right: 8px; }
    button { width: 100%; padding: 12px; border: none; border-radius: 8px; font-size: 15px; font-weight: 600; cursor: pointer; transition: background 0.2s; margin-bottom: 10px; }
    .btn-approve { background: #4f46e5; color: #fff; }
    .btn-approve:hover { background: #4338ca; }
    .btn-deny { background: #fff; color: #dc2626; border: 1px solid #fecaca; }
    .btn-deny:hover { background: #fef2f2; }
  </style>
</head>
<body>
  <div class="consent-card">
    <h2>Authorize Application</h2>
    <p><span class="client-name">{{ client }}</span> is requesting access to your account</p>
    <div class="permissions">
      <h3>This application will be able to:</h3>
      <ul>
        <li>View your profile information</li>
        <li>Access your email address</li>
        <li>Manage your authentication sessions</li>
      </ul>
    </div>
    <form method="POST" action="/oidc/interaction/{{ uid }}/confirm">
      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
      <button type="submit" class="btn-approve">Authorize</button>
    </form>
    <form method="POST" action="/oidc/interaction/{{ uid }}/cancel">
      <input type="hidden" name="_csrf" value="{{ csrfToken }}">
      <button type="submit" class="btn-deny">Cancel</button>
    </form>
  </div>
</body>
</html>
