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

{% load i18n %}
{% load crispy_forms_tags %}
{% block pagetitle %}Change Password{% endblock %}

{% block inner %}
    <div class="auth-challenge-heading">
        <span class="auth-challenge-icon {% if token_fail %}auth-journey-icon-warning{% else %}auth-journey-icon{% endif %}" aria-hidden="true"><i class="fas {% if token_fail %}fa-exclamation-triangle{% else %}fa-key{% endif %}"></i></span>
        <div>
            <span class="auth-challenge-eyebrow">{% trans "Account recovery" %}</span>
            <h1 id="password-reset-key-heading">{% if token_fail %}{% trans "Reset link unavailable" %}{% else %}{% trans "Choose a new password" %}{% endif %}</h1>
            <p>{% if token_fail %}{% trans "Request a new link to continue password recovery." %}{% else %}{% trans "Choose a password that meets your organization’s requirements." %}{% endif %}</p>
        </div>
    </div>

    {% if token_fail %}
        {% url 'account_reset_password' as passwd_reset_url %}
        <div class="auth-journey-status auth-journey-status-warning" role="alert">
            <i class="fas fa-exclamation-circle" aria-hidden="true"></i>
            <p>{% blocktrans %}This password reset link is invalid or has already been used. Please request a <a href="{{ passwd_reset_url }}">new password reset</a>.{% endblocktrans %}</p>
        </div>
    {% else %}
        {% if form %}
            <form method="POST" action="." class="auth-journey-form" aria-labelledby="password-reset-key-heading">
                {% csrf_token %}
                {{ form|crispy }}
                <div class="auth-journey-actions">
                    <button class="btn btn-primary auth-challenge-submit" type="submit" name="action">
                        <i class="fas fa-key" aria-hidden="true"></i> {% trans "Change password" %}
                    </button>
                </div>
            </form>
        {% else %}
            <div class="auth-journey-status" role="status">
                <i class="fas fa-check-circle" aria-hidden="true"></i>
                <p>{% trans "Your password has been changed." %}</p>
            </div>
        {% endif %}
    {% endif %}
{% endblock %}