---
import { ForgotPasswordForm } from '../components/AuthenticationFlow/ForgotPasswordForm';
import SettingLayout from '../layouts/SettingLayout.astro';
---

<SettingLayout title='Forgot Password'>
  <div class='container'>
    <div
      class='mx-auto flex flex-col items-start justify-start pb-28 pt-10 sm:max-w-[400px] sm:items-center sm:justify-center sm:pt-20'
    >
      <div class='mb-2 text-left sm:mb-5 sm:text-center'>
        <h1 class='mb-2 text-3xl font-semibold sm:mb-5 sm:text-5xl'>
          Forgot Password?
        </h1>
        <p class='mb-3 text-base leading-6 text-gray-600'>
          Enter your email address below and we will send you a link to reset
          your password.
        </p>
      </div>

      <ForgotPasswordForm client:load />

      <div class='mt-6 text-center text-sm'>
        Don't have an account? <a
          href='/signup'
          class='font-medium text-blue-600 transition duration-150 ease-in-out hover:text-blue-500'
          >Sign up</a
        >
      </div>
    </div>
  </div>
</SettingLayout>