{% extends "base.html" %}
{% block title %}Project Board{% endblock %}
{% block extra_head %}
<link href="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/css/tom-select.default.min.css" rel="stylesheet">
{% include "components/rich_text_editor_assets.html" %}
<style>
  .ts-control { border-radius: 0.5rem; border-color: #d1d5db; min-height: 38px; padding-top: 0.375rem; padding-bottom: 0.375rem; box-shadow: none; }
  .dark .ts-control { background-color: #030712; border-color: #4b5563; color: #f3f4f6; }
  .dark .ts-control input { color: #f3f4f6; }
  .dark .ts-dropdown { background-color: #1f2937; border-color: #4b5563; color: #f3f4f6; }
  .dark .ts-dropdown .option:hover { background-color: #374151; color: white; }
  .dark .ts-dropdown .active { background-color: #374151; color: white; }
</style>
{% 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">Project Board</li>
  </ol>
</nav>
{% endblock %}
{% block content %}
<div x-data="{
  draggingTicket: null,
  isTouchDevice: false,
  touchStartX: 0,
  touchStartY: 0,
  scrollStartX: 0,
  projectId: {{ selected_project.id|default:'null' }},

  newTicketOpen: false,
  exportOpen: false,
  filterOpen: false,
  filterOpen: false,
  manageStatusesOpen: false,
  permissionsOpen: false,
  allowedMoveToStatusIds: {{ allowed_move_to_status_ids }},

  createStatusName: '',
  createStatusColor: '#6B7280',
  createStatusOrder: '0',
  createStatusCompleted: false,

  editStatusId: null,
  editStatusName: '',
  editStatusColor: '',
  editStatusOrder: '0',
  editStatusCompleted: false,

  ticketName: '',
  ticketDescription: '',
  ticketStatus: {{ first_status_id|default:'null' }},
  ticketPriority: '',
  ticketEpic: '',
  ticketStartDate: '',
  ticketDueDate: '',
  ticketAssignees: [],

  exportColumns: ['uuid', 'name', 'status', 'assignee', 'due_date', 'created_at'],

  filterUserIds: {{ selected_user_ids|default:'[]' }},

  moveTicketToStatus(ticketId, statusId) {
    fetch('/dashboard/board/' + this.projectId + '/move/' + ticketId + '/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}'},
      body: JSON.stringify({status_id: statusId})
    }).then(r => r.json()).then(data => {
      if (data.success) window.location.reload();
    });
  },

  submitExport() {
    fetch('/dashboard/board/' + this.projectId + '/export/', {
      method: 'POST',
      headers: {'Content-Type': 'application/json', 'X-CSRFToken': '{{ csrf_token }}'},
      body: JSON.stringify({columns: this.exportColumns})
    }).then(r => { if (r.ok) return r.blob(); throw new Error('Export failed'); })
    .then(blob => {
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url; a.download = 'board-export.xlsx';
      document.body.appendChild(a); a.click(); a.remove();
      window.URL.revokeObjectURL(url);
      this.exportOpen = false;
    }).catch(function(e) { showToast('Export failed: ' + e.message, 'error'); });
  },

  applyFilter() {
    window.location.href = '?user_ids=' + this.filterUserIds.join(',');
  },

  clearFilter() {
    window.location.href = '?';
  },

  toggleFilterUser(id) {
    const idx = this.filterUserIds.indexOf(id);
    idx > -1 ? this.filterUserIds.splice(idx, 1) : this.filterUserIds.push(id);
  },

  toggleExportColumn(col) {
    const idx = this.exportColumns.indexOf(col);
    idx > -1 ? this.exportColumns.splice(idx, 1) : this.exportColumns.push(col);
  },

  isColumnSelected(col) { return this.exportColumns.indexOf(col) > -1; },

  init() {
    this.$nextTick(() => {
      this.removeAllEventListeners();
      this.attachAllEventListeners();
      this.setupTouchScrolling();
      this.isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    });
  },

  setupTouchScrolling() {
    const container = document.getElementById('board-container');
    if (!container) return;
    container.addEventListener('touchstart', (e) => {
      this.touchStartX = e.touches[0].clientX;
      this.touchStartY = e.touches[0].clientY;
      this.scrollStartX = container.scrollLeft;
    }, { passive: true });
    container.addEventListener('touchmove', (e) => {
      if (e.touches.length !== 1) return;
      const dx = this.touchStartX - e.touches[0].clientX;
      const dy = this.touchStartY - e.touches[0].clientY;
      if (Math.abs(dx) > Math.abs(dy)) { e.preventDefault(); container.scrollLeft = this.scrollStartX + dx; }
    }, { passive: false });
  },

  removeAllEventListeners() {
    document.querySelectorAll('.ticket-card').forEach(t => {
      t.removeAttribute('draggable');
      const nt = t.cloneNode(true);
      t.parentNode.replaceChild(nt, t);
    });
    document.querySelectorAll('.status-column').forEach(c => {
      const nc = c.cloneNode(false);
      while (c.firstChild) nc.appendChild(c.firstChild);
      c.parentNode.replaceChild(nc, c);
    });
  },

  attachAllEventListeners() {
    {% if not can_move %}return;{% endif %}

    document.querySelectorAll('.ticket-card').forEach(ticket => {
      ticket.setAttribute('draggable', true);

      ticket.addEventListener('dragstart', (e) => {
        this.draggingTicket = ticket.getAttribute('data-ticket-id');
        ticket.classList.add('opacity-50');
        e.dataTransfer.effectAllowed = 'move';
      });
      ticket.addEventListener('dragend', () => {
        ticket.classList.remove('opacity-50');
        this.draggingTicket = null;
      });

      let longPressTimer, isDragging = false, originalColumn;

      ticket.addEventListener('touchstart', (e) => {
        if (isDragging) return;
        longPressTimer = setTimeout(() => {
          originalColumn = ticket.closest('.status-column');
          this.draggingTicket = ticket.getAttribute('data-ticket-id');
          ticket.classList.add('opacity-50', 'relative', 'z-30');
          isDragging = true;
          ticket.style.boxShadow = '0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -2px rgba(0,0,0,0.05)';
        }, 500);
      }, { passive: true });

      ticket.addEventListener('touchmove', (e) => {
        if (!isDragging) { clearTimeout(longPressTimer); return; }
        const touch = e.touches[0];
        document.querySelectorAll('.status-column').forEach(col => {
          const rect = col.getBoundingClientRect();
          if (touch.clientX >= rect.left && touch.clientX <= rect.right &&
              touch.clientY >= rect.top && touch.clientY <= rect.bottom)
            col.classList.add('bg-blue-50', 'dark:bg-blue-900/20');
          else
            col.classList.remove('bg-blue-50', 'dark:bg-blue-900/20');
        });
      });

      ticket.addEventListener('touchend', (e) => {
        clearTimeout(longPressTimer);
        if (!isDragging) return;
        isDragging = false;
        ticket.classList.remove('opacity-50', 'relative', 'z-30');
        ticket.style.boxShadow = '';
        const touch = e.changedTouches[0];
        let targetColumn = null;
        document.querySelectorAll('.status-column').forEach(col => {
          const rect = col.getBoundingClientRect();
          if (touch.clientX >= rect.left && touch.clientX <= rect.right &&
              touch.clientY >= rect.top && touch.clientY <= rect.bottom) targetColumn = col;
          col.classList.remove('bg-blue-50', 'dark:bg-blue-900/20');
        });
        {% if can_move %}
        if (targetColumn && targetColumn.getAttribute('data-status-id') && !this.allowedMoveToStatusIds.includes(parseInt(targetColumn.getAttribute('data-status-id')))) targetColumn = null;
        {% endif %}
        if (targetColumn && targetColumn !== originalColumn)
          this.moveTicketToStatus(this.draggingTicket, targetColumn.getAttribute('data-status-id'));
        this.draggingTicket = null;
      });

      ticket.addEventListener('touchcancel', () => {
        clearTimeout(longPressTimer);
        if (!isDragging) return;
        isDragging = false;
        ticket.classList.remove('opacity-50', 'relative', 'z-30');
        ticket.style.boxShadow = '';
        this.draggingTicket = null;
        document.querySelectorAll('.status-column').forEach(col => col.classList.remove('bg-blue-50', 'dark:bg-blue-900/20'));
      });
    });

    document.querySelectorAll('.status-column').forEach(col => {
      col.addEventListener('dragover', (e) => { e.preventDefault(); e.dataTransfer.dropEffect = 'move'; col.classList.add('bg-blue-50', 'dark:bg-blue-900/20'); });
      col.addEventListener('dragleave', () => { col.classList.remove('bg-blue-50', 'dark:bg-blue-900/20'); });
      col.addEventListener('drop', (e) => {
        e.preventDefault();
        col.classList.remove('bg-blue-50', 'dark:bg-blue-900/20');
        {% if can_move %}
        if (col.getAttribute('data-status-id') && !this.allowedMoveToStatusIds.includes(parseInt(col.getAttribute('data-status-id')))) return;
        {% endif %}
        if (this.draggingTicket) {
          this.moveTicketToStatus(this.draggingTicket, col.getAttribute('data-status-id'));
          this.draggingTicket = null;
        }
      });
    });
  }
}"
x-init="init()"
class="space-y-6"
>

{% if not selected_project %}

<div class="mb-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
  <div>
    <h1 class="text-2xl font-bold">Project Board</h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">Drag and drop tickets across status columns</p>
  </div>
</div>

<!-- Project Selector -->
<div class="rounded-xl bg-white dark:bg-gray-950 shadow-sm ring-1 ring-gray-950/5 dark:ring-white/10 overflow-hidden">
  <div class="px-6 py-5">
    <div class="mb-5">
      <h2 class="text-lg font-semibold text-gray-900 dark:text-white">Select Project</h2>
      <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">Choose a project to view its board</p>
    </div>
    <form method="get" class="mb-4">
      <div class="relative">
        <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
          <i class="fas fa-search text-gray-400 dark:text-gray-500"></i>
        </div>
        <input type="text" name="search" value="{{ search }}" placeholder="Search projects by name or prefix..."
               class="block w-full pl-10 pr-3 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-950 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none">
      </div>
    </form>
    {% if not projects %}
    <div class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
      <h3 class="text-base font-medium text-gray-900 dark:text-white mb-1">No Projects Available</h3>
      <p class="text-sm text-gray-500 dark:text-gray-400">You don't have access to any projects yet.</p>
    </div>
    {% elif search and not projects %}
    <div class="flex flex-col items-center justify-center py-12 text-gray-500 dark:text-gray-400">
      <i class="fas fa-search text-4xl mb-3 text-gray-400 dark:text-gray-500"></i>
      <h3 class="text-base font-medium text-gray-900 dark:text-white mb-1">No Projects Found</h3>
      <p class="text-sm text-gray-500 dark:text-gray-400">Try adjusting your search terms</p>
    </div>
    {% else %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-3">
      {% for p in projects %}
      <a href="{% url 'project-board-project' p.id %}"
         class="relative p-4 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-600 rounded-lg hover:shadow-md transition-all text-left overflow-hidden block"
         style="border-left: 4px solid {{ p.color|default:'#6B7280' }};">
        {% if p.pinned_date %}
        <div class="absolute top-2 right-2">
          <div class="flex items-center justify-center w-6 h-6 rounded-full shadow-sm" style="background-color:{{ p.color|default:'#6B7280' }};" title="Pinned Project">
            <i class="fas fa-thumbtack text-white text-xs"></i>
          </div>
        </div>
        {% endif %}
        <div class="inline-flex px-2.5 py-1 rounded text-xs font-semibold mb-3 text-white"
             style="background-color:{{ p.color|default:'#6B7280' }};">{{ p.ticket_prefix }}</div>
        <h3 class="font-semibold text-base text-gray-900 dark:text-white line-clamp-2">{{ p.name }}</h3>
      </a>
      {% endfor %}
    </div>
    {% endif %}
  </div>
</div>

{% else %}

<div class="mb-6 flex flex-col sm:flex-row sm:items-start justify-between gap-4">
  <div>
    <h1 class="text-2xl font-bold">Project Board</h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{{ selected_project.name }}</p>
  </div>
  <div class="flex flex-wrap items-center gap-2">
    <button @click="window.location.reload()" class="dk-btn dk-btn-ghost text-sm text-gray-700 dark:text-gray-300">
      <i class="fas fa-sync"></i> Refresh
    </button>
    <button @click="exportOpen = true" class="dk-btn dk-btn-ghost text-sm text-emerald-600">
      <i class="fas fa-download"></i> Export
    </button>
    <button @click="filterOpen = true" class="dk-btn dk-btn-ghost text-sm text-blue-600">
      <i class="fas fa-filter"></i> Filter {% if selected_user_ids %}<span class="ml-1 bg-blue-100 text-blue-800 text-xs font-semibold px-2 py-0.5 rounded">{{ selected_user_ids|length }}</span>{% endif %}
    </button>
    {% if is_admin %}
    <button @click="permissionsOpen = true" class="dk-btn dk-btn-ghost text-sm text-orange-600">
      <i class="fas fa-shield-halved"></i> Permissions
    </button>
    <button @click="manageStatusesOpen = true" class="dk-btn dk-btn-ghost text-sm text-purple-600">
      <i class="fas fa-cog"></i> Manage Statuses
    </button>
    {% endif %}
    <button @click="newTicketOpen = true" class="dk-btn dk-btn-primary text-sm">
      <i class="fas fa-plus"></i> New Ticket
    </button>
  </div>
</div>

<!-- Project Switcher -->
<div class="mb-4" x-data="{ open: false }">
  <div class="relative">
    <button @click="open = !open" @click.away="open = false"
            class="inline-flex items-center gap-2 px-4 py-2.5 text-sm font-medium text-gray-900 dark:text-white bg-white dark:bg-gray-950 border-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors"
            style="border-color: {{ selected_project.color|default:'#D1D5DB' }};">
      <span class="px-2 py-0.5 rounded text-xs font-semibold text-white" style="background-color:{{ selected_project.color|default:'#6B7280' }};">{{ selected_project.ticket_prefix }}</span>
      <span>{{ selected_project.name }}</span>
      <i class="fas fa-chevron-down w-4 h-4 transition-transform" :class="{ 'rotate-180': open }"></i>
    </button>
    <div x-cloak x-show="open" x-transition:enter="transition ease-out duration-100"
         x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
         x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
         x-transition:leave-end="opacity-0 scale-95"
         class="absolute top-full left-0 mt-2 w-80 bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg z-50 max-h-96 overflow-y-auto">
      <div class="p-2">
        <div class="px-3 py-2 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider">Switch Project</div>
        {% for p in projects %}
        <a href="{% url 'project-board-project' p.id %}"
           class="w-full flex items-center gap-3 px-3 py-2 rounded-md hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors text-left {% if p.id == selected_project.id %}bg-gray-50 dark:bg-gray-800{% endif %}">
          <span class="px-2 py-0.5 rounded text-xs font-semibold text-white flex-shrink-0" style="background-color:{{ p.color|default:'#6B7280' }};">{{ p.ticket_prefix }}</span>
          <div class="flex-1 min-w-0 text-sm font-medium text-gray-900 dark:text-white truncate">{{ p.name }}</div>
          {% if p.id == selected_project.id %}<i class="fas fa-check flex-shrink-0" style="color:{{ p.color|default:'#3B82F6' }};"></i>{% endif %}
        </a>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<!-- Mobile swipe hint -->
<div class="md:hidden flex justify-center mb-2 text-xs text-gray-500 dark:text-gray-400 items-center gap-1">
  <i class="fas fa-arrow-left"></i><span>Swipe horizontally to view all columns</span><i class="fas fa-arrow-right"></i>
</div>

<!-- View Only Mode Indicator -->
{% if not can_move %}
<div class="flex justify-center mb-4">
  <div class="inline-flex items-center gap-2 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg text-amber-800 dark:text-amber-200">
    <i class="fas fa-eye"></i><span class="text-sm font-medium">View Only Mode</span><span class="text-xs opacity-75">You can view tickets but cannot move them</span>
  </div>
</div>
{% elif can_move and allowed_move_to_status_ids|length < columns|length %}
<div class="flex justify-center mb-4">
  <div class="inline-flex items-center gap-2 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg text-blue-800 dark:text-blue-200">
    <i class="fas fa-info-circle"></i><span class="text-sm font-medium">Restricted Mode</span><span class="text-xs opacity-75">You can only move tickets to certain statuses</span>
  </div>
</div>
{% endif %}



<!-- Board Columns -->
<div id="board-container" class="relative overflow-x-auto pb-6 {% if not can_move %}view-only-mode{% endif %}">
  <div class="inline-flex gap-4 pb-2 min-w-full">
    {% for col in columns %}
    <div class="status-column rounded-xl border border-gray-200 dark:border-gray-600 flex flex-col bg-gray-50 dark:bg-gray-950 w-[calc(85vw-2rem)] min-w-[280px] max-w-[350px] h-[700px] sm:w-[calc((100vw-6rem)/2)] sm:h-[750px] lg:w-[calc((100vw-8rem)/3)] lg:h-[800px] xl:w-[calc((100vw-10rem)/4)] xl:h-[850px]"
         data-status-id="{{ col.status.id }}" data-status-completed="{{ col.status.is_completed|lower }}">
      <div class="px-4 py-3 rounded-t-xl border-b border-gray-200 dark:border-gray-600 flex-shrink-0"
           style="background-color:{{ col.status.color|default:'#f3f4f6' }};">
        <div class="flex items-center justify-between">
          <h3 class="font-medium flex items-center gap-2" style="color:white;text-shadow:0px 0px 1px rgba(0,0,0,0.5);">
            <span>{{ col.status.name }}</span>
            <span class="text-sm opacity-80">{{ col.count }}</span>
            {% if col.status.is_completed %}
            <div class="flex items-center justify-center w-6 h-6 bg-green-500 rounded-full border-2 border-white dark:border-gray-700 shadow-lg" title="Completed Status">
              <i class="fas fa-check text-white text-xs font-bold"></i>
            </div>
            {% endif %}
          </h3>
          <div class="relative" x-data="{ open: false }">
            <button @click="open = !open" @click.away="open = false"
                    class="p-1 rounded hover:bg-black hover:bg-opacity-20 transition-colors" style="color:white;">
              <i class="fas fa-ellipsis-v"></i>
            </button>
            <div x-cloak x-show="open"
                 x-transition:enter="transition ease-out duration-100"
                 x-transition:enter-start="transform opacity-0 scale-95"
                 x-transition:enter-end="transform opacity-100 scale-100"
                 x-transition:leave="transition ease-in duration-75"
                 x-transition:leave-start="transform opacity-100 scale-100"
                 x-transition:leave-end="transform opacity-0 scale-95"
                 class="absolute top-8 left-0 w-52 bg-white dark:bg-gray-950 rounded-lg shadow-lg border border-gray-200 dark:border-gray-600 z-50"
                 style="transform:translateX(-100%);">
              <div class="p-2">
                <div class="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-gray-600">
                  <span class="text-sm font-medium text-gray-900 dark:text-white">Sort list</span>
                  <button @click="open = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times"></i></button>
                </div>
                <div class="py-1">
                  <a href="?sort=created_at_desc" class="w-full text-left block px-3 py-2 text-sm text-gray-700 dark:text-white rounded hover:bg-gray-50 dark:hover:bg-gray-800 {% if sort == 'created_at_desc' %}bg-gray-50 dark:bg-gray-800{% endif %}">Date created (newest first)</a>
                  <a href="?sort=created_at_asc" class="w-full text-left block px-3 py-2 text-sm text-gray-700 dark:text-white rounded hover:bg-gray-50 dark:hover:bg-gray-800 {% if sort == 'created_at_asc' %}bg-gray-50 dark:bg-gray-800{% endif %}">Date created (oldest first)</a>
                  <a href="?sort=name_asc" class="w-full text-left block px-3 py-2 text-sm text-gray-700 dark:text-white rounded hover:bg-gray-50 dark:hover:bg-gray-800 {% if sort == 'name_asc' %}bg-gray-50 dark:bg-gray-800{% endif %}">Card name (alphabetically)</a>
                  <a href="?sort=due_date_asc" class="w-full text-left block px-3 py-2 text-sm text-gray-700 dark:text-white rounded hover:bg-gray-50 dark:hover:bg-gray-800 {% if sort == 'due_date_asc' %}bg-gray-50 dark:bg-gray-800{% endif %}">Due date</a>
                  <a href="?sort=priority" class="w-full text-left block px-3 py-2 text-sm text-gray-700 dark:text-white rounded hover:bg-gray-50 dark:hover:bg-gray-800 {% if sort == 'priority' %}bg-gray-50 dark:bg-gray-800{% endif %}">Priority</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="p-3 flex flex-col gap-3 flex-1 overflow-y-auto" style="max-height:calc(100% - 60px);">
        {% for ticket in col.tickets %}
        <div class="ticket-card bg-white dark:bg-gray-950 p-3 rounded-lg shadow-sm border border-gray-200 dark:border-gray-600 {% if can_move %}cursor-move{% endif %}"
             data-ticket-id="{{ ticket.id }}">
          <div class="flex justify-between items-center mb-2">
            <span class="text-xs font-mono text-gray-500 dark:text-gray-400 px-1.5 py-0.5 bg-gray-100 dark:bg-gray-800 rounded truncate max-w-[120px] sm:max-w-none">{{ ticket.uuid }}</span>
            <div class="flex items-center gap-1">
              {% if ticket.priority %}<span class="text-xs px-1.5 py-0.5 rounded text-white font-medium" style="background-color:{{ ticket.priority.color }};">{{ ticket.priority.name }}</span>{% endif %}
              {% if ticket.due_date %}<span class="text-xs px-1.5 py-0.5 rounded {% if ticket.due_date < today %}bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300{% else %}bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300{% endif %}">{{ ticket.due_date|date:"M d" }}</span>{% endif %}
            </div>
          </div>
          <h4 class="font-medium text-gray-900 dark:text-white mb-2 text-sm">{{ ticket.name }}</h4>
          {% if ticket.description %}<p class="text-sm text-gray-500 dark:text-gray-400 mb-3 line-clamp-2">{{ ticket.description|striptags|truncatechars:100 }}</p>{% endif %}
          <div class="flex justify-between items-center mt-2">
            <div class="flex flex-wrap gap-1 max-w-[180px]">
              {% if ticket.assignees.all %}
                {% for assignee in ticket.assignees.all|slice:":2" %}
                <div class="inline-flex items-center px-2 py-1 rounded-full bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-300 gap-1">
                  <span title="{{ assignee.get_full_name|default:assignee.username }}" class="w-4 h-4 rounded-full bg-blue-500 flex items-center justify-center text-[10px] text-white flex-shrink-0">{{ assignee.get_full_name|default:assignee.username|first|upper }}</span>
                  <span title="{{ assignee.get_full_name|default:assignee.username }}" class="text-xs font-medium truncate max-w-[60px]">{{ assignee.get_full_name|default:assignee.username|truncatechars:8 }}</span>
                </div>
                {% endfor %}
                {% if ticket.assignees.all|length > 2 %}<div title="View all assignees" class="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-950 text-gray-700 dark:text-gray-400"><span class="text-xs font-medium">+{{ ticket.assignees.all|length|add:"-2" }}</span></div>{% endif %}
              {% else %}
              <div class="inline-flex items-center px-2 py-1 rounded-full bg-gray-100 dark:bg-gray-950 text-gray-700 dark:text-gray-400">
                <i class="fas fa-user text-gray-400 dark:text-gray-500 mr-1 text-xs"></i><span class="text-xs font-medium">Unassigned</span>
              </div>
              {% endif %}
            </div>
            <a href="{% url 'ticket-detail' ticket.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>
          </div>
        </div>
        {% empty %}
        <div class="flex items-center justify-center h-24 text-gray-500 dark:text-gray-400 text-sm italic border border-dashed border-gray-300 dark:border-gray-600 rounded-lg">No tickets</div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
    {% if not columns %}
    <div class="w-full flex items-center justify-center h-40 text-gray-500 dark:text-gray-400">No status columns found for this project</div>
    {% endif %}
  </div>
</div>

<!-- New Ticket Modal -->
<div x-cloak x-show="newTicketOpen" class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
     @keydown.escape.window="newTicketOpen = false">
  <div class="fixed inset-0 bg-black/50" @click="newTicketOpen = false"></div>
  <div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-4xl mx-auto my-auto max-h-[90vh] overflow-y-auto z-10 p-6 md:p-8">
    <div class="flex items-center justify-between mb-6">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white">New Ticket</h3>
      <button @click="newTicketOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times text-xl"></i></button>
    </div>
    <form id="new-ticket-form" method="post" action="{% url 'board-create-ticket' selected_project.id %}">
      {% csrf_token %}
      <div class="space-y-6">
        
        <!-- Row 1: Project, Status, Priority -->
        <div class="grid grid-cols-3 gap-5">
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Project</label>
            <select disabled class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-900 px-3 py-2 text-sm text-gray-700 outline-none">
              <option>{{ selected_project.name }}</option>
            </select>
            <input type="hidden" name="project" value="{{ selected_project.id }}">
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Status <span class="text-red-500">*</span></label>
            <select name="status" required x-model="ticketStatus"
                    class="w-full text-sm outline-none">
              {% for s in columns %}<option value="{{ s.status.id }}">{{ s.status.name }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Priority</label>
            <select name="priority" x-model="ticketPriority"
                    class="w-full text-sm outline-none">
              <option value="">Select an option</option>
              {% for p in priorities %}<option value="{{ p.id }}">{{ p.name }}</option>{% endfor %}
            </select>
          </div>
        </div>

        <!-- Row 2: Epic, Ticket Name -->
        <div class="grid grid-cols-3 gap-5">
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Epic</label>
            <select name="epic" x-model="ticketEpic"
                    class="w-full text-sm outline-none">
              <option value="">Select an option</option>
              {% for e in epics %}<option value="{{ e.id }}">{{ e.name }}</option>{% endfor %}
            </select>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Ticket Name <span class="text-red-500">*</span></label>
            <input type="text" name="name" required x-model="ticketName"
                   class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
          </div>
        </div>

        <div>
          <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Description</label>
          {% include "components/rich_text_editor.html" with input_name="description" alpine_model="ticketDescription" %}
        </div>

        <!-- Row 4: Assigned to, Start Date, Due Date -->
        <div class="grid grid-cols-3 gap-5">
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Assigned to</label>
            <select name="assignees" multiple x-ref="assigneesSelect"
                    class="w-full text-sm outline-none">
              {% for member in project_members %}
                <option value="{{ member.user.id }}">{{ member.user.get_full_name|default:member.user.username }}</option>
              {% endfor %}
            </select>
            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1.5">Select multiple users to assign this ticket to. Only project members can be assigned.</p>
          </div>
          <div>
            <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Start Date</label>
            <input type="date" name="start_date" x-model="ticketStartDate" @click="$el.showPicker()"
                   class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
           </div>
           <div>
             <label class="block text-sm font-semibold text-gray-900 dark:text-gray-100 mb-1.5">Due Date</label>
             <input type="date" name="due_date" x-model="ticketDueDate" @click="$el.showPicker()"
                    class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none transition-colors">
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button type="submit" class="dk-btn dk-btn-primary">
            Submit
          </button>
          <button type="button" @click="newTicketOpen = false"
                  class="dk-btn dk-btn-ghost">
            Cancel
          </button>
        </div>
      </div>
    </form>
  </div>
</div>


<!-- Export to Excel Modal -->
<div x-cloak x-show="exportOpen" class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
     @keydown.escape.window="exportOpen = false">
  <div class="fixed inset-0 bg-black/50" @click="exportOpen = false"></div>
  <div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-md mx-4 z-10">
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-600">
      <div>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Export to Excel</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">Select columns to include in the export</p>
      </div>
      <button @click="exportOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times"></i></button>
    </div>
    <div class="px-6 py-4">
      <div class="grid grid-cols-2 gap-2">
        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('uuid')" @change="toggleExportColumn('uuid')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Ticket ID</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('name')" @change="toggleExportColumn('name')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Title</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('description')" @change="toggleExportColumn('description')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Description</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('status')" @change="toggleExportColumn('status')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Status</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('assignee')" @change="toggleExportColumn('assignee')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Assignee</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('project')" @change="toggleExportColumn('project')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Project</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('epic')" @change="toggleExportColumn('epic')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Epic</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('start_date')" @change="toggleExportColumn('start_date')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Start Date</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('due_date')" @change="toggleExportColumn('due_date')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Due Date</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('created_at')" @change="toggleExportColumn('created_at')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Created At</span>        </label>        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">          <input type="checkbox" :checked="isColumnSelected('updated_at')" @change="toggleExportColumn('updated_at')"                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">          <span class="text-sm text-gray-700 dark:text-gray-300">Updated At</span>        </label>
      </div>
    </div>
    <div class="flex items-center justify-end gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-600">
      <button type="button" @click="exportOpen = false"
              class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">Cancel</button>
      <button @click="submitExport()"
              class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white rounded-lg bg-green-600 hover:bg-green-500">
        <i class="fas fa-download"></i> Download
      </button>
    </div>
  </div>
</div>

<!-- Filter by User Modal -->
<div x-cloak x-show="filterOpen" class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
     @keydown.escape.window="filterOpen = false">
  <div class="fixed inset-0 bg-black/50" @click="filterOpen = false"></div>
  <div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-md mx-4 z-10">
    <div class="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-600">
      <div>
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Filter by User</h3>
        <p class="text-xs text-gray-500 dark:text-gray-400">Select users to filter tickets</p>
      </div>
      <button @click="filterOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times"></i></button>
    </div>
    <div class="px-6 py-4">
      <div class="space-y-1 max-h-64 overflow-y-auto">
        {% for u in project_users %}
        <label class="flex items-center gap-2 px-3 py-2 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer">
          <input type="checkbox" :checked="filterUserIds.indexOf({{ u.id }}) > -1"
                 @change="toggleFilterUser({{ u.id }})"
                 class="rounded border-gray-300 dark:border-gray-600 text-blue-600 focus:ring-blue-500">
          <span class="text-sm text-gray-700 dark:text-gray-300">{{ u.full_name }}</span>
        </label>
        {% empty %}<p class="text-sm text-gray-400 py-4 text-center">No users with tickets in this project</p>{% endfor %}
      </div>
    </div>
    <div class="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-600">
      <button @click="clearFilter()"
              class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">Clear</button>
      <div class="flex items-center gap-3">
        <button type="button" @click="filterOpen = false"
                class="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors">Cancel</button>
        <button @click="applyFilter()"
                class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-white rounded-lg"
                style="background-color:var(--color-primary,#3b82f6);">
          <i class="fas fa-check"></i> Apply
        </button>
      </div>
    </div>
  </div>
</div>

<!-- Manage Statuses Modal -->
<div x-cloak x-show="manageStatusesOpen" class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
     @keydown.escape.window="manageStatusesOpen = false">
  <div class="fixed inset-0 bg-black/50" @click="manageStatusesOpen = false"></div>
  <div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-6xl mx-auto my-auto max-h-[90vh] overflow-y-auto z-10 p-6 md:p-8">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white">Manage Ticket Statuses</h3>
      <button @click="manageStatusesOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times text-xl"></i></button>
    </div>

    <!-- Create Status Form -->
    <div class="rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 mb-4">
      <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">New Status</h4>
      <form method="post" action="{% url 'ticket-status-create' %}" class="grid grid-cols-12 gap-3 items-end">
        {% csrf_token %}
        <input type="hidden" name="project_id" value="{{ selected_project.id }}">
        <div class="col-span-3">
          <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Name</label>
          <input type="text" name="name" x-model="createStatusName" required
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
        </div>
        <div class="col-span-2">
          <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Color</label>
          <div class="flex items-center gap-2">
            <toolcool-color-picker popup-position="left" :color="createStatusColor" @change="createStatusColor = $event.detail.hex" class="shrink-0"></toolcool-color-picker>
            <input type="text" name="color" x-model="createStatusColor" required
                   class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none uppercase font-mono">
          </div>
        </div>
        <div class="col-span-2">
          <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Order</label>
          <input type="number" name="sort_order" x-model="createStatusOrder" required
                 class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
        </div>
        <div class="col-span-3 flex items-center gap-3 pb-1">
          <label class="flex items-center gap-2 cursor-pointer">
            <input type="checkbox" name="is_completed" x-model="createStatusCompleted" class="w-4 h-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
            <span class="text-xs font-medium text-gray-700 dark:text-gray-300">Completed</span>
          </label>
          <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors">Add</button>
        </div>
      </form>
    </div>

    <!-- Status List -->
    <div class="rounded-xl bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-gray-800">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Name</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Color</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Order</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Completed</th>
            <th class="px-4 py-3 text-right text-xs font-medium 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 col in columns %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30" x-data="{ editing: false }">
            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ col.status.name }}</td>
            <td class="px-4 py-3">
              <span class="inline-flex items-center gap-1.5 text-xs">
                <span class="w-3 h-3 rounded-full inline-block" style="background-color:{{ col.status.color }}"></span>{{ col.status.color }}
              </span>
            </td>
            <td class="px-4 py-3 text-gray-500 dark:text-gray-400">{{ col.status.sort_order }}</td>
            <td class="px-4 py-3">
              {% if col.status.is_completed %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">Yes</span>
              {% else %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400">No</span>
              {% endif %}
            </td>
            <td class="px-4 py-3 text-right whitespace-nowrap">
              <!-- Edit form (inline toggle) -->
              <form x-show="editing" x-cloak method="post" action="/ticket-statuses/{{ col.status.id }}/edit/" class="flex items-center gap-2">
                {% csrf_token %}
                <input type="text" name="name" :value="editStatusName" required
                       class="w-28 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-2 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                <div class="flex items-center gap-1">
                  <toolcool-color-picker popup-position="left" :color="editStatusColor" @change="editStatusColor = $event.detail.hex" class="shrink-0" style="height:28px;"></toolcool-color-picker>
                  <input type="text" name="color" x-model="editStatusColor" required
                         class="w-20 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-2 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none uppercase font-mono">
                </div>
                <input type="number" name="sort_order" x-model="editStatusOrder" required
                       class="w-16 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-2 py-1 text-xs focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
                <label class="flex items-center gap-1 text-xs whitespace-nowrap">
                  <input type="checkbox" name="is_completed" x-model="editStatusCompleted" class="w-3 h-3 text-blue-600 rounded border-gray-300">
                  Done
                </label>
                <button type="submit" class="px-2 py-1 text-xs font-medium text-white bg-blue-600 rounded hover:bg-blue-700"><i class="fas fa-check"></i></button>
                <button type="button" @click="editing = false" class="px-2 py-1 text-xs font-medium text-gray-600 bg-gray-100 dark:bg-gray-800 rounded hover:bg-gray-200"><i class="fas fa-times"></i></button>
              </form>

              <!-- Action buttons (hidden when editing) -->
              <div x-show="!editing" class="flex items-center gap-1">
                <button type="button" @click="editStatusId='{{ col.status.id }}'; editStatusName='{{ col.status.name|escapejs }}'; editStatusColor='{{ col.status.color|escapejs }}'; editStatusOrder='{{ col.status.sort_order }}'; editStatusCompleted={{ col.status.is_completed|lower }}; editing = true" class="inline-flex items-center gap-1 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">
                  <i class="fas fa-pen"></i>
                </button>
                <form method="post" action="{% url 'ticket-status-delete' col.status.id %}" class="inline">
                  {% csrf_token %}
                  <input type="hidden" name="project_id" value="{{ selected_project.id }}">
                  <button type="button" @click="confirmAction({title:'Delete Status', message:'Delete this status? This cannot be undone.', confirmText:'Delete', danger:true, onConfirm:function(){ $el.closest('form').submit() }})" class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors shadow-sm">
                    <i class="fas fa-trash"></i>
                  </button>
                </form>
              </div>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="5" class="px-4 py-8 text-center text-sm text-gray-400">No statuses found.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    </div>
  </div>
</div>

<!-- Board Permissions Modal -->
<div x-cloak x-show="permissionsOpen" class="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto"
     @keydown.escape.window="permissionsOpen = false">
  <div class="fixed inset-0 bg-black/50" @click="permissionsOpen = false"></div>
  <div class="relative bg-white dark:bg-gray-950 rounded-xl shadow-xl border border-gray-200 dark:border-gray-600 w-full max-w-6xl mx-auto my-auto max-h-[90vh] overflow-y-auto z-10 p-6 md:p-8">
    <div class="flex items-center justify-between mb-4">
      <h3 class="text-xl font-bold text-gray-900 dark:text-white">Board Permissions</h3>
      <button @click="permissionsOpen = false" class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"><i class="fas fa-times text-xl"></i></button>
    </div>

    <!-- Add Permission Form -->
    <div class="rounded-lg bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 p-4 mb-4">
      <h4 class="text-sm font-semibold text-gray-900 dark:text-white mb-3">Add / Update Permission</h4>
      <form method="post" action="{% url 'board-permissions' selected_project.id %}">
        {% csrf_token %}
        <div class="grid grid-cols-12 gap-3 items-start">
          <div class="col-span-3">
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Role</label>
            <select name="role" required
                    class="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-950 px-3 py-2 text-sm focus:border-blue-500 focus:ring-1 focus:ring-blue-500 outline-none">
              <option value="">Select a role</option>
              {% for role_key, role_label in role_choices %}
                {% if role_key not in admin_roles %}
                <option value="{{ role_key }}">{{ role_label }}</option>
                {% endif %}
              {% endfor %}
            </select>
          </div>
          <div class="col-span-7">
            <label class="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Can move to</label>
            <div class="grid grid-cols-3 gap-x-4 gap-y-1.5">
              {% for col in columns %}
              <label class="flex items-center gap-2 cursor-pointer">
                <input type="checkbox" name="move_to_statuses" value="{{ col.status.id }}"
                       class="w-3.5 h-3.5 text-blue-600 rounded border-gray-300 focus:ring-blue-500">
                <span class="w-2.5 h-2.5 rounded-full inline-block flex-shrink-0" style="background-color:{{ col.status.color }}"></span>
                <span class="text-xs text-gray-700 dark:text-gray-300 truncate">{{ col.status.name }}</span>
              </label>
              {% endfor %}
            </div>
          </div>
          <div class="col-span-2 pt-5">
            <button type="submit" class="px-4 py-2 text-sm font-medium text-white bg-blue-600 rounded-lg hover:bg-blue-700 transition-colors w-full">Save</button>
          </div>
        </div>
      </form>
    </div>

    <!-- Permissions List -->
    <div class="rounded-xl bg-white dark:bg-gray-950 border border-gray-200 dark:border-gray-700 overflow-hidden">
    <div class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead class="bg-gray-50 dark:bg-gray-800">
          <tr>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Role</th>
            <th class="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Can move to</th>
            <th class="px-4 py-3 text-right text-xs font-medium 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 perm in permissions %}
          <tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30">
            <td class="px-4 py-3 font-medium text-gray-900 dark:text-white">{{ perm.get_role_display }}</td>
            <td class="px-4 py-3">
              <div class="flex flex-wrap gap-1.5">
                {% for status in perm.move_to_statuses.all %}
                <span class="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium" style="background-color:{{ status.color }}20;color:{{ status.color }}">
                  <span class="w-1.5 h-1.5 rounded-full" style="background-color:{{ status.color }}"></span>
                  {{ status.name }}
                </span>
                {% empty %}
                <span class="text-xs text-gray-400 italic">None</span>
                {% endfor %}
              </div>
            </td>
            <td class="px-4 py-3 text-right">
              <form method="post" action="{% url 'board-permission-delete' selected_project.id perm.id %}" class="inline">
                {% csrf_token %}
                <button type="button" @click="confirmAction({title:'Delete Permission', message:'Delete permission for <strong>' + '{{ perm.get_role_display|escapejs }}' + '</strong>?', confirmText:'Delete', danger:true, onConfirm:function(){ $el.closest('form').submit() }})" class="inline-flex items-center gap-1 px-2.5 py-1.5 text-xs font-medium text-red-600 dark:text-red-400 bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors shadow-sm">
                  <i class="fas fa-trash"></i>
                </button>
              </form>
            </td>
          </tr>
          {% empty %}
          <tr><td colspan="3" class="px-4 py-8 text-center text-sm text-gray-400">No permissions configured. All non-admin roles are restricted by default.</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    </div>
    <p class="text-xs text-gray-500 dark:text-gray-400 mt-4"><i class="fas fa-info-circle"></i> Superadmin and manager roles always have full access. Select the statuses a developer role can move tickets to.</p>
  </div>
</div>

{% endif %}
</div>
{% endblock %}

{% block extra_scripts %}
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('#new-ticket-form select:not([disabled])').forEach((el) => {
      let plugins = [];
      if (el.hasAttribute('multiple')) {
        plugins.push('remove_button');
      }
      new TomSelect(el, {
        plugins: plugins,
        create: false,
        maxOptions: 50
      });
    });
  });
</script>
{% endblock %}