{% extends app.fronthtml~"/base.twig" %}
{% block content %}
    <h4 style="text-align: center" xmlns="http://www.w3.org/1999/html">{{ user.nick }}</h4>
    <div class="container">
        <div class="row">
            <p class="col-md-1"><strong>Nickname</strong></p>
            <p class="col-md-11">{{ user.nick }}</p>
        </div>
        <div class="row">
            <p class="col-md-1"><strong>Email</strong></p>
            <p class="col-md-11">{{ user.email }}</p>
        </div>
        <hr/>
    </div>
    <div class="container">
        {% if page.status == 1 %}
            <p class="text-success">Password updated successfully</p>
        {% elseif page.status == 2 %}
            <p class="text-danger">Old password incorrect</p>
        {% endif %}
        <div class="row">
            <h5 class="col-sm-offset-1">Change password</h5>
        </div>
        <div class="row">
            <form class="form-horizontal" method="post">
                <div class="form-group">
                    <label class="control-label col-sm-2" for="passact">Current password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" required="required" name="passact" id="passact" placeholder="Current password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="newpass">New password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" required="required" name="newpass" id="newpass" onchange="onPasswordChange()" placeholder="New password">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="newpass-re">Repeat new password:</label>
                    <div class="col-sm-10">
                        <input type="password" class="form-control" required="required" name="newpass-re" id="newpass-re" onchange="onPasswordChange()" placeholder="Repear new 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>
    </div>
{% endblock %}

{% block js %}
    <script>
        function onPasswordChange() {
            if($("#newpass-re").val()!=$("#newpass").val()){
                $("#newpass-re")[0].setCustomValidity('Passwords do not match');
            }else{
                $("#newpass-re")[0].setCustomValidity('');
            }
        }

    </script>
{% endblock %}