{% extends 'student_navbar.html' %}
{% load static %}
{% block title %} Change Password {% endblock %}
{% block css %}
{% endblock %}

{% block body %}
<form class="container mt-3" method="POST" name="change_password" onsubmit="return checkPassword()">
    {% csrf_token %}
    <div class="row mt-4">
        <div class="form-group col-md-6">
            <label><i style="font-weight: bold;">Username</i></label>
            <input type="text" class="form-control mt-2" name="username" value="{{request.user}}" readonly>
        </div>
        <div class="form-group col-md-6">
            <label><i style="font-weight: bold;">Current Password</i></label>
            <input type="password" class="form-control mt-2" name="current_password" placeholder="Current Password">
        </div>
    </div>

    <div class="row mt-4">
        <div class="form-group col-md-12">
            <label><i style="font-weight: bold;">New Password</i></label>
            <input type="password" class="form-control mt-2" name="new_password" placeholder="Enter the new password">
        </div>
    </div>

    <div class="row mt-4">
        <div class="form-group col-md-12">
            <label><i style="font-weight: bold;">Confirm Password</i></label>
            <input type="password" class="form-control mt-2" name="confirm_password" placeholder="Confirm the new password">
        </div>
    </div>

    <input type="submit" class="btn btn-outline-primary mt-4" value="Update Password">
</form>
{% endblock %}

{% block js %}
<script>
    function checkPassword() {
        if (document.change_password.new_password.value != document.change_password.confirm_password.value) {
            alert("New Password and Confirm Password fields does not match each other.");
            document.change_password.confirm_password.focus();
            return false;
        }
        return true;
    }

    {% if alert %}
    alert("Password Updated Successfully.");
    document.location = "/logout"
    {% endif %}

    {% if currpasswrong %}
    alert("Current Password is wrong..");
    document.location = "/change_password"
    {% endif %}
</script>
{% endblock %}