{% extends 'base.html' %}
{% load static %}
{% block title %} Change Password - {{ request.user }} - Student Dashboard {% endblock title %}

{% block head %}
<link rel="stylesheet" href="{% static 'css/dashboard.css' %}">
{% endblock head %}
{% block body %}
<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="sidebar-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'info' %}">
                            <img src="https://img.icons8.com/pastel-glyph/24/000000/user-male.png" />
                            Profile
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{% url 'ChangePassword' %}">
                            <img src="https://img.icons8.com/ios/24/000000/password-window.png" />
                            Change Password
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'UserCourse' %}">
                            <img src="https://img.icons8.com/wired/24/000000/singing-teacher.png" />
                            Your Courses
                        </a>
                    </li>
                </ul>
            </div>
        </nav>

        <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-md-4">
            <div
                class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">Change Password</h1>
            </div>
            <div class="row">
                <div class="col-md-2"></div>
                <div class="col-md-4">
                    <form action="{% url 'ChangePassword' %}" method="POST" autocomplete="off">{% csrf_token %}
                        <div class="form-group">
                            <label for="currentPassword">Current Password <b style="color: red;">*</b></label>
                            <input type="password" class="form-control form-control-sm currentpass" id="currentPassword" name="currentPassword" required><small class="float-right showpassword currentpassword">SHOW</small>
                            <div id="helpIdusername" class="text-muted password-key-error" style="display: none;"></div>
                        </div>
                        <div class="form-group">
                            <label for="newPassword">New Password <b style="color: red;">*</b></label>
                            <input type="password" class="form-control form-control-sm newpassword" id="newPassword" name="newPassword" required>
                            <small class="float-right showpassword newpass">SHOW</small>
                        </div>
                        
                        <button type="submit" class="btn btn-info" id="chapass">Change Password</button>
                    </form>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="{% static 'js/pass_validation.js' %}"></script>
{% endblock body %}