{% extends "base.html" %}
{% block title %} Forgot your password {% endblock %}

{% block content %}
    <div class="form-box">
        <div class="form-value">
            <form action="" method="post">
                <h2>Forgot your password</h2>
                <div class="inputbox">
                    <ion-icon name="person-outline"></ion-icon>
                    <input type="text" id="username" name="username" required>
                    <label for="">Username</label>
                </div>
                <div class="inputbox">
                    <ion-icon name="mail-outline"></ion-icon>
                    <input name="email" type="email" id="email" required>
                    <label for="">Your email</label>
                </div>
                <div class="inputbox">
                    <ion-icon name="lock-closed-outline"></ion-icon>
                    <input name="new_password" id="new_password" type="password"  required>
                    <label for="">New password</label>
                    {% with messages = get_flashed_messages() %}
                        {% if messages %}
                            {% for m in messages %}
                                <p style="color: red;">{{m}}</p>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                </div>
                <div class="inputbox">
                    <ion-icon name="lock-closed-outline"></ion-icon>
                    <input name="confirm_new_password" id="confirm_new_password" type="password" required>
                    <label for="">Confirm new password</label>
                    {% with messages = get_flashed_messages() %}
                        {% if messages %}
                            {% for m in messages %}
                                <p style="color: red;">{{m}}</p>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}
                </div>
                <div class="forget">
                    <label for=""><input type="checkbox">Remember Me  <a href="#">Forget Password</a></label>
                </div>
                <button type="submit">Change password</button>
                <div class="register">
                    <p><a href="/register">Don't have a account Register</a></p>
                </div>
            </form>
        </div>
    </div>
{% endblock %}