<% const emailAddress = typeof email !== 'undefined' ? email : ''; %>
<% const showResent = typeof resent !== 'undefined' && resent; %>
<% const showSendError = typeof sendError !== 'undefined' && sendError; %>

<%- include('../partials/adminAuthAside', {
  asideBadge: 'Almost there',
  asideHeadline: 'Check your',
  asideHighlight: 'inbox.',
  asideDescription: 'We sent a verification link to your email. Click it to activate your Analytics Grade admin account.'
}) %>

<div class="flex-1 flex items-center justify-center p-8" style="background:#f0f4f8">
  <div class="w-full max-w-md fade-up">

    <div class="lg:hidden flex items-center gap-3 mb-8">
      <img src="/analytics-grade.png" alt="" class="h-9 w-9 object-contain shrink-0" width="36" height="36" aria-hidden="true" />
      <div>
        <p class="font-bold leading-none" style="color:#0b1f3a;font-size:1.1rem">Analytics Grade</p>
        <p class="text-[10px] font-medium" style="color:#9ca3af">by Analytics Grade</p>
      </div>
    </div>

    <div class="mb-7 text-center">
      <div class="w-16 h-16 rounded-2xl flex items-center justify-center mx-auto mb-5" style="background:rgba(128,101,248,.1)">
        <svg class="w-8 h-8" style="color:#8065f8" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
          <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
        </svg>
      </div>
      <h1 class="text-2xl font-bold mb-2" style="color:#0b1f3a">Verify your email</h1>
      <p class="text-sm text-gray-500 leading-relaxed">
        We sent a verification link to<br/>
        <strong style="color:#0b1f3a"><%= emailAddress %></strong>
      </p>
    </div>

    <% if (showResent) { %>
    <div class="flex items-center gap-3 px-4 py-3 rounded-xl mb-5" style="background:rgba(19,179,180,.08);border:1.5px solid rgba(19,179,180,.25)">
      <p class="text-sm font-medium" style="color:#0d9488">A new verification link has been sent.</p>
    </div>
    <% } %>

    <% if (showSendError) { %>
    <div class="flex items-center gap-3 px-4 py-3 rounded-xl mb-5" style="background:rgba(239,68,68,.08);border:1.5px solid rgba(239,68,68,.25)">
      <p class="text-sm font-medium" style="color:#dc2626">Could not send email. Please try again in a few minutes.</p>
    </div>
    <% } %>

    <div class="p-5 rounded-2xl mb-6" style="background:#fff;border:1px solid #e8ecf0">
      <ol class="space-y-3 text-sm text-gray-600 list-decimal list-inside leading-relaxed">
        <li>Open the email from <strong>Analytics Grade</strong></li>
        <li>Click <strong>Verify your email</strong> or the link in the message</li>
        <li>Return here and sign in once verified</li>
      </ol>
    </div>

    <form action="/auth/resend-verification" method="post" class="mb-4">
      <input type="hidden" name="email" value="<%= emailAddress %>" />
      <button type="submit" class="btn-signin w-full">
        <span>Resend verification email</span>
      </button>
    </form>

    <p class="text-center text-sm" style="color:#6b7280">
      Wrong email?
      <a href="/auth/register" class="font-semibold hover:underline" style="color:#8065f8">Register again</a>
      &nbsp;·&nbsp;
      <a href="/auth/login" class="font-semibold hover:underline" style="color:#8065f8">Sign in</a>
    </p>

    <p class="text-center text-xs mt-6" style="color:#9ca3af">Link expires in 24 hours. Check spam if you do not see it.</p>
  </div>
</div>
