<div class="card border-0 shadow-lg p-4 glass-card">
    <div class="card-body">
        <h4 class="fw-bold font-outfit text-dark text-center mb-2">Recover Password</h4>
        <p class="text-muted text-xs text-center mb-4">Enter your registered email below, and we will generate a link to reset your account password.</p>

        <form action="<?= APP_URL ?>/forgot-password" method="POST">
            <?= csrf_field() ?>

            <div class="mb-3">
                <label for="email" class="form-label text-sm fw-medium">Email Address</label>
                <div class="input-group">
                    <span class="input-group-text bg-light border-end-0"><i class="fa-regular fa-envelope text-muted"></i></span>
                    <input type="email" class="form-control bg-light border-start-0 ps-0" id="email" name="email" placeholder="name@example.com" required autofocus>
                </div>
            </div>

            <div class="mt-4 mb-3">
                <button type="submit" class="btn btn-primary w-100 rounded-pill py-2 font-outfit fw-bold shadow-sm">Send Reset Link</button>
            </div>
        </form>

        <hr class="my-4 text-muted opacity-25">

        <p class="text-center text-sm text-muted mb-0">
            Remembered your password? <a href="<?= APP_URL ?>/login" class="fw-semibold text-primary">Sign In</a>
        </p>
    </div>
</div>
