{% extends "base.html" %}
{% block title %}Timeline — {{ project.name }} — Fossilrepo{% endblock %}

{% block content %}
{% include "fossil/_live_reload.html" %}
<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 class="flex items-center gap-2 text-xs text-gray-500">
  <span>Filter:</span>
  <a href="{% url 'fossil:timeline' slug=project.slug %}"
     class="rounded-full px-2.5 py-1 {% if not event_type %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">All</a>
  <a href="{% url 'fossil:timeline' slug=project.slug %}?type=ci"
     class="rounded-full px-2.5 py-1 {% if event_type == 'ci' %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">Checkins</a>
  <a href="{% url 'fossil:timeline' slug=project.slug %}?type=w"
     class="rounded-full px-2.5 py-1 {% if event_type == 'w' %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">Wiki</a>
  <a href="{% url 'fossil:timeline' slug=project.slug %}?type=t"
     class="rounded-full px-2.5 py-1 {% if event_type == 't' %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">Tickets</a>
</div>
<a href="{% url 'fossil:timeline_rss' slug=project.slug %}" class="text-xs text-gray-500 hover:text-brand-light flex items-center gap-1" title="RSS Feed">
  <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M6.18 15.64a2.18 2.18 0 0 1 2.18 2.18C8.36 19 7.38 20 6.18 20C5 20 4 19 4 17.82a2.18 2.18 0 0 1 2.18-2.18M4 4.44A15.56 15.56 0 0 1 19.56 20h-2.83A12.73 12.73 0 0 0 4 7.27V4.44m0 5.66a9.9 9.9 0 0 1 9.9 9.9h-2.83A7.07 7.07 0 0 0 4 12.93V10.1Z"/></svg>
  RSS
</a>
</div>

{% include "fossil/partials/timeline_entries.html" %}

{% if entries|length == 50 %}
<div id="load-more" class="mt-4 text-center"
     hx-get="{% url 'fossil:timeline' slug=project.slug %}?page={{ page|add:1 }}{% if event_type %}&type={{ event_type }}{% endif %}"
     hx-trigger="revealed"
     hx-target="#timeline-entries"
     hx-swap="beforeend"
     hx-select="#timeline-entries > *"
     hx-indicator="#load-spinner">
  <div id="load-spinner" class="htmx-indicator">
    <div class="inline-flex items-center gap-2 text-sm text-gray-500">
      <svg class="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path></svg>
      Loading more...
    </div>
  </div>
</div>
{% endif %}

<script>
  // Keyboard navigation: j/k to move between timeline entries
  (function() {
    let current = -1;
    const rows = document.querySelectorAll('.tl-row');
    function highlight(idx) {
      rows.forEach(r => r.style.background = '');
      if (idx >= 0 && idx < rows.length) {
        rows[idx].style.background = 'rgba(220,57,76,0.06)';
        rows[idx].scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }
    document.addEventListener('keydown', function(e) {
      if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') return;
      if (e.key === 'j') { current = Math.min(current + 1, rows.length - 1); highlight(current); }
      else if (e.key === 'k') { current = Math.max(current - 1, 0); highlight(current); }
      else if (e.key === 'Enter' && current >= 0) {
        const link = rows[current].querySelector('a[href*="/checkin/"]');
        if (link) window.location = link.href;
      }
    });
  })();
</script>
{% endblock %}