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

{% block title %}Timeline — ClientPortal{% endblock %}
{% block topbar_title %}Project Timeline{% endblock %}

{% block content %}
<div class="section-header">
    <div class="section-title">Project Timeline</div>
    <div class="section-sub">Visual overview of all project tasks, phases, and current progress.</div>
</div>

<div class="card card-padded">
    <div class="card-header">
        <div>
            <div class="card-title">Gantt Chart — {{ project.start_date|date:"Y" }}</div>
            <div class="card-sub">{{ project.start_date|date:"M" }} → {{ project.end_date|date:"M Y" }} · {{ project.total_tasks_count }} task{{ project.total_tasks_count|pluralize }}</div>
        </div>
    </div>

    <div class="gantt-legend">
        <div class="gantt-legend-item"><div class="gantt-legend-dot" style="background:#10b981;"></div> Completed</div>
        <div class="gantt-legend-item"><div class="gantt-legend-dot" style="background:#3b82f6;"></div> In Progress</div>
        <div class="gantt-legend-item"><div class="gantt-legend-dot" style="background:#ef4444;"></div> Delayed</div>
        <div class="gantt-legend-item"><div class="gantt-legend-dot" style="background:#94a3b8;"></div> Upcoming</div>
    </div>

    {% if tasks %}
    <div class="gantt-wrap">
        <div style="min-width:760px;">
            <!-- Month headers -->
            <div style="display:flex;">
                <div style="width:200px;flex-shrink:0;"></div>
                <div style="flex:1;display:flex;border-bottom:1px solid var(--border);margin-bottom:4px;">
                    {% for month in months %}
                    <div style="flex:{{ month.days }};text-align:center;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text3);padding:6px 0;border-left:1px solid var(--border);">
                        {{ month.name }}
                    </div>
                    {% endfor %}
                </div>
            </div>

            <!-- Task rows -->
            <div style="border:1px solid var(--border);border-radius:10px;overflow:hidden;">
                {% for task in tasks %}
                <div style="display:flex;align-items:center;border-bottom:1px solid var(--border);min-height:48px;{% if forloop.counter|divisibleby:2 %}background:var(--surface2);{% else %}background:var(--surface);{% endif %}{% if forloop.last %}border-bottom:none;{% endif %}">
                    <div style="width:200px;flex-shrink:0;padding:10px 12px;border-right:1px solid var(--border);">
                        <div style="font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ task.name }}</div>
                        <div style="font-size:10px;color:var(--text3);margin-top:2px;">{{ task.team }}</div>
                    </div>
                    <div style="flex:1;position:relative;height:48px;">
                        {% if forloop.first %}
                        <div style="position:absolute;top:0;bottom:0;left:{{ today_pct }}%;width:1.5px;background:rgba(239,68,68,.5);z-index:1;"></div>
                        {% endif %}
                        <div class="gantt-bar {{ task.status }}"
                             style="left:{{ task.left_pct }}%;width:{{ task.width_pct }}%;min-width:6px;">
                            {% if task.width_pct > 6 %}{{ task.name }}{% endif %}
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% else %}
    <div class="empty-state">
        <div class="empty-state-icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path fill-rule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-.53 14.03a.75.75 0 001.06 0l3-3a.75.75 0 10-1.06-1.06l-1.72 1.72V8.25a.75.75 0 00-1.5 0v5.69l-1.72-1.72a.75.75 0 00-1.06 1.06l3 3z" clip-rule="evenodd"/></svg></div>
        <p>No tasks have been added to this project yet.</p>
    </div>
    {% endif %}
</div>
{% endblock %}