{% extends "base.html" %}

{% block content %}
<div class="container" style="display: flex; flex-direction: column; gap: 1rem; margin: 200px 0px">
    <header style="background-color: white;">
        <h2 style="width:212px; color: #673de6;">Reset Password</h2>
    </header>
    <form id="resetPasswordForm" method="post">
        <label for="new_password">New Password</label>
        <input type="password" id="new_password" name="new_password" required>
        <label for="confirm_password">Confirm Password</label>
        <input type="password" id="confirm_password" name="confirm_password" required>
        <div id="passwordError" style="color: red; display: none;">Passwords do not match</div>
        <button style="width: 107%;" type="submit">Submit</button>
    </form>
</div>

<script>
    document.getElementById("resetPasswordForm").addEventListener("submit", function(event) {
        var newPassword = document.getElementById("new_password").value;
        var confirmPassword = document.getElementById("confirm_password").value;

        if (newPassword !== confirmPassword) {
            document.getElementById("passwordError").style.display = "block";
            event.preventDefault(); // Prevent form submission
        }
    });
</script>
{% endblock %}
