{% extends "cloud/base_login.html" %}
{% load i18n %}
{% block main %}
<div class="zk-login-col">
    <div class="col-md-9 col-md-offset-3">
        {% block logo_box %}
            {{ block.super }}
        {% endblock %}
        <div class="mb-3 card zk-login-card  text-white">
            <div class="card-header border-0 p-0 text-center">
                <img class="img-responsive" src="{% static 'cloud/static/images/login-curve.svg' %}"
                     alt="login">
                <div class="curve-text">{% trans "sign_up_for_your_acnt" %}</div>
            </div>
            <div class="card-body p-0">
                <form action="{% url 'biotime:active_set_pwd' %}" class="zk-login-form">
                    {% csrf_token %}
                    <input name="code" id="code" hidden value="{{ code }}">
                    <div class="input-group">
                                       <span class="input-group-addon">
                                       <i class="fa fa-envelope" aria-hidden="true"></i>
                                       </span>
                        <input type="text" class="form-control text-center input-lg" name="email" value="{{ email }}"
                               readonly
                               placeholder="Enter Email ID"/>
                    </div>
                    <div class="input-group">
                                    <span class="input-group-addon">
                                    <i class="fa fa-lock" aria-hidden="true"></i>
                                    </span>
                        <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                               title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                               class="form-control text-center input-lg" id="pwd0" name="password0"
                               placeholder="New Password"
                               required/>
                        <span class="input-group-addon pwd-right-radius" onclick="viewPassword('pwd0')">
                                    <i id="pwd0_icon" class="fa fa-eye-slash"></i>
                        </span>
                    </div>
                    <div class="input-group">
                                    <span class="input-group-addon">
                                    <i class="fa fa-lock" aria-hidden="true"></i>
                                    </span>
                        <input type="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
                               class="form-control text-center" id="pwd1"
                               title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
                               name="password1" placeholder="Confirm Password" required/>
                        <span class="input-group-addon pwd-right-radius" onclick="viewPassword('pwd1')">
                                    <i id="pwd1_icon" class="fa fa-eye-slash"></i>
                        </span>
                    </div>
                    <p class="text-center text-capitalize text-danger" id="error_msg">{{ msg }}</p>
                    <div class="row">
                        <div class="col-md-4 col-md-offset-4">
                            <button type="submit"
                                    class="btn btn-lg btn-block btn-primary zk-btn">{% trans "Continue" %}
                            </button>
                        </div>
                    </div>
                </form>
                <div class="col-md-4 col-md-offset-8 mt-m20">
                    <p class="text-center text-dark"><a href="{% url 'biotime:login' %}"
                                                        class="text-warning text-underline">{% trans "back_to_login" %}</a>
                    </p>
                </div>
            </div>

        </div>
    </div>
</div>
{% endblock main %}
{% block page_script %}
    <script>
        var userInput = document.getElementById("pwd");

        userInput.onfocus = function () {
            document.getElementById("message").style.display = "block";
        };

        userInput.onblur = function () {
            document.getElementById("message").style.display = "none";
        };

        userInput.onkeyup = function () {
            // Validate lowercase letters
            var lowerCaseLetters = /[a-z]/g;
            if (myInput.value.match(lowerCaseLetters)) {
                letter.classList.remove("invalid");
                letter.classList.add("valid");
            } else {
                letter.classList.remove("valid");
                letter.classList.add("invalid");
            }

            // Validate capital letters
            var upperCaseLetters = /[A-Z]/g;
            if (myInput.value.match(upperCaseLetters)) {
                capital.classList.remove("invalid");
                capital.classList.add("valid");
            } else {
                capital.classList.remove("valid");
                capital.classList.add("invalid");
            }

            // Validate numbers
            var numbers = /[0-9]/g;
            if (myInput.value.match(numbers)) {
                number.classList.remove("invalid");
                number.classList.add("valid");
            } else {
                number.classList.remove("valid");
                number.classList.add("invalid");
            }
            // Validate length
            if (myInput.value.length >= 8) {
                length.classList.remove("invalid");
                length.classList.add("valid");
            } else {
                length.classList.remove("valid");
                length.classList.add("invalid");
            }
        };

        function user_login() {
            window.location.href = "{% url 'biotime:login' %}";
        }

        function viewPassword(id) {
            var input = document.getElementById(id);
            var icon_id = id + "_icon";
            var icon = document.getElementById(icon_id);
            var input_type = input.getAttribute("type");


            if (input_type == 'password') {
                input.setAttribute("type", "text");
                icon.setAttribute("class", "fa fa-eye zk-pwd");
            } else {
                input.setAttribute("type", "password");
                icon.setAttribute("class", "fa fa-eye-slash zk-pwd");
            }
        }
    </script>
{% endblock page_script %}