{% extends '@App/base.html.twig' %}
{% block title %}
    Reset Password
{% endblock %}
{% block body %}
    <div class="row">
        <div class="col-xs-12">
            <div class="widget">
                <div class="row">
                    <div class="col-xs-12 col-md-6 push-md-3">
                        <form method="post" id="reset_password_form">
                            <div style="color: red; display: none;" id="reset_error"></div>
                            <div id="password_form_group" class="form-group bmd-form-group">
                                <label class="bmd-label-floating" for="password">Password</label>
                                <input type="password" class="form-control" id="password" name="password" required/>
                                <span class="bmd-help">Please enter your password</span>
                            </div>
                            <div id="confirm_password_form_group" class="form-group bmd-form-group">
                                <label class="bmd-label-floating" for="confirm_password">Confirmation Password</label>
                                <input type="password" class="form-control" id="confirm_password"
                                       name="confirm_password" required/>
                                <span class="bmd-help">Please confirm your password</span>
                            </div>
                            <br/>
                            <div class="form-group">
                                <input type="button" id="reset_submit" class="btn btn-primary" value="Reset Password"/>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block javascripts %}
    <script type="text/javascript">
        $('body').on('click', '#reset_submit', function () {
            var password        = $('#password').val();
            var confirmPassword = $('#confirm_password').val();

            if (password == "") {
                show_error("No Password Entered");
                return;
            }

            if (confirmPassword == "") {
                show_error("No Confirmation Password Entered");
                return;
            }

            if (password !== confirmPassword) {
                show_error("Your Passwords Did Not Match");
                return;
            }

            $('#reset_password_form').submit();
        });

        function show_error (message) {
            $('#reset_error').css('display', 'block');
            $('#reset_error').html("<p>" + message + "</p>");
        }
    </script>
{% endblock %}