{% extends 'layout.html' %}
{% block title %} Change Password {% endblock %}
{% block content %}
<br><br><br>
    <div class="verify-pass">
        <form action="/change" method="POST"  id="pass-form">
            <label for="password">New Password:</label>
            <input type="password" class="form-control" id="password" name="password" required><br><br>

            <label for="repeat-password">Repeat New Password:</label>
            <input type="password" class="form-control" id="repeat-password" required><br><br>

            <div id="pass-error-group" class="form-group" style="display:none; text-align:center; text-weight:bold;">
                <b><span id="pass-error" style="color:red;"></span></b>
            </div>

            <center><button type="submit" class="btn btn-primary verify">Change Password!</button></center>
        </form>
    </div>

    <script>
      function myFunction() {
            var pass = document.getElementById("password").value;
            var rep_pass = document.getElementById("repeat-password").value;
            let value = pass.localeCompare(rep_pass);
            if (value != 0) {
                document.getElementById("pass-error-group").style.display = "block";
                document.getElementById("pass-error").innerHTML = "&#x0021; &nbsp; &nbsp; Password does not Match.";
                return false;
            }
            return true;
        }

        document.getElementById("pass-form").addEventListener("submit", function(event) {
            if (!myFunction()) {
              event.preventDefault(); // prevent the form from submitting
            }
        });
    </script>

{% endblock %}