{% extends 'base.html' %}
{% block title %}{{ title }} | Learning management system{% endblock title %}
{% load crispy_forms_tags %}
{% load static %}

{% block content %}

<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Password Change</li>
    </ol>
</nav>

{% if messages %}
    {% for message in messages %}
        {% if message.tags == 'error' %}
            <div class="alert alert-danger">
                <i class="fas fa-exclamation-circle"></i>{{ message }}
            </div>
        {% else %}
            <div class="alert alert-success">
                <i class="fas fa-check-circle"></i>{{ message }}
            </div>
        {% endif %}
    {% endfor %}
{% endif %}

<div class="row">
    <div class="col-md-6 mx-auto">
        <div class="card">
            <p class="form-title"><i class="fas fa-lock"></i>Change Password</p><br>
            <div class="container">
                <!-- {{ form|crispy }} -->
            
                <form action="" method="POST">{% csrf_token %}
                <div class="form-group">
                    <label>{{ form.old_password.label }}</label>{{ form.old_password }}
                    <span class="danger">{{ form.old_password.errors }}</span>
                    <p class="text-muted-xs">Required. 150 characters or fewer. Letters, digits and @/./+/-/_ only.</p>
                </div>
                <div class="form-group">
                    <label>{{ form.new_password1.label }}</label>{{ form.new_password1 }}
                    <span class="danger">{{ form.new_password1.errors }}</span>
                    <p class="text-muted-xs">
                        Your password can't be too similar to your other personal information.<br>
                        Your password must contain at least 8 characters.<br>
                        Your password can't be a commonly used password.<br>
                        Your password can't be entirely numeric.
                    </p>
                </div>
                <div class="form-group">
                    <label>{{ form.new_password2.label }}</label>{{ form.new_password2 }}
                    <span class="danger">{{ form.new_password2.errors }}</span>
                    <p class="text-muted-xs">Enter the same password as before, for verification.</p>
                </div>

                <center><input class="btn btn-outline-primary" type="submit" value="Change Password"></center><br>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock content %}