{% extends "account/base_entrance.html" %}
{% load static i18n %}
{% load allauth account %}
{% load phoxtail_core_tags %}
{% block head_title %}
    {% if token_fail %}
        {% trans "Bad Token" %}
    {% else %}
        {% trans "Change Password" %}
    {% endif %}
{% endblock head_title %}
{% block extra_head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'phoxtail_core/css/account/password.css' %}">
{% endblock %}
{% block body %}
    {% if messages %}
        {% include "account/messages.html" %}
    {% endif %}
    <div class="auth-page">
        <div class="auth-container">
            <div class="auth-card">
                {% include "allauth/components/logo.html" %}
                <div class="auth-header">
                    <h1 class="auth-heading">
                        {% if token_fail %}
                            {% trans "Bad Token" %}
                        {% else %}
                            {% trans "Change Password" %}
                        {% endif %}
                    </h1>
                    {% if token_fail %}
                        <p class="auth-subtitle">
                            {% url 'account_reset_password' as passwd_reset_url %}
                            {% blocktrans %}
                                The password reset link was invalid, possibly because it has already been used. Please request a
                                <a href="{{ passwd_reset_url }}" class="auth-link">new password reset</a>.
                            {% endblocktrans %}
                        </p>
                    {% endif %}
                </div>
                {% if not token_fail %}
                    <form class="auth-form" method="post" action="{{ action_url }}">
                        {% csrf_token %}
                        {% if form.non_field_errors %}
                            {% for error in form.non_field_errors %}
                                <p class="auth-error">
                                    <span class="auth-error-dot"></span>
                                    {{ error }}
                                </p>
                            {% endfor %}
                        {% endif %}
                        {% for field in form %}
                            <div class="auth-field">
                                <label for="{{ field.id_for_label }}" class="auth-label">
                                    {{ field.label }}
                                    {% if field.field.required %}<span class="auth-required">*</span>{% endif %}
                                </label>
                                <div class="auth-input-wrapper">
                                    {{ field|add_class:"auth-input" }}
                                    <div class="auth-input-glow"></div>
                                    {% if field.errors %}
                                        <div class="auth-errors-block">
                                            {% for error in field.errors %}
                                                <p class="auth-error">
                                                    <span class="auth-error-dot"></span>
                                                    {{ error }}
                                                </p>
                                            {% endfor %}
                                        </div>
                                    {% endif %}
                                </div>
                            </div>
                        {% endfor %}
                        {{ redirect_field }}
                        <div class="auth-actions">
                            {% include "allauth/components/submit_button.html" with text_key="Change Password" button_type="submit" %}
                        </div>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock body %}