{% 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">
            <ul class="nav nav-tabs" role="tablist">
                <li class="nav-item">
                    <a class="navbar-link active" href="#data" role="tab" data-toggle="tab">My information</a>
                </li>
                <li class="nav-item">
                    <a class="navbar-link" href="#saved" role="tab" data-toggle="tab">Saved codes</a>
                </li>
                <li class="nav-item">
                    <a class="navbar-link" href="#password" role="tab" data-toggle="tab">Change password</a>
                </li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane fade in active" id="data">
                    <div class="container">
                        <div class="row">
                            <h5 class="col-sm-offset-1">My information</h5>
                        </div>
                        <div class="row">
                            <p class="col-md-1 col-sm-offset-1"><strong>Nickname</strong></p>
                            <p class="col-md-10">{{ user.nick }}</p>
                        </div>
                        <div class="row">
                            <p class="col-md-1 col-sm-offset-1"><strong>Email</strong></p>
                            <p class="col-md-10">{{ user.email }}</p>
                        </div>
                        <hr/>
                    </div>
                </div>
                <div role="tabpanel" class="tab-pane fade" id="saved">
                    {% include app.fronthtml~'/saved.twig' %}
                </div>
                <div role="tabpanel" class="tab-pane fade" id="password">
                    <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>
                </div>
            </div>
        </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 %}