{# SPDX-FileCopyrightText: 2025 JWP Consulting GK #}
{# SPDX-License-Identifier: AGPL-3.0-or-later #}
{% extends "dashboard_base.html" %}
{% load projectify %}
{% load rules %}
{% load i18n %}
{% 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">
            <div class="flex shrink flex-row items-center gap-6">
                <div class="shrink-0">
                    <a href="{% url "dashboard:projects:detail" task.section.project.uuid %}"
                       class="block w-8 h-8 p-1.5 rounded-full border border-transparent text-base-content hover:bg-secondary-hover active:bg-disabled-background"
                       aria-label="{% trans 'Go back to section' %}">{% icon "x" %}</a>
                </div>
                {% include "workspace/task/breadcrumbs.html" with section=task.section task=task %}
            </div>
            <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>
        <div class="flex flex-col gap-8">
            <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>
        </div>
    </main>
{% endblock dashboard_content %}