{% include 'web/include_comman/header.html' %}

        <!-- Sidebar -->
        {% include 'web/include_comman/sidebar.html' %}
        <!-- End of Sidebar -->

        <!-- Content Wrapper -->
        <div id="content-wrapper" class="d-flex flex-column">

            <!-- Main Content -->
            <div id="content">

                <!-- Topbar -->
                {% include 'web/include_comman/right_top.html' %}
                <!-- End of Topbar -->

                <!-- Begin Page Content -->
                <div class="container-fluid">

                    <!-- Page Heading -->
                    {% comment %} <h1 class="h3 mb-2 text-gray-800">{{title}}</h1> {% endcomment %}
                   

                    <!-- DataTales Example -->
                    <div class="card shadow mb-4">
                        <div class="card-header py-3">
                            <div class="row">
                                <div class="col-lg-6">
                                    <h6 class="m-0 font-weight-bold text-primary">Change Password</h6>
                                </div>
                                <div class="col-lg-6">
                                    <a href="{% url 'web:user_dashboard' %}" class="btn btn-info btn-sm float-right" role="button">Back</a>
                                </div>
                            </div>
                        </div>
                        <div class="card-body">
                            {% include 'web/message.html' %}
                            <div class="table-responsive">
                                                    

                    <form method='POST' class="user" id="edit_password">
                        {% csrf_token %}
                    <div class="container">    
                        <div class="row">
                            <label >Old Password<span style="color:red;"> *</span> </label>
                            {{forms.old_password}}
                           
                        </div>
                        <br>
                        <div class="row">
                            <label >New Password<span style="color:red;"> *</span> </label>
                            {{forms.password}}
                            
                        </div>
                        <br>
                        <div class="row">
                            <label >Confirm Password<span style="color:red;"> *</span> </label>
                            {{forms.confirm_password}}
                            {% comment %} <span class="input-group-text" id="basic-addon1"><i class="fas fa-eye"></i></span> {% endcomment %}
                              {% comment %} <span class="input-group-text" id="basic-addon2" class="btn-2"><i class="fa fa-eye-slash"></i></span> {% endcomment %}
                        </div>
                        <br>
                        <div class="row">
                            <input type="submit" name="Reset Password" id="submit" class="fbtn btn-primary btn-user btn-block" value="Update Password"/>
    
                    </div> 
                </div> 

                            </div>
                        </div>
                    </div>

                </div>
                <!-- /.container-fluid -->

            </div>
            <!-- End of Main Content -->
            <style>
                label{
                font-weight:bold;
                color:black;
                }
                 {% comment %} #basic-addon1{
                display: inline;
                position: relative;
                border-radius: 50%;
                left: 920px;
                top: -38px;
                background:none;
                border:none;
            }
            .btn-2{
                display: inline;
                position: relative;
                border-radius: 50%;
                left: 874px;
                top: -37px;
                background: none;
                border: none;
            } {% endcomment %}
            #old_password{
                width:100%;
            }
            #password{
                width:100%;
            }
            #confirm_password{
                width:100%;
            }
            .error{
                width: 100%;
                padding: 10px;
            }
            </style>
            
            <script>
                
                const togglePassword = document.querySelector("#basic-addon1");
                const password = document.querySelector("#id_confirm_password");
                console.log(password.getAttribute("type") , 'password .............')
                console.log(togglePassword , 'toggle ...........')
        
                togglePassword.addEventListener("click", function () {
                    // toggle the type attribute
                   // console.log('i cliked ')
                    const type = password.getAttribute("type") === "password" ? "text" : "password";
                   password.setAttribute("type", type);
                   // console.log( type)
                    // toggle the icon
                     this.classList.toggle("bi-eye");
                 type === "password" ? togglePassword.classList.toggle("btn-1") : togglePassword.classList.toggle("btn-2")
                });

                
        
                // prevent form submit
                const form = document.querySelector("form");
                form.addEventListener('submit', function (e) {
                    e.preventDefault();
                });
            </script>

            {% include 'web/include_comman/footer.html' %}

            <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
            <script type="text/javascript">
                $("#edit_password").validate({
                    rules:{
                        
                        id_old_password:{
                            required:true,
                        },
                        id_password:{
                            required:true,
                        },
                        id_confirm_password:{
                            required:true,
                        },
                    }
                });
            </script>

            <style>
                #edit_password .error{
                    font-size: 14px;
                    color: red;
                }
            </style>