{% extends 'users/user_base.html' %}

{% block content %}

<form id="forget_password" method="POST" action="{% url 'password-reset' %}" class="mx-auto py-md-5 lb-form">
    {% csrf_token %}
    <h2 class="lb-heading">Forgot Password</h2>
    <div>
        <label for="email" class="d-block lb-label">Email</label>
        <input type="text" name="email" class="lb-input" id="email">
    </div>

    <button class=" my-4 lb-signbtn lb-signin">Request Reset Link</button>

    <button type="button" onclick="window.location.href='{% url 'user-login' %}'" class="my-4 lb-signbtn fg-btn">
        <i class="fa fa-arrow-left" aria-hidden="true"></i> Back to Login
    </button>

    <div id="loading-spinner" style="display:none;">
        <p>Sending email, please wait...</p>
        <div class="spinner"></div>
    </div>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

    <script>
        $(document).ready(function () {
            $('#forget_password').on('submit', function (event) {
                $('#loading-spinner').show();
            });
        });
        </script>
        

</form>

{% endblock %}