{% extends "base.html" %}
{% block title %}Reset Password{% endblock %}
{% block content %}
<div class="row justify-content-center">
    <div class="col-md-5">
        <div class="card shadow">
            <div class="card-header bg-success text-white">
                <h4 class="mb-0">Set New Password</h4>
            </div>
            <div class="card-body">
                <p>Create a new password for <strong>{{ email }}</strong></p>
                <form method="POST" action="{{ url_for('reset_password') }}" id="resetPasswordForm">
                    <div class="mb-3">
                        <label>New Password</label>
                        <input type="password" name="password" class="form-control" required minlength="6">
                        <small class="text-muted">Minimum 6 characters</small>
                    </div>
                    <div class="mb-3">
                        <label>Confirm Password</label>
                        <input type="password" name="confirm_password" class="form-control" required>
                    </div>
                    <button type="submit" class="btn btn-success w-100" id="resetBtn">Reset Password</button>
                </form>
            </div>
        </div>
    </div>
</div>

<!-- Loading Overlay -->
<div id="loadingOverlay" class="loading-overlay">
    <div class="spinner"></div>
    <p>Resetting password, please wait...</p>
</div>

<script>
    document.getElementById('resetPasswordForm').addEventListener('submit', function() {
        document.getElementById('loadingOverlay').style.display = 'flex';
        document.getElementById('resetBtn').disabled = true;
    });
</script>
{% endblock %}