{# SPDX-FileCopyrightText: 2024-2026 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "dashboard_base.html" %}
{% load i18n %}
{% load projectify %}
{% load rules %}
{% block title %}
    {% blocktrans with title=project.title %}{{ title }} - Projectify{% endblocktrans %}
{% endblock title %}
{% block extrahead %}
    {{ block.super }}
    <script nonce="{{ csp_nonce }}">
        function hideTaskDetailPanel() {
            const panel = document.getElementById('task-detail-panel');
            if (!panel) {
                throw new Error("Couldn't find task-detail-panel");
            }
            panel.textContent = '';
        }

        function attachCloseButtonListener(e) {
            if (e.detail.target.id !== 'task-detail-panel') {
                return;
            }
            const closeButton = document.getElementById('close-task-detail-button');
            if (!closeButton) {
                throw new Error("Couldn't find close-task-detail-button");
            }
            closeButton.addEventListener('click', hideTaskDetailPanel);
        }

        function checkScreenSize(e) {
            // Check if this is a request to load task details
            const target = e.detail.target;
            if (!target || target.id !== 'task-detail-panel') {
                return;
            }
            // lg breakpoint in tailwind is 1024
            // https://v3.tailwindcss.com/docs/responsive-design
            if (window.innerWidth >= 1024) {
                return;
            }
            // cancel and navigate to task instead
            e.preventDefault();
            window.location.href = e.detail.requestConfig.path;
        }

        function toggleTaskMenu(event) {
            const anchor = event.target.closest('[data-task-menu-toggle]');
            if (!anchor) {
                return;
            }
            const taskUuid = anchor.dataset.taskMenuToggle;
            const menu = document.getElementById(`task-${taskUuid}-menu`);
            if (!menu) {
                throw new Error(`Couldn't find task menu for task ${taskUuid}`);
            }
            if (menu.classList.contains('hidden')) {
                return;
            }
            event.preventDefault();
            menu.classList.add('hidden');
            menu.textContent = '';
        }

        document.addEventListener('htmx:afterSwap', attachCloseButtonListener);
        document.addEventListener('htmx:beforeRequest', checkScreenSize);
        document.addEventListener('htmx:beforeRequest', toggleTaskMenu);
    </script>
{% endblock extrahead %}
{% partialdef quick_add_task %}
    <form hx-post="{% url 'dashboard:projects:detail' project.uuid %}"
          hx-target="#project-tasks"
          hx-swap="outerHTML"
          hx-disabled-elt="find button"
          class="flex flex-row gap-2 items-center">
        {% csrf_token %}
        {{ quick_add_task.title }}
        {% include "workspace/common/loading_spinner.html" %}
        <div class="shrink">
            {% include "projectify/forms/submit.html" with name="action" value="quick_add_task" text=_("Add task") %}
        </div>
    </form>
{% endpartialdef quick_add_task %}
{% partialdef task_done %}
    <button type="submit"
            name="action"
            value="mark_task_done"
            class="shrink-0 size-6 flex items-center justify-center rounded border-2 transition-colors {% if task.done %}bg-primary border-primary text-primary-content{% else %}border-border hover:border-primary{% endif %} disabled:opacity-50 disabled:cursor-not-allowed"
            aria-label="{% if task.done %}{% translate 'Mark task as not done' %}{% else %}{% translate 'Mark task as done' %}{% endif %}"
            title="{% if task.done %}{% translate 'Mark task as not done' %}{% else %}{% translate 'Mark task as done' %}{% endif %}">
        {% if task.done %}
            {% icon "check" size=4 color="white" %}
        {% endif %}
    </button>
{% endpartialdef task_done %}
{% partialdef taskrow %}
    <tr class="flex w-full flex-wrap items-center gap-1 rounded-lg border border-border p-3 lg:contents"
        id="task-{{ task.uuid }}-row"
        aria-labelledby="task-{{ task.uuid }}-title"
        x-data="{ menuOpen: false }">
        <td class="flex flex-row items-center gap-2">
            {% if can_update_task %}
                <form action="{% url 'dashboard:projects:detail' project.uuid %}"
                      method="post"
                      hx-post="{% url 'dashboard:projects:detail' project.uuid %}"
                      hx-target="#project-tasks"
                      hx-swap="outerHTML"
                      hx-disabled-elt="find button"
                      class="flex">
                    <input type="hidden" name="task_uuid" value="{{ task.uuid }}">
                    <input type="hidden"
                           name="done"
                           value="{% if task.done %}false{% else %}true{% endif %}">
                    {% csrf_token %}
                    {% partial task_done %}
                </form>
            {% else %}
                <div class="shrink-0 size-6 flex items-center justify-center rounded border-2 {% if task.done %}bg-primary border-primary text-primary-content{% else %}border-border{% endif %}"
                     aria-hidden="true">
                    {% if task.done %}
                        {% icon "check" size=4 color="white" %}
                    {% endif %}
                </div>
            {% endif %}
            <a href="{% url 'dashboard:tasks:detail' task.uuid %}"
               hx-get="{% url 'dashboard:tasks:detail' task.uuid %}"
               hx-target="#task-detail-panel"
               hx-swap="innerHTML"
               class="flex flex-row items-start items-center min-w-0 gap-1 self-start sm:gap-6 lg:self-center {% if task.done %}line-through opacity-60{% endif %}">
                <span class="line-clamp-3 justify-self-start hover:text-primary lg:line-clamp-1 lg:h-6"
                      id="task-{{ task.uuid }}-title">{{ task.title }}</span>
            </a>
        </td>
        <td class="flex ml-auto gap-2 items-center">
            {% if can_update_task %}
                {# TODO in AT, say "currently assigned to ..." #}
                {% user_avatar task.assignee %}
                <a aria-label="{% translate "Task menu" %}"
                   href="{% url "dashboard:tasks:actions" task.uuid %}"
                   class="size-8 p-1.5 rounded-full border border-transparent hover:bg-secondary-hover active:bg-disabled"
                   hx-get="{% url "dashboard:tasks:actions" task.uuid %}"
                   hx-target="#task-{{ task.uuid }}-menu"
                   hx-swap="outerHTML"
                   data-task-menu-toggle="{{ task.uuid }}">{% icon "dots-horizontal" %}</a>
            {% else %}
                <div class="flex flex-row items-center gap-1">{% user_avatar task.assignee %}</div>
            {% endif %}
        </td>
    </tr>
    <tr id="task-{{ task.uuid }}-menu" class="hidden"></tr>
{% endpartialdef taskrow %}
{% partialdef project_tasks %}
    {% has_perm "workspace.create_task" user project.workspace as can_create_task %}
    {% has_perm "workspace.update_task" user project.workspace as can_update_task %}
    <div id="project-tasks"
         class="bg-foreground flex flex-col py-2 px-4 gap-2">
        <div class="flex shrink-0 flex-row items-center justify-between gap-1">
            <h1 class="truncate font-bold">{{ project.title }}</h1>
            {% if can_create_task %}
                {% go_to_action href="dashboard:projects:create-task" label=_("Add task") style="secondary" icon_style="plus" project_uuid=project.uuid %}
            {% endif %}
        </div>
        <table aria-label="{% blocktranslate with title=project.title %}{{ title }} tasks{% endblocktranslate %}"
               class="flex flex-col gap-2 lg:grid lg:grid-cols-[1fr_max-content] lg:gap-1 lg:items-center">
            <thead class="sr-only">
                <th class="sr-only">{% translate "Task title" %}</th>
                <th class="sr-only">{% translate "Task actions" %}</th>
            </thead>
            <tbody class="contents">
                {% for task in project.task_set.all %}
                    {% partial taskrow %}
                {% empty %}
                    <tr class="contents">
                        <td class="lg:col-span-3">
                            {% translate "No tasks in this project." %}
                            {% if can_create_task %}
                                {% anchor 'dashboard:tasks:create' label=_("Add a task here") project_uuid=project.uuid %}
                            {% endif %}
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
        {% if can_create_task %}
            {% partial quick_add_task %}
        {% endif %}
    </div>
{% endpartialdef project_tasks %}
{% block dashboard_content %}
    <main id="main"
          class="min-w-0 grow flex flex-col items-center gap-4 bg-background py-4">
        <div class="flex w-full grow flex-col gap-4 md:p-2">{% partial project_tasks %}</div>
    </main>
    {# djlint:off #}
    <aside id="task-detail-panel"
           class="hidden lg:block lg:empty:hidden lg:fixed lg:top-20 lg:right-0 lg:bottom-20 lg:w-1/3 lg:max-w-2xl overflow-y-auto bg-foreground border border-border"></aside>
    {# djlint:on #}
{% endblock dashboard_content %}