<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>
          Enter the email on your account and we'll send you a link to pick a new password.
        </:subtitle>
      </.header>
    </div>

    <.form :let={f} for={%{}} as={:user} action={~p"/users/reset-password"}>
      <.input
        field={f[:email]}
        type="email"
        label="Email"
        autocomplete="username"
        spellcheck="false"
        required
        phx-mounted={JS.focus()}
      />

      <.button class="btn btn-primary w-full">
        Send reset link
      </.button>
    </.form>

    <p class="text-center text-sm text-base-content/70">
      Remembered it?
      <.link navigate={~p"/users/log-in"} class="font-semibold text-primary hover:underline">
        Log in
      </.link>
    </p>
  </div>
</Layouts.app>
