@extends('app')
@section('content')
    <div class="forgot-password-container container-fluid">

        <div class="justify-content-between p-3 pe-5 pt-4  d-md-flex d-block align-items-center text-center text-md-start">
            <a class="logo-img" href="{{ '/' }}"></a>
            <h4 class="text-blue fw-bold text-md-end py-3 py-lg-0"> <span class="text-brown fw-bold">Future of
                    Fundraising</span></h4>
        </div>

        <div class="d-flex justify-content-center align-items-center card-div mt-sm-5 mt-lg-2 pt-xl-5 ">
            <div class="forgot-password-form border rounded-4 p-4 py-5 p-lg-4">
                <h4 class="text-center forgot-password-text py-2 py-md-4 pt-xl-3">Forgot Password</h4>

                <p class="px-lg-4 px-xl-5 pt-1 pt-lg-3">
                    <label for="Email" class="forgot-email pb-1">Username or Email<span
                            class="text-danger">*</span></label>
                    <input type="email"
                        class="p-2 ps-3 border rounded-1 w-100 forgot-password-email ps-3 rounded-2 bg-white"
                        placeholder="Username or Email" id="forgot-email">
                </p>
                <p class="px-2 px-lg-4 px-xl-5 mb-0 text-end">
                    <a href="/login" class="text-decoration-none text-dark" id="back-login">Back to <span
                            class="text-primary">Sign In</span>?</a>
                </p>
                <p class="px-lg-4 px-xl-5 text-center pt-3">
                    <button class="bg-blue border p-2 rounded-2 text-white fw-bold w-100" id="forgot-submit-Button">
                        Submit
                        <span id="forgot-spinner" class="spinner-border spinner-border-sm d-none"></span>
                    </button>
                </p>
            </div>
        </div>
    </div>
    @vite(['resources/js/forgot_password/forgotpassword.js'])
    @vite(['resources/js/forgot_password/otpverification.js'])
@endsection