{% extends "base.html" %}
{% block content %}
<div class="max-w-5xl mx-auto space-y-6">
  <div class="flex items-center justify-between mb-2">
    <h1 class="text-2xl font-bold tracking-tight text-slate-800">File Change Timeline</h1>
    <span class="text-xs text-slate-500 font-mono">Last {{ days }} days</span>
  </div>

  {% if rows %}
  {% set ns = namespace(total=0, created=0, modified=0, deleted=0) %}
  {% for r in rows %}
    {% set ns.total = ns.total + r.total_changes %}
    {% set ns.created = ns.created + r.created %}
    {% set ns.modified = ns.modified + r.modified %}
    {% set ns.deleted = ns.deleted + r.deleted %}
  {% endfor %}

  <div class="grid grid-cols-5 gap-4">
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-4 flex items-center gap-4">
      <div class="w-10 h-10 rounded-full bg-[#ff385c]/5 text-[#ff385c] flex items-center justify-center">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
      </div>
      <div>
        <div class="text-xl font-bold text-slate-800">{{ ns.total }}</div>
        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Total Changes</div>
      </div>
    </div>
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-4 flex items-center gap-4">
      <div class="w-10 h-10 rounded-full bg-emerald-50 text-emerald-600 flex items-center justify-center">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/></svg>
      </div>
      <div>
        <div class="text-xl font-bold text-emerald-600">{{ ns.created }}</div>
        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Created</div>
      </div>
    </div>
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-4 flex items-center gap-4">
      <div class="w-10 h-10 rounded-full bg-amber-50 text-amber-600 flex items-center justify-center">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/></svg>
      </div>
      <div>
        <div class="text-xl font-bold text-amber-600">{{ ns.modified }}</div>
        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Modified</div>
      </div>
    </div>
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-4 flex items-center gap-4">
      <div class="w-10 h-10 rounded-full bg-rose-50 text-rose-600 flex items-center justify-center">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15"/></svg>
      </div>
      <div>
        <div class="text-xl font-bold text-rose-600">{{ ns.deleted }}</div>
        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Deleted</div>
      </div>
    </div>
    <div class="bg-white border border-[#dddddd] rounded-[14px] p-4 flex items-center gap-4">
      <div class="w-10 h-10 rounded-full bg-[#ff385c]/5 text-[#ff385c] flex items-center justify-center">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg>
      </div>
      <div>
        <div class="text-xl font-bold text-slate-800">{{ rows|length }}</div>
        <div class="text-[11px] font-semibold text-slate-400 uppercase tracking-wider">Active Days</div>
      </div>
    </div>
  </div>

  <div class="bg-white border border-[#dddddd] rounded-[14px] overflow-hidden shadow-sm">
    <div class="px-5 py-3.5 bg-gray-50 border-b border-gray-150 flex items-center justify-between">
      <h2 class="text-xs font-bold text-slate-400 uppercase tracking-wider">Daily Breakdown</h2>
      <div class="flex items-center gap-3 text-[10px] font-mono text-slate-400">
        <span><span class="inline-block w-2 h-2 rounded bg-emerald-500 mr-1"></span>Created</span>
        <span><span class="inline-block w-2 h-2 rounded bg-amber-500 mr-1"></span>Modified</span>
        <span><span class="inline-block w-2 h-2 rounded bg-rose-500 mr-1"></span>Deleted</span>
      </div>
    </div>
    <div class="overflow-x-auto">
      <table class="w-full text-left text-xs font-mono border-collapse">
        <thead>
          <tr class="bg-gray-50 text-slate-500 border-b border-gray-150">
            <th class="px-6 py-2.5">Day</th>
            <th class="px-6 py-2.5">Changes</th>
            <th class="px-6 py-2.5">Created</th>
            <th class="px-6 py-2.5">Modified</th>
            <th class="px-6 py-2.5">Deleted</th>
            <th class="px-6 py-2.5">Files</th>
            <th class="px-6 py-2.5">Affected Files</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100">
          {% for r in rows %}
          <tr class="hover:bg-gray-50/50 transition-colors">
            <td class="px-6 py-3 text-slate-700 font-bold">{{ r.day }}</td>
            <td class="px-6 py-3 text-slate-700">{{ r.total_changes }}</td>
            <td class="px-6 py-3">
              {% if r.created > 0 %}
              <span class="text-emerald-600 font-semibold">+{{ r.created }}</span>
              {% else %}<span class="text-slate-300">0</span>{% endif %}
            </td>
            <td class="px-6 py-3">
              {% if r.modified > 0 %}
              <span class="text-amber-600 font-semibold">~{{ r.modified }}</span>
              {% else %}<span class="text-slate-300">0</span>{% endif %}
            </td>
            <td class="px-6 py-3">
              {% if r.deleted > 0 %}
              <span class="text-rose-600 font-semibold">-{{ r.deleted }}</span>
              {% else %}<span class="text-slate-300">0</span>{% endif %}
            </td>
            <td class="px-6 py-3 text-slate-500">{{ r.files_affected }}</td>
            <td class="px-6 py-3 text-slate-400 max-w-xs truncate" title="{{ r.file_paths|join(', ') }}">
              {% for p in r.file_paths[:3] %}
                <span class="text-[#ff385c]">{{ p.split('/')[-1] }}</span>{% if not loop.last %}, {% endif %}
              {% endfor %}
              {% if r.file_paths|length > 3 %}
                <span class="text-slate-400">+{{ r.file_paths|length - 3 }} more</span>
              {% endif %}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% else %}
  <div class="bg-white border border-[#dddddd] rounded-[14px] p-8 text-center text-slate-500">
    <p>No file changes recorded in the last {{ days }} days.</p>
  </div>
  {% endif %}
</div>
{% endblock %}