<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}Email Verified{% endblock %}</title>
  <style>
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f5f5f5;
      color: #1a1a1a;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1.5rem;
    }
    .card {
      background: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 12px rgba(0,0,0,0.08);
      max-width: 440px;
      width: 100%;
      padding: 2.5rem 2rem;
      text-align: center;
    }
    .icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      border-radius: 50%;
      margin-bottom: 1.25rem;
    }
    .icon--success { background: #ecfdf5; }
    .icon--error   { background: #fef2f2; }
    .icon--success svg { color: #16a34a; }
    .icon--error   svg { color: #dc2626; }
    h1 {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }
    p {
      font-size: 0.9375rem;
      color: #555;
      line-height: 1.5;
      margin-bottom: 1.5rem;
    }
    .email {
      font-weight: 600;
      color: #1a1a1a;
    }
    .btn {
      display: inline-block;
      padding: 0.625rem 1.5rem;
      border-radius: 6px;
      font-size: 0.9375rem;
      font-weight: 500;
      text-decoration: none;
      cursor: pointer;
      border: none;
    }
    .btn--primary {
      background: #2563eb;
      color: #fff;
    }
    .btn--primary:hover { background: #1d4ed8; }
    .btn--secondary {
      background: #f3f4f6;
      color: #374151;
    }
    .btn--secondary:hover { background: #e5e7eb; }
    .redirect-notice {
      margin-top: 1rem;
      font-size: 0.8125rem;
      color: #9ca3af;
    }
  </style>
  {% if redirect_url and redirect_delay %}
  <meta http-equiv="refresh" content="{{ redirect_delay }};url={{ redirect_url }}">
  {% endif %}
</head>
<body>
  <div class="card">

    {% block content %}

    {% if success %}

      <div class="icon icon--success">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none"
             viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
        </svg>
      </div>

      <h1>Email verified</h1>

      {% if email %}
        <p><span class="email">{{ email }}</span> has been verified.<br>
        You are now signed in.</p>
      {% else %}
        <p>Your email address has been successfully verified.<br>
        You are now signed in.</p>
      {% endif %}

      {% if redirect_url %}
        <a href="{{ redirect_url }}" class="btn btn--primary">Continue</a>
        {% if redirect_delay %}
          <p class="redirect-notice">Redirecting automatically in {{ redirect_delay }} second{{ redirect_delay|pluralize }}…</p>
        {% endif %}
      {% else %}
        <p style="color:#9ca3af;font-size:0.875rem;">You can close this tab and return to the app.</p>
      {% endif %}

    {% else %}

      <div class="icon icon--error">
        <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none"
             viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
        </svg>
      </div>

      <h1>{{ error_title|default:"Link invalid" }}</h1>
      <p>{{ error_message|default:"This verification link is invalid or has already been used. Links expire after 24 hours and can only be used once." }}</p>

      {% if redirect_url %}
        <a href="{{ redirect_url }}" class="btn btn--secondary">Go back</a>
      {% endif %}

    {% endif %}

    {% endblock %}

  </div>
</body>
</html>
