{% extends app.fronthtml~"/base.twig" %}
{% block content %}
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <p class="text-danger loginMessage" id="BAD_EMAIL">Email is not associated to this nick</p>
                <p class="text-danger loginMessage" id="NO_MATCH">Passwords not match</p>
            </div>
        </div>
    </div>
    <div id="register" style="">
        <form class="form-horizontal" method="post" id="restore">
            <div class="form-group">
                <label class="control-label"><strong>Restore your password {{ page.nick }}</strong></label>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="emailre">Email:</label>
                <div class="col-sm-10">
                    <input class="form-control" required="required" name="emailre" id="emailre" placeholder="Enter email" type="email">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwdre">Password:</label>
                <div class="col-sm-10">
                    <input class="form-control" required="required" name="pwdre" id="pwdre" placeholder="Enter password" type="password">
                </div>
            </div>
            <div class="form-group">
                <label class="control-label col-sm-2" for="pwdre-re">Repeat password:</label>
                <div class="col-sm-10">
                    <input class="form-control" required="required" name="pwdre-re" id="pwdre-re" placeholder="Repeat password" type="password">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="submit" class="btn btn-success">Submit</button>
                </div>
            </div>
        </form>

    </div>
{% endblock %}
{% block js %}
    <script>
        doneFun = function(data){
            console.log(data);
            if (data == 'UPDATE'){
                window.location.href = '{{path('home')}}';
            }
            var todos = $(".text-danger").each(function (){
                $(this).css("display","none");
            });
            $("#"+data).css('display',"block");
        };

        $(document).ready(function() {
            var options = {success: doneFun,
                url: '{{ path("restorePass", {'nick': page.nick, 'token': page.token, 'timestamp': page.timestamp })}}',
                beforeSubmit: function(arr, $form, options){
                    console.log(arr);
                }}  ;
            $("#restore").ajaxForm(options);
        });

        function checkPassword() {
            if ($('#pwdre').val() != $("#pwdre-re").val()) {
                $("#pwdre-re")[0].setCustomValidity('Password do not match');
            } else {
                $("#pwdre-re")[0].setCustomValidity('');
            }
            //console.log($('#pwdre').val());
        }

        document.getElementById("pwdre").onchange = checkPassword;
        document.getElementById("pwdre-re").onchange = checkPassword;

    </script>
{% endblock %}