{% extends "base.html" %}
{% load i18n %}
{% block style %}
    <style>
    .inner-addon {
        position: relative;
    }

    .inner-addon .glyphicon {
        position: absolute;
        padding: 10px;
        pointer-events: none;
    }

    .left-addon .glyphicon {
        left: 0px;
    }

    .right-addon .glyphicon {
        right: 0px;
    }

    .left-addon input {
        padding-left: 30px;
    }

    .right-addon input {
        padding-right: 30px;
    }
    </style>
{% endblock style %}
{% block content %}
    <div class="row">
        <div class="panel-heading">
            <div class="panel-title text-center">
                <h1 class="text-center">{% trans "Change Password" %}</h1>
                <hr />
            </div>
        </div>
        <div class="col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
            <form method="post"
                  action="{% url 'account_change_password' %}"
                  class="password_change">
                {% csrf_token %}
                <div class="row main">
                    <div class="main-issue-form main-center">
                        <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
                            <i class="glyphicon glyphicon-lock"></i>
                            <input class="form-control"
                                   type="password"
                                   id="id_oldpassword"
                                   name="oldpassword"
                                   placeholder="Old Password">
                            <span class="help-block">{{ form.oldpassword.errors }}</span>
                        </div>
                        <div class="form-group inner-addon left-addon {% if form.password1.errors %}has-error{% endif %}">
                            <i class="glyphicon glyphicon-lock"></i>
                            <input class="form-control"
                                   type="password"
                                   id="id_password1"
                                   name="password1"
                                   placeholder="New Password">
                            <span class="help-block">{{ form.password1.errors }}</span>
                        </div>
                        <div class="form-group inner-addon left-addon {% if form.password2.errors %}has-error{% endif %}">
                            <i class="glyphicon glyphicon-lock"></i>
                            <input class="form-control"
                                   type="password"
                                   id="id_password2"
                                   name="password2"
                                   placeholder="Confirm Password">
                            <span class="help-block">{{ form.password2.errors }}</span>
                        </div>
                        <button type="submit"
                                class="btn btn-success pull-right text-black"
                                name="action">{% trans "Change Password" %}</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
{% endblock content %}