{% extends "base.html" %}
{% block title %}History: {{ filepath }} — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
<h1 class="text-2xl font-bold text-gray-100 mb-2">{{ project.name }}</h1>
{% include "fossil/_project_nav.html" %}

<div class="mb-4 flex items-center justify-between">
  <div>
    <a href="{% url 'fossil:code_file' slug=project.slug filepath=filepath %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to file</a>
    <h2 class="text-lg font-semibold text-gray-100 mt-1 font-mono">{{ filepath }}</h2>
  </div>
  <span class="text-sm text-gray-500">{{ history|length }} commit{{ history|length|pluralize }}</span>
</div>

<div class="space-y-2">
  {% for commit in history %}
  <div class="rounded-lg bg-gray-800 border border-gray-700 px-4 py-3 flex items-start gap-3">
    <div class="flex-shrink-0 mt-1">
      <div class="w-2.5 h-2.5 rounded-full bg-brand"></div>
    </div>
    <div class="flex-1 min-w-0">
      <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=commit.uuid %}"
         class="text-sm text-gray-200 hover:text-brand-light">{{ commit.comment|truncatechars:100 }}</a>
      <div class="mt-0.5 flex items-center gap-3 text-xs text-gray-500">
        <a href="{% url 'fossil:user_activity' slug=project.slug username=commit.user %}" class="hover:text-gray-300">{{ commit.user }}</a>
        <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=commit.uuid %}" class="font-mono text-brand-light hover:text-brand">{{ commit.uuid|truncatechars:10 }}</a>
        <span>{{ commit.timestamp|date:"Y-m-d H:i" }}</span>
      </div>
    </div>
  </div>
  {% empty %}
  <p class="text-sm text-gray-500 py-8 text-center">No history found.</p>
  {% endfor %}
</div>
{% endblock %}