{% 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">
        <h1 class="text-center">
            {% if token_fail %}
                {% trans "Bad Token" %}
            {% else %}
                {% trans "Change Password" %}
            {% endif %}
        </h1>
        <div class="col-md-4 col-md-offset-4 col-lg-4 col-lg-offset-4">
            {% if token_fail %}
                {% url 'account_reset_password' as passwd_reset_url %}
                <p>
                    The password reset link was invalid, possibly because it has already been used.
                    <a href="{{ passwd_reset_url }}">Try again</a>.
                </p>
            {% else %}
                {% if form %}
                    <form method="post" action="{{ action_url }}">
                        {% csrf_token %}
                        <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="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>
                        <input type="submit"
                               class="btn btn-primary pull-right"
                               name="action"
                               value='{% trans "Change Password" %}' />
                    </form>
                {% else %}
                    <p>{% trans "Your password is now changed!" %}</p>
                {% endif %}
            {% endif %}
        </div>
    </div>
{% endblock content %}