{% extends "base.html" %}
{% block title %}Tickets — {{ 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 class="flex items-center gap-2 text-xs text-gray-500">
    <span>Status:</span>
    <a href="{% url 'fossil:tickets' slug=project.slug %}"
       class="rounded-full px-2.5 py-1 {% if not status_filter %}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:tickets' slug=project.slug %}?status=Open"
       class="rounded-full px-2.5 py-1 {% if status_filter == 'Open' %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">Open</a>
    <a href="{% url 'fossil:tickets' slug=project.slug %}?status=Fixed"
       class="rounded-full px-2.5 py-1 {% if status_filter == 'Fixed' %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">Fixed</a>
    <a href="{% url 'fossil:tickets' slug=project.slug %}?status=Closed"
       class="rounded-full px-2.5 py-1 {% if status_filter == 'Closed' %}bg-brand text-white{% else %}bg-gray-800 text-gray-400 hover:text-white border border-gray-700{% endif %}">Closed</a>
  </div>
  <div class="flex items-center gap-3">
    <a href="{% url 'fossil:tickets_csv' slug=project.slug %}" class="text-xs text-gray-500 hover:text-brand-light">Export CSV</a>
    {% if perms.projects.change_project %}
    <a href="{% url 'fossil:ticket_create' slug=project.slug %}" class="inline-flex items-center rounded-md bg-brand px-3 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">New Ticket</a>
    {% endif %}
    <input type="search"
           name="search"
           value="{{ search }}"
           placeholder="Search tickets..."
           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:tickets' slug=project.slug %}{% if status_filter %}?status={{ status_filter }}{% endif %}"
           hx-trigger="input changed delay:300ms, search"
           hx-target="#ticket-table"
           hx-swap="outerHTML"
           hx-push-url="true" />
  </div>
</div>

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

<div class="mt-4 flex items-center justify-between text-sm">
  <div class="flex items-center gap-3">
    <span class="text-gray-500">{{ total }} ticket{{ total|pluralize }}</span>
    <div class="flex items-center gap-1 text-xs">
      <span class="text-gray-600">Show:</span>
      {% for size in per_page_options %}
      <a href="{% url 'fossil:tickets' slug=project.slug %}?per_page={{ size }}{% if status_filter %}&status={{ status_filter }}{% endif %}"
         class="px-1.5 py-0.5 rounded {% if size == per_page %}bg-brand text-white{% else %}text-gray-500 hover:text-white{% endif %}">{{ size }}</a>
      {% endfor %}
    </div>
  </div>
  <div class="flex items-center gap-2">
    {% if has_prev %}
    <a href="{% url 'fossil:tickets' slug=project.slug %}?page={{ page|add:"-1" }}&per_page={{ per_page }}{% if status_filter %}&status={{ status_filter }}{% endif %}"
       class="rounded-md bg-gray-800 px-3 py-1.5 text-gray-400 hover:text-white border border-gray-700">&larr;</a>
    {% endif %}
    <span class="text-gray-500">{{ page }} / {{ total_pages }}</span>
    {% if has_next %}
    <a href="{% url 'fossil:tickets' slug=project.slug %}?page={{ page|add:"1" }}&per_page={{ per_page }}{% if status_filter %}&status={{ status_filter }}{% endif %}"
       class="rounded-md bg-gray-800 px-3 py-1.5 text-gray-400 hover:text-white border border-gray-700">&rarr;</a>
    {% endif %}
  </div>
</div>
{% endblock %}