{% extends 'base.html' %}

{% block title %}Reset password{% endblock %}

{% block footer %}
    <script src="/js/hideShowPassword.min.js"></script>
    <script src="/js/app.js"></script>

    <script>
        $(document).ready(function() {

            /**
             * Validate the form
             */
            $('#formPassword').validate({
                rules: {
                    password: {
                        required: true,
                        minlength: 6,
                        validPassword: true
                    }
                }
            });


            /**
              * Show password toggle button
              */
            $('#inputPassword').hideShowPassword({
                show: false,
                innerToggle: 'focus'
            });
        });
    </script>

{% endblock %}

{% block body %}

    <h1>Reset password</h1>

    {% if user.errors is not empty %}
        <p>Errors:</p>
        <ul>
            {% for error in user.errors %}
                <li>{{ error }}</li>
            {% endfor %}
        </ul>
    {% endif %}

    <form method="post" id="formPassword" action="/password/reset-password">

        <input type="hidden" name="token" value="{{ token }}" />

        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" id="inputPassword" name="password" placeholder="Password" required class="form-control" />
        </div>

        <button type="submit">Reset password</button>

    </form>

{% endblock %}