{% extends "base_m.html" %}
{% block js %} {% endblock %}

{% block title %}Change password{% endblock %}

{% block header %}<h1>Change password</h1>{% endblock %}

{% block content %}
{% if form %}
<p>When thinking of a new password you need to remember to use:</p>
<ul>
    <li>no fewer than ten characters</li>
    <li>at least one upper case and one lower case letter</li>
    <li>three or more numbers or special characters</li>
</ul>

    <p class="error">
        {{ form.non_field_errors }}
    </p>
    <form action="{% url changepw %}" method="post" autocomplete="off">{% csrf_token %}
    <table>
        <tr>
            <th class="formlabel">Username:</th><td>{{ username }}</td>
        </tr>
    {% for field in form %}
        <tr>
            <td class="fielderrors">{{ field.errors }}</td>
        </tr>
        <tr>
            <th class="formlabel">{{ field.label_tag }}</th><td class="formfield">{{ field }}</td><td><span class="password_strength"></span></td>
        </tr>
    {% endfor %}
    </table>
    <input type="submit" value="Submit" />
    </form>
    <script type="text/javascript">
        $('form').attr('autocomplete', 'off');
        $('#id_new_password').password_strength();
        $('#id_new_password_again').password_strength();
    </script>
{% else %}
    {% if return_value == 0 %}
        <p>Your password was changed successfully.</p>
    {% else %}
        <p>Something went wrong. Please contact an administrator.</p>
        <p>Return code: {{ return_value }}</p>
    {% endif %}
{% endif %}
{% endblock %}

{% block footer %}
<a href="{% url index %}" data-role="button" data-icon="back">Back</a>
<a href="{% url logout %}" rel="external" data-role="button" data-icon="delete">Log out</a>
{% endblock %}