{% extends "base.html" %}
{% block title %}Tickets{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">Tickets</li>
  </ol>
</nav>
{% endblock %}
{% block content %}
<div x-data="{ columns: {{ columns|safe }}, openCols: false, openFilters: false, selectedIds: [], selectAll: false }">
<div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
  <div>
    <h1 class="text-2xl font-bold">Tickets</h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{{ page_obj.paginator.count }} total tickets</p>
  </div>
  <div class="flex items-center gap-2">
    <a href="{% url 'ticket-create' %}" class="dk-btn dk-btn-primary text-sm"><i class="fas fa-plus"></i> New Ticket</a>
  </div>
</div>

<form id="tickets-bulk-delete-form" method="post" action="{% url 'tickets-bulk-delete' %}">
  {% csrf_token %}
  <template x-for="id in selectedIds" x-key="id">
    <input type="hidden" name="ids" :value="id">
  </template>
</form>
<div x-show="selectedIds.length > 0" x-cloak class="mb-4 flex items-center gap-3 px-4 py-2.5 bg-primary-50 dark:bg-primary-900/20 border border-primary-200 dark:border-primary-800 rounded-lg">
  <span class="text-sm font-medium text-primary-700 dark:text-primary-300">
    <span x-text="selectedIds.length"></span> selected
  </span>
  <button type="button" @click="confirmAction({title:'Delete Tickets', message:'Delete ' + selectedIds.length + ' ticket(s)?', confirmText:'Delete', danger:true, onConfirm:function(){ document.getElementById('tickets-bulk-delete-form').submit() }})" class="dk-btn dk-btn-danger text-xs px-3 py-1">
    <i class="fas fa-trash mr-1"></i> Delete Selected
  </button>
  <button type="button" @click="selectedIds = []; selectAll = false" class="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 ml-auto">
    <i class="fas fa-times mr-1"></i> Clear selection
  </button>
</div>

<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10">
  <div class="px-6 py-3 border-b border-gray-100 dark:border-gray-600 flex flex-wrap items-center justify-between gap-3">
    <div class="flex items-center gap-3">
      <a href="{% url 'tickets-list' %}" class="text-xs text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200"><i class="fas fa-sync-alt mr-1"></i> Reset</a>
      <button @click="openFilters = !openFilters" class="text-xs flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300">
        <i class="fas fa-filter text-[10px]"></i> Filters
        {% if selected_project or selected_status or selected_epic or selected_priority or selected_assignees or selected_created_by or due_from or due_to %}<span class="w-2 h-2 rounded-full bg-blue-500 ml-1"></span>{% endif %}
      </button>
    </div>
    <div class="flex items-center gap-3">
      <form class="flex gap-2" method="get">
        {% for c in columns %}<input type="hidden" name="columns" value="{{ c }}">{% endfor %}
        {% if selected_project %}<input type="hidden" name="project" value="{{ selected_project }}">{% endif %}
        {% if selected_status %}<input type="hidden" name="status" value="{{ selected_status }}">{% endif %}
        {% if selected_priority %}<input type="hidden" name="priority" value="{{ selected_priority }}">{% endif %}
        {% if due_from %}<input type="hidden" name="due_from" value="{{ due_from }}">{% endif %}
        {% if due_to %}<input type="hidden" name="due_to" value="{{ due_to }}">{% endif %}
        {% if per_page != 10 %}<input type="hidden" name="per_page" value="{{ per_page }}">{% endif %}
        <input type="text" name="search" value="{{ search }}" placeholder="Search tickets..."
          class="text-sm border border-gray-200 dark:border-gray-600 rounded-lg px-3 py-2 bg-white dark:bg-gray-950 focus:outline-none focus:ring-2 focus:ring-blue-500 w-56">
        <button type="submit" class="dk-btn dk-btn-primary text-sm"><i class="fas fa-search"></i></button>
        {% if search %}
        <a href="{% url 'tickets-list' %}" class="dk-btn dk-btn-ghost text-sm"><i class="fas fa-times"></i></a>
        {% endif %}
      </form>
      <div class="relative">
        <button @click="openCols = !openCols" class="text-xs flex items-center gap-1.5 px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-600 hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300">
          <i class="fas fa-columns text-[10px]"></i> Columns
        </button>
        <div x-show="openCols" @click.outside="openCols = false" x-cloak class="absolute right-0 mt-1 w-44 bg-white dark:bg-gray-950 rounded-lg shadow-lg ring-1 ring-gray-950/5 dark:ring-white/10 z-50 py-1">
          <form method="get" id="columns-form">
            <input type="hidden" name="search" value="{{ search }}">
            {% if per_page != 10 %}<input type="hidden" name="per_page" value="{{ per_page }}">{% endif %}
            {% if selected_project %}<input type="hidden" name="project" value="{{ selected_project }}">{% endif %}
            {% if selected_status %}<input type="hidden" name="status" value="{{ selected_status }}">{% endif %}
            {% if selected_epic %}<input type="hidden" name="epic" value="{{ selected_epic }}">{% endif %}
            {% if selected_priority %}<input type="hidden" name="priority" value="{{ selected_priority }}">{% endif %}
            {% if selected_created_by %}<input type="hidden" name="created_by" value="{{ selected_created_by }}">{% endif %}
            {% if due_from %}<input type="hidden" name="due_from" value="{{ due_from }}">{% endif %}
            {% if due_to %}<input type="hidden" name="due_to" value="{{ due_to }}">{% endif %}
            {% for aid in selected_assignees %}<input type="hidden" name="assignee" value="{{ aid }}">{% endfor %}
            {% for c in all_columns %}
            <label class="flex items-center gap-2 px-3 py-1.5 text-xs text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
              <input type="checkbox" name="columns" value="{{ c }}" {% if c in columns %}checked{% endif %} onchange="document.getElementById('columns-form').submit()" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">
              {{ c|title }}
            </label>
            {% endfor %}
          </form>
        </div>
      </div>
      <select name="per_page" onchange="const f=document.getElementById('columns-form');const p=document.createElement('input');p.type='hidden';p.name='per_page';p.value=this.value;f.appendChild(p);f.submit()" class="text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950 text-gray-700 dark:text-gray-300">
        <option value="5" {% if per_page == 5 %}selected{% endif %}>5 per page</option>
        <option value="10" {% if per_page == 10 %}selected{% endif %}>10 per page</option>
        <option value="25" {% if per_page == 25 %}selected{% endif %}>25 per page</option>
        <option value="50" {% if per_page == 50 %}selected{% endif %}>50 per page</option>
      </select>
    </div>
  </div>

  {% if openFilters or selected_project or selected_status or selected_epic or selected_priority or selected_assignees or selected_created_by or due_from or due_to %}
  <div x-show="openFilters" x-cloak class="px-6 py-3 border-b border-gray-100 dark:border-gray-600 bg-gray-50/50 dark:bg-gray-950/30">
    <form method="get" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-3" id="filters-form">
      {% for c in columns %}<input type="hidden" name="columns" value="{{ c }}">{% endfor %}
      {% if per_page != 10 %}<input type="hidden" name="per_page" value="{{ per_page }}">{% endif %}
      <input type="hidden" name="search" value="{{ search }}">
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Project</label>
        <select name="project" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Projects</option>
          {% for p in projects %}<option value="{{ p.id }}" {% if selected_project|stringformat:"s" == p.id|stringformat:"s" %}selected{% endif %}>{{ p.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Status</label>
        <select name="status" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Statuses</option>
          {% for s in statuses %}<option value="{{ s.id }}" {% if selected_status|stringformat:"s" == s.id|stringformat:"s" %}selected{% endif %}>{{ s.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Epic</label>
        <select name="epic" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Epics</option>
          {% for e in epics %}<option value="{{ e.id }}" {% if selected_epic|stringformat:"s" == e.id|stringformat:"s" %}selected{% endif %}>{{ e.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Priority</label>
        <select name="priority" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Priorities</option>
          {% for pr in priorities %}<option value="{{ pr.id }}" {% if selected_priority|stringformat:"s" == pr.id|stringformat:"s" %}selected{% endif %}>{{ pr.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Assignee</label>
        <select name="assignee" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Users</option>
          {% for u in users %}<option value="{{ u.id }}" {% if u.id|stringformat:"s" in selected_assignees %}selected{% endif %}>{{ u.get_full_name|default:u.username }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Created By</label>
        <select name="created_by" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Users</option>
          {% for u in users %}<option value="{{ u.id }}" {% if selected_created_by|stringformat:"s" == u.id|stringformat:"s" %}selected{% endif %}>{{ u.get_full_name|default:u.username }}</option>{% endfor %}
        </select>
      </div>
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Due From</label>
          <input type="date" name="due_from" value="{{ due_from }}" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Due To</label>
          <input type="date" name="due_to" value="{{ due_to }}" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
        </div>
      </div>
    </form>
  </div>
  {% else %}
  <div x-show="openFilters" x-cloak class="px-6 py-3 border-b border-gray-100 dark:border-gray-600 bg-gray-50/50 dark:bg-gray-950/30">
    <form method="get" class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-7 gap-3" id="filters-form">
      {% for c in columns %}<input type="hidden" name="columns" value="{{ c }}">{% endfor %}
      {% if per_page != 10 %}<input type="hidden" name="per_page" value="{{ per_page }}">{% endif %}
      <input type="hidden" name="search" value="{{ search }}">
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Project</label>
        <select name="project" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Projects</option>
          {% for p in projects %}<option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Status</label>
        <select name="status" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Statuses</option>
          {% for s in statuses %}<option value="{{ s.id }}">{{ s.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Epic</label>
        <select name="epic" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Epics</option>
          {% for e in epics %}<option value="{{ e.id }}">{{ e.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Priority</label>
        <select name="priority" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Priorities</option>
          {% for pr in priorities %}<option value="{{ pr.id }}">{{ pr.name }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Assignee</label>
        <select name="assignee" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Users</option>
          {% for u in users %}<option value="{{ u.id }}">{{ u.get_full_name|default:u.username }}</option>{% endfor %}
        </select>
      </div>
      <div>
        <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Created By</label>
        <select name="created_by" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
          <option value="">All Users</option>
          {% for u in users %}<option value="{{ u.id }}">{{ u.get_full_name|default:u.username }}</option>{% endfor %}
        </select>
      </div>
      <div class="flex gap-2 items-end">
        <div>
          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Due From</label>
          <input type="date" name="due_from" value="{{ due_from }}" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
        </div>
        <div>
          <label class="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">Due To</label>
          <input type="date" name="due_to" value="{{ due_to }}" class="w-full text-xs border border-gray-200 dark:border-gray-600 rounded-lg px-2 py-1.5 bg-white dark:bg-gray-950" onclick="this.showPicker()" onchange="this.form.submit()">
        </div>
      </div>
    </form>
  </div>
  {% endif %}

  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-gray-100 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
          <th class="px-3 py-3 w-10">
            <input type="checkbox" @change="selectAll = !selectAll; selectedIds = selectAll ? Array.from(document.querySelectorAll('.ticket-checkbox')).map(cb => cb.value) : []" class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">
          </th>
          {% if "uuid" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=uuid&order={% if sort == 'uuid' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Ticket ID {% if sort == 'uuid' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "project" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=project&order={% if sort == 'project' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Project {% if sort == 'project' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "name" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=name&order={% if sort == 'name' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Name {% if sort == 'name' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "status" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=status&order={% if sort == 'status' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Status {% if sort == 'status' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "priority" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=priority&order={% if sort == 'priority' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Priority {% if sort == 'priority' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "assignees" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            Assign To
          </th>{% endif %}
          {% if "creator" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=creator&order={% if sort == 'creator' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Created By {% if sort == 'creator' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "start_date" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=start_date&order={% if sort == 'start_date' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Start Date {% if sort == 'start_date' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "due_date" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=due_date&order={% if sort == 'due_date' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Due Date {% if sort == 'due_date' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "epic" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=epic&order={% if sort == 'epic' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Epic {% if sort == 'epic' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          {% if "created_at" in columns %}<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">
            <a href="?sort=created_at&order={% if sort == 'created_at' and order == 'asc' %}desc{% else %}asc{% endif %}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}&per_page={{ per_page }}" class="hover:text-gray-700 dark:hover:text-gray-300">
              Created At {% if sort == 'created_at' %}<i class="fas fa-sort-{{ order }}-alt text-[10px]"></i>{% endif %}
            </a>
          </th>{% endif %}
          <th class="px-4 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
        {% for t in tickets %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors" :class="selectedIds.includes('{{ t.id }}') && 'bg-blue-50 dark:bg-blue-900/10'">
          <td class="px-3 py-3">
            <input type="checkbox" class="ticket-checkbox rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500" value="{{ t.id }}" x-model="selectedIds">
          </td>
          {% if "uuid" in columns %}
          <td class="px-4 py-3">
            <div class="flex items-center gap-1.5">
              <span class="text-xs font-mono text-gray-500 dark:text-gray-400">{{ t.uuid }}</span>
              <button onclick="navigator.clipboard.writeText('{{ t.uuid }}')" class="text-gray-300 dark:text-gray-600 hover:text-gray-500 dark:hover:text-gray-400 transition-colors" title="Copy UUID">
                <i class="far fa-copy text-[10px]"></i>
              </button>
            </div>
          </td>
          {% endif %}
          {% if "project" in columns %}
          <td class="px-4 py-3">
            <span class="text-xs text-white font-mono px-2 py-0.5 rounded" style="background-color:{{ t.project.color|default:'#3B82F6' }}">{{ t.project.ticket_prefix }}</span>
          </td>
          {% endif %}
          {% if "name" in columns %}
          <td class="px-4 py-3">
            <a href="{% url 'ticket-detail' t.id %}" class="font-medium text-gray-900 dark:text-white hover:text-primary">{{ t.name|truncatechars:30 }}</a>
          </td>
          {% endif %}
          {% if "status" in columns %}
          <td class="px-4 py-3">
            <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium text-white" style="background-color:{{ t.status.color|default:'#6B7280' }}">
              {% if t.status.is_completed %}<i class="fas fa-check-circle text-[10px]"></i>{% endif %}
              {{ t.status.name }}
            </span>
          </td>
          {% endif %}
          {% if "priority" in columns %}
          <td class="px-4 py-3">
            {% if t.priority %}
            <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium text-white" style="background-color:{{ t.priority.color|default:'#6B7280' }}">{{ t.priority.name }}</span>
            {% else %}
            <span class="text-gray-400 text-xs">—</span>
            {% endif %}
          </td>
          {% endif %}
          {% if "assignees" in columns %}
          <td class="px-4 py-3">
            <div class="flex -space-x-1.5" x-data="{ showAll: false }">
              {% with assignees=t.assignees.all %}
              {% for a in assignees|slice:":2" %}
              <div class="w-6 h-6 rounded-full border-2 border-white dark:border-gray-700 flex items-center justify-center text-[9px] font-bold text-white" style="background-color:{% cycle '#3B82F6' '#10B981' '#F59E0B' '#8B5CF6' %}">
                {{ a.get_full_name|default:a.username|make_list|first|upper }}
              </div>
              {% endfor %}
              {% if assignees|length > 2 %}
              <div @click="showAll = !showAll" class="relative w-6 h-6 rounded-full border-2 border-white dark:border-gray-700 bg-gray-200 dark:bg-gray-700 flex items-center justify-center text-[9px] font-bold text-gray-500 dark:text-gray-300 cursor-pointer hover:bg-gray-300 dark:hover:bg-gray-500 transition-colors" title="Show all assignees">
                +{{ assignees|length|add:"-2" }}
                <div x-show="showAll" @click.outside="showAll = false" x-cloak class="absolute left-0 top-full mt-1 bg-white dark:bg-gray-950 rounded-lg shadow-lg ring-1 ring-gray-950/5 dark:ring-white/10 z-50 py-1 min-w-[120px]">
                  {% for a in assignees %}
                  <div class="px-3 py-1 text-xs text-gray-700 dark:text-gray-300 whitespace-nowrap">{{ a.get_full_name|default:a.username }}</div>
                  {% endfor %}
                </div>
              </div>
              {% endif %}
              {% endwith %}
            </div>
          </td>
          {% endif %}
          {% if "creator" in columns %}
          <td class="px-4 py-3 text-sm text-gray-600 dark:text-gray-400 whitespace-nowrap">{{ t.created_by.get_full_name|default:t.created_by.username|default:"—" }}</td>
          {% endif %}
          {% if "start_date" in columns %}
          <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t.start_date|date:"d/m/Y"|default:"—" }}</td>
          {% endif %}
          {% if "due_date" in columns %}
          <td class="px-4 py-3 text-sm whitespace-nowrap {% if t.due_date and t.due_date < today %}text-red-500 font-medium{% else %}text-gray-500 dark:text-gray-400{% endif %}">
            {% if t.due_date %}{{ t.due_date|date:"d/m/Y" }}{% else %}—{% endif %}
          </td>
          {% endif %}
          {% if "epic" in columns %}
          <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t.epic.name|default:"—" }}</td>
          {% endif %}
          {% if "created_at" in columns %}
          <td class="px-4 py-3 text-sm text-gray-500 dark:text-gray-400 whitespace-nowrap">{{ t.created_at|date:"d/m/Y H:i" }}</td>
          {% endif %}
          <td class="px-4 py-3 text-right">
            <div class="flex items-center justify-end gap-1">
              <a href="{% url 'ticket-detail' t.id %}" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">View</a>
              <a href="{% url 'ticket-edit' t.id %}" class="inline-flex items-center gap-1.5 px-2.5 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shadow-sm">Edit</a>

            </div>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="20" class="text-center py-12 text-gray-400">
            <i class="fas fa-ticket-alt text-4xl mb-3 block text-gray-300 dark:text-gray-600"></i>
            <p class="text-sm font-medium text-gray-500 dark:text-gray-400">No tickets found</p>
            <a href="{% url 'ticket-create' %}" class="text-primary text-sm mt-2 inline-block hover:underline">Create your first ticket</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  {% if page_obj.has_other_pages %}
  <div class="px-6 py-3 border-t border-gray-100 dark:border-gray-600 flex items-center justify-between">
    <p class="text-xs text-gray-500 dark:text-gray-400">
      Showing {{ page_obj.start_index }}–{{ page_obj.end_index }} of {{ page_obj.paginator.count }}
    </p>
    <div class="flex items-center gap-1">
      {% if page_obj.has_previous %}
      <a href="?page={{ page_obj.previous_page_number }}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}{% if per_page != 10 %}&per_page={{ per_page }}{% endif %}&sort={{ sort }}&order={{ order }}{% if selected_project %}&project={{ selected_project }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_epic %}&epic={{ selected_epic }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_created_by %}&created_by={{ selected_created_by }}{% endif %}{% if due_from %}&due_from={{ due_from }}{% endif %}{% if due_to %}&due_to={{ due_to }}{% endif %}" class="px-2.5 py-1 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800">Previous</a>
      {% endif %}
      {% for n in page_obj.paginator.page_range %}
        {% if n == page_obj.number %}
        <span class="px-2.5 py-1 rounded text-xs font-medium bg-blue-600 text-white">{{ n }}</span>
        {% elif n >= page_obj.number|add:"-2" and n <= page_obj.number|add:"2" %}
        <a href="?page={{ n }}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}{% if per_page != 10 %}&per_page={{ per_page }}{% endif %}&sort={{ sort }}&order={{ order }}{% if selected_project %}&project={{ selected_project }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_epic %}&epic={{ selected_epic }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_created_by %}&created_by={{ selected_created_by }}{% endif %}{% if due_from %}&due_from={{ due_from }}{% endif %}{% if due_to %}&due_to={{ due_to }}{% endif %}" class="px-2.5 py-1 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800">{{ n }}</a>
        {% endif %}
      {% endfor %}
      {% if page_obj.has_next %}
      <a href="?page={{ page_obj.next_page_number }}{% if search %}&search={{ search }}{% endif %}{% for c in columns %}&columns={{ c }}{% endfor %}{% if per_page != 10 %}&per_page={{ per_page }}{% endif %}&sort={{ sort }}&order={{ order }}{% if selected_project %}&project={{ selected_project }}{% endif %}{% if selected_status %}&status={{ selected_status }}{% endif %}{% if selected_epic %}&epic={{ selected_epic }}{% endif %}{% if selected_priority %}&priority={{ selected_priority }}{% endif %}{% if selected_created_by %}&created_by={{ selected_created_by }}{% endif %}{% if due_from %}&due_from={{ due_from }}{% endif %}{% if due_to %}&due_to={{ due_to }}{% endif %}" class="px-2.5 py-1 rounded text-xs font-medium text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800">Next</a>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div>
</div>
{% endblock %}