<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-sm space-y-4">
    <div class="text-center">
      <.header>
        Reset your password
        <:subtitle>Choose a new password for your account.</:subtitle>
      </.header>
    </div>

    <.form
      :let={f}
      for={@changeset}
      as={:user}
      action={~p"/users/reset-password/#{@token}"}
      method="put"
    >
      <.input
        field={f[:password]}
        type="password"
        label="New password"
        autocomplete="new-password"
        spellcheck="false"
        required
        phx-mounted={JS.focus()}
      />
      <.input
        field={f[:password_confirmation]}
        type="password"
        label="Confirm new password"
        autocomplete="new-password"
        spellcheck="false"
        required
      />

      <.button phx-disable-with="Saving..." class="btn btn-primary w-full">
        Save new password
      </.button>
    </.form>
  </div>
</Layouts.app>
