{% extends 'outer_base.html' %}

{% block title %}Change Password{% endblock %}

{% block outer_base_content %}
    <!-- Jumbotron -->
    <section class="jumbotron text-center">
        <div class="container">
            <div class="jumbotron-text">
                <h1 class="jumbotron-heading">Change Password</h1>
                <p class="lead text-muted">Fill following required fields to change your password:</p>
            </div>
            {% if form.errors %}
                <div class="alert alert-danger">
                    <strong>Password change failed!</strong>
                    <ul class="text-left">
                        {% for error_type, error_list in form.errors.items %}
                            <li><p class="my-0">{% for error in error_list %}{{ error }}{% endfor %}</p>
                            </li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}

            <form method="post" class="form-accounts">
                {% csrf_token %}
                <div class="form-group text-left">
                    {{ form.old_password.label_tag }}
                    {{ form.old_password }}
                </div>
                <div class="form-group text-left">
                    {{ form.new_password1.label_tag }}
                    {{ form.new_password1 }}
                </div>
                <div class="form-group text-left">
                    {{ form.new_password2.label_tag }}
                    {{ form.new_password2 }}
                </div>
                <button class="btn btn-lg btn-primary btn-block" type="submit">Save</button>
            </form>
        </div>
    </section>
{% endblock %}

{% block outer_base_scripts %}
    <script>
        $(window).on('load', function () {
            var inputs = document.getElementsByTagName("INPUT");
            var i;
            for (i = 0; i < inputs.length; ++i) {
                inputs[i].classList.add("form-control");
            }
        })
    </script>
{% endblock %}