{# SPDX-FileCopyrightText: 2025-2026 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "onboarding_base.html" %}
{% load i18n %}
{% load projectify %}
{% block title %}
    {% translate "Add your first project - Projectify" %}
{% endblock title %}
{% block onboarding_content %}
    <form method="post" class="flex shrink grow flex-col gap-16">
        {% csrf_token %}
        <div class="flex flex-col gap-4">
            <h1 class="min-w-fit max-w-lg text-4xl font-bold">{% trans "Add your first project" %}</h1>
            <div class="flex flex-col gap-2 text-lg">
                {% if project %}
                    <p>
                        {% blocktrans %}It looks like you already have a project called "{{ project }}". Would you like to continue adding a task for it?{% endblocktrans %}
                    </p>
                    {% anchor href="onboarding:new_task" project_uuid=project.uuid label=_("Continue adding a task to this project") %}
                {% else %}
                    <p>{% trans "You can create unlimited projects per workspace." %}</p>
                    <p>{% trans "Projects help you to focus on different projects you may be working on." %}</p>
                {% endif %}
            </div>
        </div>
        {{ form }}
        {% include "projectify/forms/submit.html" with text=_("Continue") %}
    </form>
{% endblock onboarding_content %}
{% block onboarding_skip %}
    <form method="post" class="flex shrink grow flex-col gap-16">
        {% csrf_token %}
        {% action_button text=_("Skip onboarding") style="secondary" name="action" value="skip" %}
    </form>
{% endblock onboarding_skip %}
{% block onboarding_stepcounter %}
    {% include "onboarding/common/step_counter.html" with step=2 step_count=4 %}
{% endblock onboarding_stepcounter %}
{% block onboarding_preview %}
    <div class="flex flex-col gap-2">
        <div class="mx-4 px-4 flex items-center gap-2 font-bold border rounded p-2">
            {% icon "briefcase" size=4 %}
            <span class="max-w-xs truncate">{{ workspace.title }}</span>
        </div>
        <div class="mx-4 flex flex-row items-center justify-start text-utility gap-2">
            {% icon "folder" size=4 %}
            <div class="font-bold mr-auto">{% trans "Projects" %}</div>
            {% icon "chevron-up" size=4 %}
        </div>
        <div class="flex w-full flex-row items-center gap-1 px-4 py-1">
            {% icon "folder" size=4 %}
            {% translate "Your project" as project_title_default %}
            <div id="project-title" class="max-w-xs line-clamp-1 min-w-0 font-bold">{{ project_title_default }}</div>
        </div>
    </div>
    {# empty project contents #}
    <div class="grow mx-4 p-4 rounded-lg flex flex-col border border-border gap-6 truncate"></div>
    <script nonce="{{ csp_nonce }}">
        (() => {
            const titleInput = document.querySelector('input[name="title"]');
            if (!titleInput) { return; }
            const projectTitle = document.getElementById('project-title');
            if (!projectTitle) { return; }
            const defaultTitle = '{{ project_title_default }}';
            titleInput.addEventListener('input', (event) => {
                const title = event.target.value.trim();
                if (!title) {
                    projectTitle.textContent = defaultTitle;
                    return;
                }
                projectTitle.textContent = title;
            });
        })();
    </script>
{% endblock onboarding_preview %}