{% extends 'base.html' %}

{% block body %}

<section class='text-center'>
    <form method="post" class='loginform' action="app/controllers/ResetPasswordController.php">
        <span class='smallgray'>{{ constant('MIN_PASSWORD_LENGTH', App.Users.Auth) }} {{ 'characters minimum'|trans }}</span>
        <p>
            <!-- output the key and userid as hidden fields -->
            <input type="hidden" name="key" value="{{ key|e }}" />
            <input type="hidden" name="deadline" value="{{ deadline|e }}" />
            <input type="hidden" name="userid" value="{{ userid|e }}" />

            {# min pass length minimum, no maximum #}
            {% set pattern = '.{' ~ constant('MIN_PASSWORD_LENGTH', App.Users.Auth) ~ ',}' %}

            <label class='block' for='password'>{{ 'New password'|trans }}</label>
            <input id='password' type='password' pattern='{{ pattern }}' value='' name='password' required />

            <label class='block' for='cpassword'>{{ 'Type it again'|trans }}</label>
            <input id='cpassword' type='password' pattern='{{ pattern }}' value='' name='cpassword' required />
            <label class='block' for='complexity'>{{ 'Complexity'|trans }}</label>
            <input id='complexity' disabled />
            <div id="checkPasswordMatchDiv">
                <p>{{ 'The passwords do not match!'|trans }}</p>
            </div>
        </p>
    </form>
</section>

<div id='complexityDiv'
    data-weak='{{ 'Weak password'|trans }}'
    data-average='{{ 'Average password'|trans }}'
    data-good='{{ 'Good password'|trans }}'
    data-strong='{{ 'Strong password'|trans }}'
    data-wtf='{{ 'No way that is your real password!'|trans }}'></div>
<div id='passwordMatch'
    data-not='{{ 'The passwords do not match!'|trans }}'
    data-save='{{ 'Save new password'|trans }}'></div>

<script src='app/js/change-pass.min.js?v={{ v }}'></script>
<script src='app/js/register.min.js?v={{ v }}'></script>
{% endblock %}