{% extends "tasks/base.html" %}
{% load static tasks_tags %}

{% block title %}{{ project.name }} — Kanban{% endblock %}
{% block topbar_title %}{{ project.name }}{% endblock %}

{% block topbar_actions %}
<span id="project-progress" class="s-badge s-badge-blue">{{ project.progress_percentage }}%</span>
{% if request.user|has_perm:"create_task" %}
<a href="{% url 'task_management:task_create' project.id %}?next=kanban" class="s-btn s-btn-primary s-btn-sm">+ Task</a>
{% endif %}
{% endblock %}

{% block content %}
<div class="s-tabs">
    <a href="{% url 'task_management:project_detail' project.id %}" class="s-tab">Overview</a>
    <a href="{% url 'task_management:project_kanban' project.id %}" class="s-tab active">Kanban</a>
    <a href="{% url 'task_management:project_gantt' project.id %}" class="s-tab">Gantt</a>
    <a href="{% url 'task_management:document_request_list' project.id %}" class="s-tab">Docs</a>
    <a href="{% url 'task_management:asset_request_list' project.id %}" class="s-tab">Assets</a>
</div>

<div class="kanban-container">
    {% for status in kanban_statuses %}
    <div class="kanban-column">
        <div class="kanban-col-header">
            <div class="kanban-col-title">
                {% kanban_column_icon status %}
                {% kanban_column_label status %}
            </div>
            <span class="kanban-col-count">{{ tasks_by_status|get_item:status|length }}</span>
        </div>
        <div class="kanban-col-body" data-status="{{ status }}">
            {% for task in tasks_by_status|get_item:status %}
            <div class="kanban-card" data-task-id="{{ task.id }}" draggable="true">
                <div class="kanban-card-priority" style="background:{{ task.priority|priority_color }};"></div>
                <a href="{% url 'task_management:task_detail' task.id %}" class="kanban-card-title" style="text-decoration:none;display:block;">{{ task.title }}</a>
                <div class="kanban-card-meta">
                    <div class="s-avatar-group">
                        {% for user in task.assigned_to.all %}
                        <div class="s-avatar s-avatar-sm" style="background:{{ user|avatar_color }};" title="{{ user.get_full_name }}">{{ user|initials }}</div>
                        {% empty %}
                        <span style="font-size:9px;color:var(--s-text3);">Unassigned</span>
                        {% endfor %}
                    </div>
                    {% if task.due_date %}
                    <div class="kanban-card-due {% if task.is_overdue %}overdue{% endif %}">
                        📅 {{ task.due_date|date:"d M" }}
                    </div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'tasks/js/kanban.js' %}"></script>
{% endblock %}