<main data-testid="" class="css-1f7uoeb e1wcrodl0">
    <style>
        .form-label {
            font-size: 13px;
        }
    </style>
    <div class="container mt-5">
        <section class="bg-light vh-100 rounded">
            <div class="container-fluid h-custom">
              <div class="row d-flex justify-content-center align-items-center h-100">
                <div class="col-md-9 col-lg-6 col-xl-5">
                  <img src="https://mdbcdn.b-cdn.net/img/Photos/new-templates/bootstrap-login-form/draw2.webp"
                    class="img-fluid" alt="Sample image">
                </div>

                <div class="col-md-8 col-lg-6 col-xl-4 offset-xl-1 p-2">

                  <form wire:submit.prevent="forgot_password">
                    <div class="d-flex flex-row align-items-center justify-content-center justify-content-lg-start">
                        <h2 class="mb-4">Forgot Password?</h2>
                    </div>

                    <div style="line-height: 1.4rem">
                        <small>If you forgot your password, well, then we'll email you instructions to reset your password.</small>
                    </div>

                    <!-- Email input -->
                    <div data-mdb-input-init class="form-outline mb-4 mt-2">
                        <label class="form-label" for="form3Example3">Email</label>
                      <input type="email" id="form3Example3" wire:model.lazy="email" class="form-control form-control-lg p-3"
                        placeholder="Enter email" />
                        @error('email')
                            <div class="text-danger"><small>{{  $message  }}</small></div>
                        @enderror
                    </div>

                    @if($responseText)
                        <div class="text-{{ $responseCode == 1 ? 'success' : 'danger' }} fw-bold p-2"><small>{{ $responseText }}</small></div>
                    @endif

                    <div class="text-center text-lg-start mt-4 pt-2">
                        <button class="btn btn-primary btn-lg" style="padding-left: 2.5rem; padding-right: 2.5rem;">Send Reset Link</button>
                        <p class="small fw-bold mt-4 pt-1 mb-0">Already have an account? <a href="{{ route('login') }}"
                          class="link-danger">Login</a></p>
                    </div>

                  </form>
                </div>
              </div>
            </div>
        </section>
    </div>
</main>