{# SPDX-FileCopyrightText: 2025-2026 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "user_base.html" %}
{% load i18n %}
{% block title %}
    {% translate "Reset your password - Projectify" %}
{% endblock title %}
{% block user_content %}
    <form class="flex flex-col gap-12 p-3" method="post">
        <h1 class="text-center text-4xl font-bold">{% translate "Reset your password" %}</h1>
        <div class="flex flex-col gap-6">
            <section class="flex flex-col gap-2">
                {{ form.new_password.as_field_group }}
                <header class="font-bold">
                    {% trans "Rules for choosing a safe password:" %}
                </header>
                <ul class="flex list-inside list-disc flex-col gap-0.5">
                    {% for rule in validators %}<li>{{ rule }}</li>{% endfor %}
                </ul>
            </section>
            {{ form.new_password_confirm.as_field_group }}
            {% if form.non_field_errors %}
                <div class="prose">
                    {% for error in form.non_field_errors %}<p>{{ error }}</p>{% endfor %}
                </div>
            {% endif %}
            {% csrf_token %}
            <button type="submit"
                    class="w-full bg-primary text-primary-content hover:bg-primary-hover active:bg-primary-pressed text-base flex min-w-max flex-row justify-center gap-2 rounded-lg px-4 py-2 font-bold disabled:bg-disabled disabled:text-disabled-primary-content">
                {% translate "Reset password" %}
            </button>
            <div class="text-center">
                <a href="{% url "users:request-password-reset" %}"
                   class="text-primary underline hover:text-primary-hover active:text-primary-pressed text-base">{% translate "Request password reset again" %}</a>
            </div>
            <div class="text-center">
                <a href="{% url "users:log-in" %}"
                   class="text-primary underline hover:text-primary-hover active:text-primary-pressed text-base">{% translate "Return to log in" %}</a>
            </div>
        </div>
    </form>
{% endblock user_content %}