<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create Account - 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; padding: 24px; }
    .register-card { background: #fff; padding: 32px 36px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); width: 100%; max-width: 640px; }
    .register-card h2 { margin-bottom: 4px; color: #1a1a2e; font-size: 24px; }
    .register-card p.subtitle { margin-bottom: 20px; color: #666; font-size: 14px; }
    .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
    .form-group { margin-bottom: 0; }
    .form-group.full { grid-column: 1 / -1; }
    .form-group label { display: block; margin-bottom: 6px; font-weight: 500; color: #333; font-size: 13px; }
    .form-group input, .form-group select { width: 100%; padding: 9px 12px; border: 1px solid #d4d4d8; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; background: #fff; }
    .form-group input:focus, .form-group select:focus { outline: none; border-color: #4f46e5; }
    .form-group .hint { font-size: 12px; color: #888; margin-top: 4px; }
    .terms { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #444; margin: 18px 0 8px; }
    .terms input { margin-top: 3px; }
    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; margin-top: 12px; }
    button:hover { background: #4338ca; }
    .error { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
    .footer { margin-top: 18px; text-align: center; font-size: 13px; color: #888; }
    .footer a { color: #4f46e5; text-decoration: none; }
    @media (max-width: 540px) { .form-grid { grid-template-columns: 1fr; } }
  </style>
</head>
<body>
  <div class="register-card">
    <h2>Create Account</h2>
    <p class="subtitle">
      Register to access <strong>{{ client }}</strong> via SSO VietProDev
    </p>

    {{#if error}}<div class="error">{{ error }}</div>{{/if}}

    <form method="POST" action="/oidc/interaction/{{ uid }}/register">
      <input type="hidden" name="_csrf" value="{{ csrfToken }}">

      <div class="form-grid">
        <div class="form-group full">
          <label for="email">Email</label>
          <input
            type="email"
            id="email"
            name="email"
            required
            autocomplete="email"
            placeholder="you@example.com"
            value="{{ prefill.email }}"
          >
        </div>

        <div class="form-group">
          <label for="first_name">First name</label>
          <input
            type="text"
            id="first_name"
            name="first_name"
            autocomplete="given-name"
            value="{{ prefill.first_name }}"
          >
        </div>

        <div class="form-group">
          <label for="last_name">Last name</label>
          <input
            type="text"
            id="last_name"
            name="last_name"
            autocomplete="family-name"
            value="{{ prefill.last_name }}"
          >
        </div>

        <div class="form-group">
          <label for="phone">Phone</label>
          <input
            type="tel"
            id="phone"
            name="phone"
            autocomplete="tel"
            placeholder="+84..."
            value="{{ prefill.phone }}"
          >
        </div>

        <div class="form-group">
          <label for="gender">Gender</label>
          <select id="gender" name="gender" autocomplete="sex">
            <option value="">—</option>
            <option value="male">Male</option>
            <option value="female">Female</option>
            <option value="other">Other</option>
          </select>
        </div>

        <div class="form-group full">
          <label for="address">Address</label>
          <input
            type="text"
            id="address"
            name="address"
            autocomplete="street-address"
            placeholder="Street, city"
            value="{{ prefill.address }}"
          >
        </div>

        <div class="form-group">
          <label for="date_of_birth">Date of birth</label>
          <input
            type="date"
            id="date_of_birth"
            name="date_of_birth"
            value="{{ prefill.date_of_birth }}"
          >
        </div>

        <div class="form-group">
          <label for="username">Username (optional)</label>
          <input
            type="text"
            id="username"
            name="username"
            autocomplete="username"
            placeholder="your_username"
          >
        </div>

        <div class="form-group">
          <label for="password">Password</label>
          <input
            type="password"
            id="password"
            name="password"
            required
            autocomplete="new-password"
            placeholder="At least 12 characters"
          >
          <p class="hint">Minimum 12 characters</p>
        </div>

        <div class="form-group">
          <label for="confirmPassword">Confirm password</label>
          <input
            type="password"
            id="confirmPassword"
            name="confirmPassword"
            required
            autocomplete="new-password"
          >
        </div>
      </div>

      <label class="terms">
        <input type="checkbox" name="terms_accepted" value="1" required>
        <span>
          Tôi đồng ý với <a href="#" style="color:#4f46e5">Điều khoản dịch vụ</a> và
          <a href="#" style="color:#4f46e5">Chính sách bảo mật</a> của SSO VietProDev. /
          I accept the Terms of Service and Privacy Policy.
        </span>
      </label>

      <button type="submit">Create Account &amp; Send verification</button>
    </form>

    <div class="footer">
      Already have an account? <a href="/oidc/interaction/{{ uid }}">Sign in</a>
    </div>
  </div>
</body>
</html>
