{% extends "base.html" %}
{% block title %}Branches — {{ 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="flex items-center justify-between mb-4">
  <div>
    <input type="search"
           name="search"
           value="{{ search }}"
           placeholder="Search branches..."
           class="rounded-md border-gray-700 bg-gray-800 text-gray-100 shadow-sm focus:border-brand focus:ring-brand text-sm px-3 py-1.5"
           hx-get="{% url 'fossil:branches' slug=project.slug %}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#branch-content"
           hx-swap="innerHTML"
           hx-push-url="true" />
  </div>
</div>

<div id="branch-content">
<div class="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-sm">
  <table class="min-w-full divide-y divide-gray-700">
    <thead class="bg-gray-900">
      <tr>
        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-400">Branch</th>
        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-400">Last Checkin</th>
        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-400">By</th>
        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-400">Checkins</th>
        <th class="px-4 py-3 text-right text-xs font-medium uppercase text-gray-400">Updated</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-700 bg-gray-800">
      {% for branch in branches %}
      <tr class="hover:bg-gray-700/50">
        <td class="px-4 py-3">
          <a href="{% url 'fossil:timeline' slug=project.slug %}?type=ci" class="inline-flex items-center rounded-md bg-brand/10 border border-brand/20 px-2 py-0.5 text-sm text-brand-light hover:text-brand">
            {{ branch.name }}
          </a>
        </td>
        <td class="px-4 py-3 text-sm">
          <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=branch.last_uuid %}" class="text-gray-300 hover:text-brand-light truncate block max-w-sm">
            <code class="text-xs font-mono text-brand-light">{{ branch.last_uuid|truncatechars:10 }}</code>
          </a>
        </td>
        <td class="px-4 py-3">
          <a href="{% url 'fossil:user_activity' slug=project.slug username=branch.last_user %}" class="text-sm text-gray-400 hover:text-brand-light">{{ branch.last_user }}</a>
        </td>
        <td class="px-4 py-3 text-sm text-gray-400 text-right">{{ branch.checkin_count }}</td>
        <td class="px-4 py-3 text-sm text-gray-500 text-right">{{ branch.last_checkin|timesince }} ago</td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="5" class="px-4 py-8 text-center text-sm text-gray-500">{% if search %}No branches matching "{{ search }}".{% else %}No branches.{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% include "includes/_pagination_manual.html" %}
</div>
{% endblock %}