{# SPDX-FileCopyrightText: 2025 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "onboarding_base.html" %}
{% load i18n %}
{% block title %}
    {% translate "About you - Projectify" %}
{% endblock title %}
{% block onboarding_content %}
    <form method="post" class="flex shrink grow flex-col gap-16">
        {% csrf_token %}
        {% include "onboarding/common/form_description.html" with title=_("About you") text_1=_("Tell us your preferred name. You can also keep it empty and continue by clicking the button below.") %}
        {{ form }}
        {% include "projectify/forms/submit.html" with text=_("Continue") %}
    </form>
{% endblock onboarding_content %}
{% block onboarding_preview %}
    <h1 class="w-full overflow-hidden text-ellipsis text-center text-4xl font-bold">
        {% translate "Welcome" as welcome %}
        <span id="welcome-message">
            {% if user.preferred_name %}
                {% blocktrans with name=user.preferred_name %}Welcome, {{ name }}{% endblocktrans %}
            {% else %}
                {{ welcome }}
            {% endif %}
        </span>👋
    </h1>
    <script nonce="{{ csp_nonce }}">
        (() => {
            const nameInput = document.querySelector('input[name="preferred_name"]');
            if (!nameInput) { return; }
            const welcomeMessage = document.getElementById('welcome-message');
            if (!welcomeMessage) { return; }
            const defaultMessage = '{{ welcome }}';
            nameInput.addEventListener('input', (event) => {
                const name = event.target.value.trim();
                if (!name) {
                    welcomeMessage.textContent = defaultMessage;
                    return;
                }
                welcomeMessage.textContent = `${defaultMessage}, ${name}`;
            });
        })();
    </script>
{% endblock onboarding_preview %}