<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm">
    <div class="text-center">
      <.header>
        Register for an account
        <:subtitle>
          Already registered?
          <.link
            navigate={~p"/users/log-in"}
            class="font-semibold text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
          >
            Log in
          </.link>
          to your account now.
        </:subtitle>
      </.header>
    </div>

    <div class="mt-8">
      <.form :let={f} for={@changeset} action={~p"/users/register"}>
        <.input
          field={f[:email]}
          type="email"
          label="Email"
          autocomplete="email"
          required
          phx-mounted={JS.focus()}
        />

        <.button phx-disable-with="Creating account..." class="w-full" variant="primary">
          Create an account
        </.button>
      </.form>
    </div>
  </div>
</Layouts.app>
