{% extends "base.html" %}
{% block title %}Project Timeline{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Project Timeline</li>
  </ol>
</nav>
{% endblock %}

{% block content %}
<div class="space-y-6">

  <div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
    <div>
      <h1 class="text-2xl font-bold">Project Timeline</h1>
      <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Gantt chart view of project schedules</p>
    </div>
  </div>

  <!-- Gantt Chart Section -->
  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 overflow-hidden">
    <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-600">
      <div class="flex items-center justify-between w-full">
        <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Timeline View</h3>
        <div class="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
          <i class="fas fa-eye"></i>
          <span>Read Only Mode</span>
        </div>
      </div>
    </div>
    <div class="w-full">
      {% if has_data %}
        {% include "components/gantt_chart.html" with gantt_data=gantt_data_json name_column_label="Project Name" is_project_timeline=True gantt_height=calculated_height %}
      {% else %}
      <div class="flex flex-col items-center justify-center h-64 text-gray-500 dark:text-gray-400 gap-4">
        <svg class="w-12 h-12 text-gray-300 dark:text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2m0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
        </svg>
        <h3 class="text-lg font-medium text-gray-500 dark:text-gray-400">No project data available</h3>
        <p class="text-sm text-gray-400 dark:text-gray-500">Add start and end dates to projects to view timeline</p>
      </div>
      {% endif %}
    </div>
  </div>

  <!-- Status Legend -->
  <div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 overflow-hidden">
    <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-600">
      <h3 class="text-sm font-semibold text-gray-900 dark:text-white">Status Legend</h3>
    </div>
    <div class="px-6 py-5">
      <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded" style="background-color: #3b82f6;"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">In Progress</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded" style="background-color: #10b981;"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Nearly Complete</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded" style="background-color: #f59e0b;"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Approaching Deadline</span>
        </div>
        <div class="flex items-center gap-2">
          <div class="w-3 h-3 rounded" style="background-color: #ef4444;"></div>
          <span class="text-sm text-gray-600 dark:text-gray-400">Overdue</span>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}