{% extends "base.html" %}
{% block content %}
<div class="max-w-5xl mx-auto space-y-6">
  <div class="flex items-center justify-between mb-2 flex-wrap gap-3">
    <h1 class="text-2xl font-bold text-slate-800">Blame</h1>
  </div>

  <form action="/blame" method="get" class="airbnb-card p-4 flex items-center gap-3">
    <svg class="w-5 h-5 shrink-0 text-slate-400" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
    <input type="text" name="file_path" value="{{ file_path }}" placeholder="Enter file path (e.g. src/main.py)" class="flex-1 bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm font-mono text-slate-700 focus:outline-none focus:border-[#ff385c] focus:ring-1 focus:ring-[#ff385c]/20">
    <button type="submit" class="px-5 py-2 bg-[#ff385c] text-white text-sm font-bold rounded-lg hover:bg-[#e00b41] transition-colors">Blame</button>
  </form>

  {% if entries %}
  <div class="bg-white border border-[#dddddd] rounded-[14px] overflow-hidden shadow-sm">
    <div class="overflow-x-auto">
      <table class="w-full text-left text-xs border-collapse">
        <thead>
          <tr class="bg-gray-50 text-slate-500 uppercase tracking-wider text-[10px] font-sans font-bold border-b border-gray-150">
            <th class="px-3 py-2.5 w-14 text-right">Line</th>
            <th class="px-3 py-2.5 w-20">Type</th>
            <th class="px-3 py-2.5 w-24">Author</th>
            <th class="px-3 py-2.5 w-28">Date</th>
            <th class="px-3 py-2.5">Content</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-gray-100 font-mono">
          {% for e in entries %}
          <tr class="hover:bg-gray-50/50 transition-colors">
            <td class="px-3 py-1.5 text-right text-slate-400 select-none border-r border-gray-100 align-top whitespace-nowrap">{{ e.line_number }}</td>
            <td class="px-3 py-1.5 align-top whitespace-nowrap">
              {% if e.change_type == "created" %}
                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-emerald-50 text-emerald-700 border border-emerald-200">add</span>
              {% elif e.change_type == "modified" %}
                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-amber-50 text-amber-700 border border-amber-200">mod</span>
              {% elif e.change_type == "deleted" %}
                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-rose-50 text-rose-700 border border-rose-200">del</span>
              {% else %}
                <span class="px-1.5 py-0.5 rounded text-[9px] font-bold bg-gray-50 text-gray-500 border border-gray-200">-</span>
              {% endif %}
            </td>
            <td class="px-3 py-1.5 align-top whitespace-nowrap">
              {% if e.actor == 'agent' %}
                <span class="px-1.5 py-0.5 rounded text-[10px] font-bold actor-agent-badge">agent</span>
              {% elif e.actor == 'user' %}
                <span class="px-1.5 py-0.5 rounded text-[10px] font-bold actor-user-badge">user</span>
              {% elif e.actor == 'deleted' %}
                <span class="px-1.5 py-0.5 rounded text-[10px] font-bold bg-rose-50 text-rose-600 border border-rose-200">deleted</span>
              {% else %}
                <span class="px-1.5 py-0.5 rounded text-[10px] font-bold actor-system-badge">unknown</span>
              {% endif %}
            </td>
            <td class="px-3 py-1.5 text-slate-400 align-top whitespace-nowrap">{{ (e.timestamp or "")[:10] }}</td>
            <td class="px-3 py-1.5 text-slate-700 align-top break-all">{{ e.text }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% elif file_path %}
  <div class="bg-white border border-[#dddddd] rounded-[14px] p-8 text-center text-slate-500">
    <p>No blame information available for <code class="font-mono bg-gray-100 px-2 py-0.5 rounded text-[#ff385c]">{{ file_path }}</code>.</p>
    <p class="mt-2 text-xs text-slate-400">The file may not exist or has no change history.</p>
  </div>
  {% else %}
  <div class="bg-white border border-[#dddddd] rounded-[14px] p-8 text-center text-slate-400">
    <svg class="w-12 h-12 mx-auto mb-3 text-slate-300" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/></svg>
    <p class="text-sm font-medium">Enter a file path above to view line-level attribution.</p>
  </div>
  {% endif %}
</div>
{% endblock %}