{% extends "base.html" %}
{% block title %}Tags — {{ 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 tags..."
           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:tags' slug=project.slug %}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#tag-content"
           hx-swap="innerHTML"
           hx-push-url="true" />
  </div>
</div>

<div id="tag-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">Tag</th>
        <th class="px-4 py-3 text-left text-xs font-medium uppercase text-gray-400">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">Date</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-700 bg-gray-800">
      {% for tag in tags %}
      <tr class="hover:bg-gray-700/50">
        <td class="px-4 py-3">
          <span class="inline-flex items-center rounded-md bg-blue-900/20 border border-blue-800/30 px-2 py-0.5 text-sm text-blue-300">{{ tag.name }}</span>
        </td>
        <td class="px-4 py-3">
          <a href="{% url 'fossil:checkin_detail' slug=project.slug checkin_uuid=tag.uuid %}" class="font-mono text-xs text-brand-light hover:text-brand">{{ tag.uuid|truncatechars:10 }}</a>
        </td>
        <td class="px-4 py-3">
          <a href="{% url 'fossil:user_activity' slug=project.slug username=tag.user %}" class="text-sm text-gray-400 hover:text-brand-light">{{ tag.user }}</a>
        </td>
        <td class="px-4 py-3 text-sm text-gray-500 text-right">{{ tag.timestamp|date:"Y-m-d" }}</td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="4" class="px-4 py-8 text-center text-sm text-gray-500">{% if search %}No tags matching "{{ search }}".{% else %}No tags.{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% include "includes/_pagination_manual.html" %}
</div>
{% endblock %}