{% extends "tasks/base.html" %}

{% block title %}{{ project.name }} — Gantt{% endblock %}
{% block topbar_title %}{{ project.name }}{% 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">Kanban</a>
    <a href="{% url 'task_management:project_gantt' project.id %}" class="s-tab active">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="s-card s-card-pad">
    <div class="s-card-header">
        <div>
            <div class="s-card-title">Timeline</div>
            <div class="s-card-sub">{{ project.start_date|date:"M Y" }} → {{ project.end_date|date:"M Y" }}</div>
        </div>
    </div>

    <div style="display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap;">
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--s-text2);"><div style="width:10px;height:10px;border-radius:2px;background:#10b981;"></div> Completed</div>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--s-text2);"><div style="width:10px;height:10px;border-radius:2px;background:#3b82f6;"></div> In Progress</div>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--s-text2);"><div style="width:10px;height:10px;border-radius:2px;background:#ef4444;"></div> Delayed</div>
        <div style="display:flex;align-items:center;gap:4px;font-size:11px;color:var(--s-text2);"><div style="width:10px;height:10px;border-radius:2px;background:#94a3b8;"></div> Upcoming</div>
    </div>

    <div class="gantt-wrap">
        <div style="min-width:700px;">
            <div style="display:flex;">
                <div style="width:180px;flex-shrink:0;"></div>
                <div style="flex:1;display:flex;border-bottom:1px solid var(--s-border);margin-bottom:3px;">
                    {% for month in months %}
                    <div style="flex:{{ month.days }};text-align:center;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--s-text3);padding:5px 0;border-left:1px solid var(--s-border);">
                        {{ month.name }}
                    </div>
                    {% endfor %}
                </div>
            </div>

            {% if tasks %}
            <div style="border:1px solid var(--s-border);border-radius:8px;overflow:hidden;">
                {% for task in tasks %}
                <div style="display:flex;align-items:center;border-bottom:1px solid var(--s-border);min-height:40px;{% if forloop.counter|divisibleby:2 %}background:var(--s-surface);{% else %}background:var(--s-bg);{% endif %}{% if forloop.last %}border-bottom:none;{% endif %}">
                    <div style="width:180px;flex-shrink:0;padding:8px 10px;border-right:1px solid var(--s-border);">
                        <div style="font-size:11px;font-weight:600;color:var(--s-navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ task.name }}</div>
                        <div style="font-size:9px;color:var(--s-text3);margin-top:1px;">{{ task.team }}</div>
                    </div>
                    <div style="flex:1;position:relative;height:40px;">
                        {% if forloop.first %}
                        <div style="position:absolute;top:0;bottom:0;left:{{ today_pct }}%;width:1.5px;background:rgba(239,68,68,.4);z-index:1;"></div>
                        {% endif %}
                        <div class="gantt-bar {{ task.status }}" style="left:{{ task.left_pct }}%;width:{{ task.width_pct }}%;min-width:4px;">
                            {% if task.width_pct > 8 %}{{ task.name }}{% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
            {% else %}
            <div class="s-empty"><p>No tasks with dates to display.</p></div>
            {% endif %}
        </div>
    </div>
</div>
{% endblock %}