<%- include('../partials/header_head.ejs') -%>

    <link rel="stylesheet" href="/login/login.css">

    <div onload="particles()" class="wrapper fadeInDown">
        <div id="formContent">
            <!-- Tabs Titles -->

            <!-- Icon -->
            <div class="fadeIn first">
                <a href="/"> <img id="form-logo" class="" src="https://www.pngall.com/wp-content/uploads/2016/05/Best-Quality-PNG.png" alt=""></a>
            </div>

            <!-- Login Form -->
            <form id="password_form" method="POST" onsubmit="return verification()" action="/user/<%=user_id%>/change_password/<%=token%>">
                <input type="password" id="password" class="fadeIn second" name="new_pass"
                    placeholder="New password here" required>
                    <input type="password" id="conf_password" class="fadeIn second" name="conf_password"
                    placeholder="Confirm your password" required>
                <br><input type="submit" class="fadeIn fourth" value="Submit">
            </form>

            <div id="form_submitted_msg" class="alert alert-success" role="alert">
                Successfully changed password.
            </div>

        </div>
    </div>

    <script>
        $(".alert").hide();
        function verification() {
            if ($("#password").val() != $("#conf_password").val()) {
                alert("password confirmation doesn't match");
                return false;
            }
        }
    </script>

    <%- include('../partials/footer') -%>