<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-md text-center">
    <.header>
      {gettext("Confirm email change")}
      <:subtitle>{gettext("Confirm the new email address for your account.")}</:subtitle>
    </.header>

    <.form
      for={%{}}
      action={~p"/users/settings/confirm-email"}
      id="email-change-fragment-form"
      hidden
    >
      <input id="email-change-fragment-token" type="hidden" name="token" value="" />
      <.button variant="primary" phx-disable-with={gettext("Confirming...")}>
        {gettext("Confirm email change")}
      </.button>
    </.form>

    <noscript>
      <p class="alert alert-error">
        {gettext("JavaScript is required to confirm this protected email link.")}
      </p>
    </noscript>
  </div>
</Layouts.app>
