<.header>
  {gettext("Check your email")}
  <:subtitle>
    {gettext("Your confirmation link is on its way.")}
  </:subtitle>
</.header>

<div class="mx-auto mt-8 max-w-xl rounded-3xl border border-base-300 bg-base-100 p-6 shadow-sm sm:p-8">
  <div class="flex gap-4">
    <div class="grid size-11 shrink-0 place-items-center rounded-full bg-success/15 text-success">
      <.icon name="hero-envelope" class="size-6" />
    </div>
    <div>
      <h2 class="text-lg font-bold">{gettext("Open the newest Who Need Help email")}</h2>
      <p class="mt-2 text-sm leading-6 text-base-content/70">
        {gettext(
          "Use the confirmation link in that email. You do not need to enter your address again on this site."
        )}
      </p>
    </div>
  </div>

  <div class="mt-6 rounded-2xl bg-base-200 p-4 text-sm leading-6 text-base-content/70">
    {gettext(
      "If the message is not in your inbox after a minute, check Spam. Older confirmation links may have been replaced by the newest one."
    )}
  </div>

  <div class="mt-6 grid gap-3 sm:grid-cols-2">
    <.link navigate={~p"/users/log-in"} class="btn btn-primary">
      {gettext("Back to log in")}
    </.link>
    <.link navigate={~p"/users/register"} class="btn btn-outline">
      {gettext("Use another email")}
    </.link>
  </div>
</div>
