{# SPDX-FileCopyrightText: 2025 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "dashboard_base.html" %}
{% load projectify %}
{% load rules %}
{% load i18n %}
{% partialdef breadcrumbs %}
    <div class="flex shrink flex-row items-center gap-6">
        <div class="shrink-0">
            {% if request.htmx %}
                <button type="button"
                        id="close-task-detail-button"
                        class="size-8 p-1.5 rounded-full border border-transparent hover:bg-secondary-hover active:bg-disabled"
                        aria-label="{% trans 'Close task details' %}">{% icon "x" %}</button>
            {% else %}
                {% circle_anchor label=_("Go back to project") icon_style="x" href="dashboard:projects:detail" project_uuid=task.section.project.uuid %}
            {% endif %}
        </div>
        {% include "workspace/task/breadcrumbs.html" with section=task.section task=task %}
    </div>
{% endpartialdef breadcrumbs %}
{% partialdef task_panel %}
    <table class="max-w-full container flex flex-col gap-x-2 gap-y-4 sm:grid sm:grid-cols-[auto_1fr]">
        <tbody class="contents">
            <tr class="contents">
                <th scope="row" class="text-left font-bold">{% trans "Task title" %}</th>
                <td class="flex flex-row gap-4 items-center">
                    {{ task.title }}
                    {% if can_update_task %}
                        {% circle_anchor label=_("Edit task title") icon_style="pencil" href="dashboard:tasks:update-focus-field" title=_("Edit task title") size=4 task_uuid=task.uuid focus_field="title" %}
                    {% endif %}
                </td>
            </tr>
            <tr class="contents">
                <th scope="row" class="text-left font-bold">{% trans "Assignee" %}</th>
                <td class="flex flex-row gap-2 items-center">
                    {% user_avatar task.assignee %}
                    <span class="truncate">{{ task.assignee|default:"No team member assigned" }}</span>
                    {% if can_update_task %}
                        {% circle_anchor label=_("Edit assignee") icon_style="pencil" href="dashboard:tasks:update-focus-field" title=_("Edit assignee") size=4 task_uuid=task.uuid focus_field="assignee" %}
                    {% endif %}
                </td>
            </tr>
            <tr class="contents">
                <th scope="row" class="text-left font-bold">{% trans "Labels" %}</th>
                <td class="gap-2 flex flex-row items-center">
                    <div class="flex flex-row flex-wrap items-center gap-x-1 gap-y-2">
                        {% for label in task.labels.all %}
                            <span class="min-w-0 rounded-2.5xl px-3 py-1 font-bold {{ label.bg_class }} {{ label.text_class }}"
                                  type="button"
                                  disabled="">{{ label.name }}</span>
                        {% endfor %}
                    </div>
                    {% if can_update_task %}
                        {% circle_anchor label=_("Edit labels") icon_style="pencil" href="dashboard:tasks:update-focus-field" title=_("Edit labels") size=4 task_uuid=task.uuid focus_field="labels" %}
                    {% endif %}
                </td>
            </tr>
            <tr class="contents">
                <th scope="row" class="text-left font-bold">{% trans "Due date" %}</th>
                <td class="flex flex-row gap-4 items-center">
                    {% if task.due_date %}
                        {{ task.due_date.date.isoformat }}
                    {% else %}
                        <p class="text-base-content">{% trans "No due date" %}</p>
                    {% endif %}
                    {% if can_update_task %}
                        {% circle_anchor label=_("Edit due date") icon_style="pencil" href="dashboard:tasks:update-focus-field" title=_("Edit due date") size=4 task_uuid=task.uuid focus_field="due_date" %}
                    {% endif %}
                </td>
            </tr>
            <tr class="contents">
                <th scope="row" class="text-left font-bold">{% trans "Description" %}</th>
                <td class="flex w-full flex-row items-start gap-4">
                    {% if task.description %}
                        <div class="prose trix-content">{{ task.description }}</div>
                    {% else %}
                        <p class="text-base-content">{% trans "No description" %}</p>
                    {% endif %}
                    {% if can_update_task %}
                        {% circle_anchor label=_("Edit description") icon_style="pencil" href="dashboard:tasks:update-focus-field" title=_("Edit description") size=4 task_uuid=task.uuid focus_field="description" %}
                    {% endif %}
                </td>
            </tr>
        </tbody>
    </table>
{% endpartialdef task_panel %}
{% partialdef task_inline %}
    {% has_perm "workspace.update_task" user task.workspace as can_update_task %}
    <main id="main" class="min-w-0 grow flex h-full flex-col p-4 py-8 gap-8">
        {% partial breadcrumbs %}
        {% if can_update_task %}
            {% go_to_action "dashboard:tasks:update" label=_("Edit task") title=_("Edit this task") task_uuid=task.uuid %}
        {% endif %}
        <div class="flex flex-col gap-8">{% partial task_panel %}</div>
    </main>
{% endpartialdef task_inline %}
{% block dashboard_content %}
    {% has_perm "workspace.update_task" user task.workspace as can_update_task %}
    <main id="main" class="min-w-0 grow flex h-full flex-col p-4 pt-0">
        <div class="sticky top-0 flex flex-row flex-wrap items-center justify-between gap-x-2 gap-y-4 bg-foreground pb-8 pt-4 lg:flex-nowrap">
            {% partial breadcrumbs %}
            <div class="flex items-center justify-between gap-4 sm:flex-row">
                {% if can_update_task %}
                    {% go_to_action "dashboard:tasks:update" label=_("Edit") title=_("Edit this task") task_uuid=task.uuid %}
                {% endif %}
                {% circle_anchor label=_("Task menu") title=_("Open task context menu") icon_style="dots-vertical" href="dashboard:tasks:actions" task_uuid=task.uuid %}
            </div>
        </div>
        {% partial task_panel %}
    </main>
{% endblock dashboard_content %}