@extends('auth.layout')

@section('auth_body')

<div class="d-flex col-lg-4 align-items-center auth-bg px-2 p-lg-5">
    <div class="col-12 col-sm-8 col-md-6 col-lg-12 px-xl-2 mx-auto">
        {{-- <center id="sending-email">
            <div class="spinner-border text-primary" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
        </center> --}}
        
        <br><br>
        
        <h2 class="card-title fw-bold mb-1">Forgot Password? 🔒</h2>
        <p class="card-text mb-2">Enter your email to reset your password.</p>

        @if(session('status'))
          <div class="demo-spacing-0">
              <div class="alert @if(session('status')=='success') alert-success @else alert-danger @endif mt-1 alert-validation-msg" role="alert">
                  <div class="alert-body d-flex align-items-center">
                      <i data-feather="info" class="me-50"></i>
                      <span>{{ session('message') }}</span>
                  </div>
              </div>
          </div>
          @endif
        <form class="auth-forgot-password-form mt-2" action="{{ route("forgot_password") }}" method="POST" onSubmit="showSpinner()">
            @csrf
            <div class="mb-1">
                <label class="form-label" for="email">Email Address</label>
                <input class="form-control" id="email" type="text" name="email" placeholder="lucy@gmail.com" aria-describedby="email" autofocus="" tabindex="1" />
            </div>
            <button class="btn btn-primary w-100" tabindex="2">Send new password</button>
        </form>
        <p class="text-center mt-2"><a href="login"><i data-feather="chevron-left"></i> Back to login</a></p>
    </div>
</div>


@endsection