{% extends "../body.html" %}
{% load util %}
{% load static %}
{% block content %}
    <div class="aw-login">
        {% if form.errors %}
            {% for field in form %}
                {% for error in field.errors %}
                    <div class="alert alert-danger">
                        <strong>{{ error|escape }}</strong>
                    </div>
                {% endfor %}
            {% endfor %}
            {% for error in form.non_field_errors %}
                <div class="alert alert-danger">
                    <strong>{{ error|escape }}</strong>
                </div>
            {% endfor %}
        {% endif %}
        <form method="post">
            {% csrf_token %}
            <div>
                <fieldset class="module aligned wide">
                    <div class="form-row">
                        <div class="flex-container">
                            <label for="id_old_password">Current Password:</label>
                            <input class="form-control" type="password" name="old_password" autocomplete="current-password" autofocus required id="id_old_password">
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="flex-container">
                            <label for="id_new_password1">New Password:</label>
                            <input class="form-control" type="password" name="new_password1" autocomplete="new-password" required id="id_new_password1">
                        </div>
                        <div class="aw-responsive-med help" id="id_new_password1_helptext">
                            <ul>
                                <li>Your password can’t be too similar to your other personal information.</li>
                                <li>Your password can’t be a commonly used password.</li>
                                <li>Your password can’t be entirely numeric.</li>
                                <li>Your password must contain at least 10 characters.</li>
                            </ul>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="flex-container">
                            <label for="id_new_password2">New Password - repeat:</label>
                            <input class="form-control" type="password" name="new_password2" autocomplete="new-password" required id="id_new_password2">
                        </div>
                    </div>
                </fieldset>
                <div class="submit-row">
                    <button type="submit" value="Change my password" class="btn btn-secondary"
{% if request.user.username == 'demo' %}
                        disabled
{% endif %}
                    >Change</button>
                </div>
            </div>
        </form>
    </div>
{% endblock %}