{% 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 %}

{% 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 %}