{% load static %} {% load i18n %} {% block loading_mask %} {% endblock loading_mask %} {% block body %}

    <!-- LOGIN FORM -->

    <fieldset class="change-password-form panel panel-default">
        <legend class="panel-heading">{% trans "Change your password" %}</legend>
        <div class="panel-body">
            <form action="?next={{ next }}" method='POST' {% if auth_failed %} autocomplete="off" {% endif %}>
                {% csrf_token %}
                <div class="form-group">
                    <div class="input-group" style="margin-bottom: 1.2em;">
                        <div class="floating-label-group">
                            <input type="password" class="form-control input-lg floating-label-input change-password mar-top" data-bind="textInput:credentials.old_password" id="old_password" name='old_password' autofocus required>
                            <label class="floating-label change-password" for="old_password">{% trans "Old Password" %}</label>
                        </div>
                        <div class="error-message" data-bind="text:invalidPassword"></div>
                    </div>

                    <div class="input-group" style="margin-bottom: 1.2em;">
                        <div class="floating-label-group">
                            <input type="password" class="form-control input-lg floating-label-input change-password mar-top" data-bind="textInput:credentials.new_password" id="new_password1" name='new_password1' required>
                            <label class="floating-label change-password" for="new_password1">{% trans "New Password" %}</label>
                        </div>
                        <div class="error-message-container" data-bind="foreach: validationErrors">
                            <div data-bind="text: $data" class="error-message"></div>
                        </div>
                    </div>

                    <div class="input-group" style="margin-bottom: 1.2em;">
                        <div class="floating-label-group">
                            <input type="password" class="form-control input-lg floating-label-input change-password mar-top" data-bind="textInput:credentials.new_password2" id="new_password2" name='new_password2' required>
                            <label class="floating-label change-password" for="new_password2">{% trans "Confirm New Password" %}</label>
                        </div>
                        <div data-bind="text:mismatchedPasswords" class="error-message"></div>
                    </div>

                    <div class="mar-top mar-btm pull-right change-password-buttons">
                        <button class="btn btn-danger" data-bind="click: toggleChangePasswordForm">{% trans "Cancel" %}</a>
                        <button class="btn btn-primary" data-bind="click: changePassword">{% trans "Change Password" %}</button>
                    </div>
                    {% if validation_help %}
                    <div class="password-rules mar-top">
                        {% trans 'Your password must:' %}
                        <ul class="list-unstyled">
                            {% for message in validation_help %}
                            <li class="password-rule"><i class="ion-checkmark-circled"></i><span>{{ message }}</span></li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>  
            </form>
        </div>
    </feildset>
{% endblock body %}
