{% extends 'base.html' %}

{% block body %}

<section>
  <form method='post' class='form-group' action='app/controllers/ResetPasswordController.php'>

    <span class='smallgray'>{{ App.getMinPasswordLength }} {{ 'characters minimum'|trans }}</span>
    <!-- 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 = '.{' ~ App.getMinPasswordLength ~ ',}' %}

    <div class='row'>
      <div class='col-md-4'></div>
      <div class='form-group col-md-4'>
        <label for='password'>{{ 'New password'|trans }}</label>
        <input class='form-control' id='password' type='password' pattern='{{ pattern }}' value='' name='password' required />
      </div>
      <div class='col-md-4'></div>
    </div>

    <div class='row'>
      <div class='col-md-4'></div>
      <div class='form-group col-md-4'>
        <label for='cpassword'>{{ 'Type it again'|trans }}</label>
        <input class='form-control' id='cpassword' type='password' pattern='{{ pattern }}' value='' name='cpassword' required />
      </div>
      <div class='col-md-4'></div>
    </div>

    <div class='row'>
      <div class='col-md-4'></div>
      <div class='col-md-4' id='checkPasswordMatchDiv'>
        <p>{{ 'The passwords do not match!'|trans }}</p>
      </div>
      <div class='col-md-4'></div>
    </div>

  </form>
</section>

<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>
{% endblock %}