{% extends 'layouts/base.html' %}
{% load static %}

{% block header %}{% endblock header %}

{% block content %}

    <main>

        {% include 'includes/pre-loader.html' %}

        <!-- Section -->
        <section class="min-vh-100 d-flex align-items-center section-image overlay-soft-dark" data-background="{% static 'assets/img/pages/form-image.jpg' %}">
            <div class="container">
                <div class="row justify-content-center">
                    <div class="col-12 d-flex align-items-center justify-content-center">
                        <div class="signin-inner my-4 my-lg-0 bg-white shadow-soft border rounded border-gray-300 p-4 p-lg-5 w-100 fmxw-500">
                            <div class="text-center text-md-center mb-4 mt-md-0">
                                <h1 class="mb-0 h3">Change your Password</h1>
                            </div>
                            <form method="post" class="mt-4">
                                {% csrf_token %}
                                <!-- Form -->
                                {% if form.non_field_errors %}
                                    {% for error in form.non_field_errors %}
                                        <span class="text-danger"> {{ error }} </span>
                                    {% endfor %}
                                {% endif %}
                                {% for field in form %}
                                <div class="form-group mb-4">
                                    <label for="email">{{ field.label }}</label>
                                    <div class="input-group">
                                        <span class="input-group-text" id="basic-addon1">
                                            <span class="fas fa-unlock-alt"></span>
                                        </span>
                                        {{ field }}
                                    </div>  
                                </div>
                                <span class="text-danger"> {{ field.errors }} </span>
                                {% endfor %}
                                <!-- End of Form -->
                                <div class="d-grid">
                                    <button type="submit" class="btn btn-primary">Change</button>
                                </div>
                                <div class="d-flex justify-content-center align-items-center mt-4">
                                    <span class="fw-normal">
                                        <a href="/" class="fw-bold text-underline">Cancel</a>
                                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </main>

 {% endblock content %}

 {% block footer %}{% endblock footer %}