{% extends "base.html" %}

{% block content %}
<div class="container">
    <div class="heading">Reset Password</div>
    <form id="resetForm" class="form" onsubmit="event.preventDefault(); resetPassword();">
        <div class="input-field">
            <label for="email">Email Address</label>
            <input type="email" id="email" required autocomplete="off" />
        </div>
        <div class="btn-container">
            <button type="submit" class="btn">Reset Password</button>
        </div>
    </form>
    <p id="result" style="color: white;"></p>
</div>
<script>
    function resetPassword() {
        const email = document.getElementById('email').value;

        fetch('/reset_password', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ email: email }),
        })
        .then(response => response.json())
        .then(data => {
            const resultElement = document.getElementById('result');
            resultElement.innerText = data.message;
            resultElement.style.color = data.success ? 'red' : 'white';
        })
        .catch((error) => {
            console.error('Error:', error);
        });
    }
</script>
{% endblock %}