{% extends "account/_layout.html" %}

{% load i18n %}

{% block page_title %}{% trans "Change Password" %} | {{ block.super }}{% endblock %}

{% block main_content %}
  <div class="ui page stacked grid centered">
    <div class="ten wide column">
      <h1>{% if token_fail %}{% trans "Bad Token" %}{% else %}{% trans "Change Password" %}{% endif %}</h1>

      {% if token_fail %}
        {% url 'account_reset_password' as passwd_reset_url %}
        <div class="ui message red">
          <p>{% blocktrans %}The password reset link was invalid, possibly because it has already been used.  Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}</p>
        </div>
      {% else %}
        <div class="ui tall stacked segment">
          {% if form %}
            <form method="post" action="." class="ui form {% if form.errors %}error{% endif %}"">
              {% csrf_token %}

              <div class="field {% if form.errors.password1 %}error{% endif %}">
                {{ form.password1.label_tag }}
                {{ form.password1 }}

                {% if form.errors.password1 %}
                  <div class="ui pointing red basic label">
                    {% for error in form.errors.password1 %}
                      <p>{{ error }}</p>
                    {% endfor %}
                  </div>
                {% endif %}
              </div>

              <div class="field {% if form.errors.password2 %}error{% endif %}">
                {{ form.password2.label_tag }}
                {{ form.password2 }}

                {% if form.errors.password2 %}
                  <div class="ui pointing red basic label">
                    {% for error in form.errors.password2 %}
                      <p>{{ error }}</p>
                    {% endfor %}
                  </div>
                {% endif %}
              </div>

              <button type="submit" name="action" class="ui button primary">{% trans 'Change password' %}</button>
            </form>
          {% else %}
            <div class="ui messsage green">
              <p>{% trans 'Your password is now changed.' %}</p>
            </div>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
{% endblock %}
