<PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper
  flash={@flash}
  phoenix_kit_current_scope={assigns[:phoenix_kit_current_scope]}
  page_title={gettext("Resend confirmation")}
  current_path={assigns[:url_path] || "/users/confirm"}
  dev_mailbox_message={gettext("confirmation emails")}
>
  <%= if @awaiting_confirmation? do %>
    <h1 class="text-2xl font-bold text-center mb-2">
      {gettext("Confirm your email to continue")}
    </h1>
    <p class="text-center text-base-content/60 text-sm mb-1">
      {gettext(
        "We emailed a confirmation link to %{email}. Open it to continue — you'll land back in the app automatically, no need to come back to this page.",
        email: @phoenix_kit_current_user.email
      )}
    </p>
    <p class="text-center text-base-content/40 text-xs mb-6">
      <%= if @confirmation_sent_at do %>
        {gettext("Sent")}
        <.time_ago
          datetime={@confirmation_sent_at}
          class="text-base-content/40 text-xs"
          id="confirmation-sent-at"
        />
      <% else %>
        {gettext("No confirmation email on record — use Resend below.")}
      <% end %>
    </p>
  <% else %>
    <h1 class="text-2xl font-bold text-center mb-2">
      {gettext("No confirmation instructions received?")}
    </h1>
    <p class="text-center text-base-content/60 text-sm mb-6">
      {gettext("We'll send a new confirmation link to your inbox")}
    </p>
  <% end %>
  <.form for={@form} id="resend_confirmation_form" phx-submit="send_instructions">
    <fieldset class="fieldset min-w-0">
      <legend class="fieldset-legend sr-only">{gettext("Resend Confirmation")}</legend>
      <%= if @awaiting_confirmation? do %>
        <div>
          <label class="label mb-2">
            <span class="font-semibold">{gettext("Email")}</span>
          </label>
          <p class="text-base-content/80 font-medium break-all">
            {@form[:email].value}
          </p>
          <input type="hidden" name="user[email]" value={@form[:email].value} />
        </div>
      <% else %>
        <.input field={@form[:email]} type="email" label={gettext("Email")} required />
      <% end %>
      <button
        type="submit"
        phx-disable-with={gettext("Sending...")}
        class="btn btn-primary w-full mt-4 transition-all hover:scale-[1.02] active:scale-[0.98]"
      >
        {gettext("Resend email")}
      </button>
    </fieldset>
  </.form>

  <%= if @awaiting_confirmation? do %>
    <div class="text-center mt-4">
      <button
        type="button"
        phx-click="toggle_change_email"
        class="text-sm font-semibold text-primary hover:underline"
      >
        {if @change_email?, do: gettext("Cancel"), else: gettext("Wrong email? Change it")}
      </button>
    </div>

    <%= if @change_email? do %>
      <.form
        for={@email_form}
        id="change_email_form"
        phx-submit="update_email"
        phx-change="validate_email_change"
        class="mt-4"
      >
        <fieldset class="fieldset min-w-0">
          <legend class="fieldset-legend sr-only">{gettext("Change Email")}</legend>
          <.input field={@email_form[:email]} type="email" label={gettext("New email")} required />
          <button
            type="submit"
            phx-disable-with={gettext("Updating...")}
            class="btn btn-secondary w-full mt-4"
          >
            {gettext("Update email & resend confirmation")}
          </button>
        </fieldset>
      </.form>
    <% end %>
  <% end %>

  <div class="text-center mt-4 text-sm">
    <%= if @awaiting_confirmation? do %>
      <.link
        href={Routes.path("/users/log-out")}
        method="delete"
        class="font-semibold text-primary hover:underline"
      >
        {gettext("Log out")}
      </.link>
    <% else %>
      <.link
        href={Routes.path("/users/register")}
        class="font-semibold text-primary hover:underline"
      >
        {gettext("Register")}
      </.link>
      <span class="mx-2 text-base-content/40">|</span>
      <.link
        href={Routes.path("/users/log-in")}
        class="font-semibold text-primary hover:underline"
      >
        {gettext("Log in")}
      </.link>
    <% end %>
  </div>
</PhoenixKitWeb.Components.AuthPageWrapper.auth_page_wrapper>
