<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Verify your email - 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: 20px; }
    .card { background: #fff; padding: 40px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.1); width: 100%; max-width: 520px; }
    .card h2 { margin-bottom: 8px; color: #1a1a2e; font-size: 24px; }
    .card p { margin-bottom: 16px; color: #444; font-size: 14px; line-height: 1.5; }
    .card p.subtitle { color: #666; }
    .icon { width: 64px; height: 64px; border-radius: 50%; background: #eef2ff; color: #4f46e5; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 32px; }

    .email-badge { background: #f3f4f6; padding: 8px 12px; border-radius: 8px; display: inline-block; font-family: monospace; color: #1f2937; margin: 4px 0; }

    /* ── Dev mode banner ──────────────────────────────── */
    .dev-banner {
      background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
      border: 1.5px solid #facc15;
      border-radius: 10px;
      padding: 16px 18px;
      margin-bottom: 20px;
      color: #713f12;
      font-size: 13px;
    }
    .dev-banner-title { font-weight: 700; font-size: 14px; margin-bottom: 4px; color: #92400e; }
    .dev-banner p { margin-bottom: 4px; color: #92400e; }

    /* Dev mode: primary CTA button */
    .dev-verify-btn {
      display: block;
      width: 100%;
      padding: 16px 20px;
      background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
      color: #fff !important;
      border-radius: 10px;
      font-size: 15px;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      margin-bottom: 8px;
      box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
      transition: transform 0.15s, box-shadow 0.15s;
    }
    .dev-verify-btn:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(22, 163, 74, 0.45);
    }
    .dev-verify-sub {
      text-align: center;
      font-size: 12px;
      color: #92400e;
      margin-bottom: 16px;
    }

    /* Fallback dev-link (hidden, collapsible) */
    .dev-link-toggle { font-size: 12px; color: #b45309; cursor: pointer; user-select: none; }
    .dev-link-box { background: #fef9c3; border: 1px dashed #facc15; border-radius: 6px; padding: 10px 12px; margin-top: 8px; font-size: 12px; word-break: break-all; color: #713f12; display: none; }
    .dev-link-box a { color: #15803d; }

    /* ── Error ───────────────────────────────────────── */
    .error { background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 10px 12px; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }

    /* ── Actions ─────────────────────────────────────── */
    .actions { margin-top: 20px; display: flex; flex-direction: column; gap: 10px; }
    .actions button, .actions a.button { width: 100%; padding: 11px 12px; background: #4f46e5; color: #fff; border: none; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; text-decoration: none; transition: background 0.2s; }
    .actions button:hover, .actions a.button:hover { background: #4338ca; }
    .actions button.secondary { background: #fff; color: #4f46e5; border: 1px solid #c7d2fe; }
    .actions button.secondary:hover { background: #eef2ff; }

    .footer { margin-top: 20px; text-align: center; font-size: 13px; color: #888; }
    .footer a { color: #4f46e5; text-decoration: none; }

    /* Dev mode inbox link at bottom */
    .dev-inbox-link { text-align: center; margin-top: 12px; }
    .dev-inbox-link a { font-size: 12px; color: #b45309; text-decoration: none; }
    .dev-inbox-link a:hover { text-decoration: underline; }
  </style>
</head>
<body>
  <div class="card">
    <div class="icon">&#9993;</div>
    <h2>Verify your email</h2>
    <p>We've sent a verification link to <span class="email-badge">{{ email }}</span>.</p>
    <p class="subtitle">Open the link to activate your account and continue signing in to <strong>{{ client }}</strong>. The link expires in {{ ttlHours }} hours.</p>

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

    {{#if devVerifyUrl}}
      {{! ── DEV MODE: fallback mail (no SMTP) — show instant verify + log viewer ── }}
      <div class="dev-banner">
        <div class="dev-banner-title">&#9888; Dev Mode — Email sent via fallback (no SMTP)</div>
        <p>Real email was dispatched to your SMTP provider, but you can also click the green button for instant verification.</p>
        <p style="margin-top:4px; margin-bottom:0; font-size:12px;">To view all recent dev emails, <a href="/dev/emails" style="color:#15803d;font-weight:600;">open Dev Email Inbox &#8599;</a></p>
      </div>

      <a class="dev-verify-btn" href="{{ devVerifyUrl }}">&#10003; Click here to verify email instantly (Dev)</a>
      <p class="dev-verify-sub">You will be redirected to sign in after verifying.</p>

      {{! Hidden collapsible raw URL for power users }}
      <span class="dev-link-toggle" onclick="document.getElementById('devRawLink').style.display=document.getElementById('devRawLink').style.display?'none':'block'">
        &#9660; Show raw verification URL
      </span>
      <div class="dev-link-box" id="devRawLink">
        <a href="{{ devVerifyUrl }}">{{ devVerifyUrl }}</a>
      </div>
    {{else}}
      {{! ── PRODUCTION: instructions only ── }}
      <div style="background:#eff6ff; border:1px solid #bfdbfe; border-radius:8px; padding:14px 16px; margin-bottom:8px; font-size:13px; color:#1e40af;">
        <strong>Check your email inbox</strong> (<span style="font-family:monospace;">{{ email }}</span>).<br>
        Click the link inside the email to verify your account.
      </div>
    {{/if}}

    <div class="actions">
      <form method="POST" action="/oidc/interaction/{{ uid }}/resend-verification" style="margin:0;">
        <input type="hidden" name="_csrf" value="{{ csrfToken }}">
        <input type="hidden" name="email" value="{{ email }}">
        <button type="submit" class="secondary">Resend verification email</button>
      </form>
      <a class="button" href="/oidc/interaction/{{ uid }}">Back to sign in</a>
    </div>

    <div class="footer">
      Wrong email? <a href="/oidc/interaction/{{ uid }}/register">Register again</a>
    </div>

    {{#if devVerifyUrl}}
    <div class="dev-inbox-link">
      <a href="/dev/emails">&#128231; View all recent dev emails</a>
    </div>
    {{/if}}
  </div>
</body>
</html>
