{# SPDX-FileCopyrightText: 2025-2026 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "user_base.html" %}
{% load i18n %}
{% load static %}
{% load socialaccount %}
{% load projectify %}
{% block title %}
    {% translate "Sign up - Projectify" %}
{% endblock title %}
{% block user_content %}
    <form class="flex flex-col gap-6 p-3"
          method="post"
          aria-labelledby="form-title">
        {% csrf_token %}
        <div class="flex flex-col gap-3">
            <h1 class="text-center text-4xl font-bold" id="form-title">{% trans "Sign up" %}</h1>
            <p class="text-center">{% trans "Sign up and start a free trial" %}</p>
        </div>
        <div class="flex flex-col gap-6">
            {{ form.email.as_field_group }}
            <section class="flex flex-col gap-2">
                {{ form.password.as_field_group }}
                <details class="cursor-pointer">
                    <summary class="font-bold">{% trans "Rules for choosing a safe password:" %}</summary>
                    <ul class="flex list-inside list-disc flex-col gap-0.5 pt-2">
                        {% for rule in validators %}<li>{{ rule }}</li>{% endfor %}
                    </ul>
                </details>
            </section>
            <label class="flex flex-row items-center gap-2"
                   for="{{ form.tos_agreed.id_for_label }}">
                {{ form.tos_agreed }}
                {{ form.tos_agreed.label }}
            </label>
            <label class="flex flex-row items-center gap-2"
                   for="{{ form.privacy_policy_agreed.id_for_label }}">
                {{ form.privacy_policy_agreed }}
                {{ form.privacy_policy_agreed.label }}
            </label>
            {% include "projectify/forms/submit.html" with text=_("Sign up") %}
        </div>
        {% include "user/_oauth_buttons.html" %}
        <div class="text-center">
            {% trans "Already have an account?" %}
            {% anchor "users:log-in" _("Log in here") %}
        </div>
    </form>
{% endblock user_content %}