<!--
ARCHES - a program developed to inventory and manage immovable cultural heritage.
Copyright (C) 2013 J. Paul Getty Trust and World Monuments Fund

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
{% load static %} {% load i18n %} {% block loading_mask %} {% endblock loading_mask %} {% block body %}

    <!-- LOGIN FORM -->

    <div class="change-password-form panel panel-default">
    <div class="panel-heading">{% trans "Change your password" %}</div>
            <div class="panel-body">
                <form action="?next={{ next }}" method='POST' {% if auth_failed %} autocomplete="off" {% endif %}>
                    {% csrf_token %}
                    <div class="form-group">

                        <div>
                            <input type="password" class="form-control input-lg" placeholder="Old Password" data-bind="textInput:credentials.old_password" name='old_password' autofocus>
                            <div class="error-message" data-bind="text:invalidPassword"></div>
                        </div>

                        <div>
                            <input type="password" class="form-control input-lg mar-top" placeholder="New Password" data-bind="textInput:credentials.new_password" name='new_password1'>
                            <div class="error-message-container" data-bind="foreach: validationErrors">
                                <div data-bind="text: $data" class="error-message"></div>
                            </div>
                        </div>

                        <div>
                            <input type="password" class="form-control input-lg mar-top" placeholder="Confirm New Password" data-bind="textInput:credentials.new_password2" name='new_password2'>
                            <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>
                        <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>



                </form>
            </div>
        </div>
            </div>
{% endblock body %}
