{# Reusable Kanban board for tasks. Expects `tasks` and `kanban_columns` in context. #}

<div class="kanban-board-wrapper">
  <div class="kanban-toolbar d-flex justify-content-between align-items-center mb-4">
    <div class="d-flex align-items-center gap-2">
      <div class="kanban-toolbar-icon">
        <i class="fas fa-columns"></i>
      </div>
      <h5 class="kanban-toolbar-title mb-0">{{ _('Kanban Board') }}</h5>
    </div>
    {% if current_user.is_admin %}
    <div>
      <a href="{{ url_for('kanban.list_columns') }}" class="btn btn-sm btn-outline-secondary">
        <i class="fas fa-cog"></i> {{ _('Manage Columns') }}
      </a>
    </div>
    {% endif %}
  </div>

  <div id="kanbanBoard" class="kanban-board">
    {% for col in kanban_columns %}
    <div class="kanban-column" data-status="{{ col.key }}" data-column-color="{{ col.color }}">
      <div class="kanban-column-header">
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center gap-2">
            <div class="kanban-status-icon kanban-status-{{ col.key }}" style="--column-color: {{ col.color }};">
              <i class="{{ col.icon }}"></i>
            </div>
            <h6 class="kanban-column-title mb-0">{{ col.label }}</h6>
          </div>
          <span class="kanban-count kanban-count-{{ col.key }}">
            {{ tasks|selectattr('status', 'equalto', col.key)|list|length }}
          </span>
        </div>
      </div>
      <div class="kanban-column-body" data-status="{{ col.key }}">
        {% for task in tasks if task.status == col.key %}
        <div class="kanban-card {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}kanban-card-active{% endif %}" 
             draggable="true" 
             data-task-id="{{ task.id }}" 
             data-status="{{ task.status }}"
             data-priority="{{ task.priority }}">
          
          <!-- Card Header with ID and Actions -->
          <div class="kanban-card-header">
            <div class="kanban-card-id">#{{ task.id }}</div>
            <div class="kanban-card-actions">
                {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}
                <form method="POST" action="{{ url_for('timer.stop_timer') }}" class="d-inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="kanban-action-btn kanban-action-stop" title="{{ _('Stop Timer') }}">
                  <i class="fas fa-stop"></i>
                  </button>
                </form>
                {% else %}
                <form method="POST" action="{{ url_for('timer.start_timer') }}" class="d-inline">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <input type="hidden" name="project_id" value="{{ task.project_id }}">
                  <input type="hidden" name="task_id" value="{{ task.id }}">
                <button type="submit" class="kanban-action-btn kanban-action-play" title="{{ _('Start Timer') }}">
                  <i class="fas fa-play"></i>
                  </button>
                </form>
                {% endif %}
              <a href="{{ url_for('tasks.edit_task', task_id=task.id) }}" class="kanban-action-btn kanban-action-edit" title="{{ _('Edit Task') }}">
                  <i class="fas fa-pen"></i>
                </a>
              </div>
            </div>

          <!-- Priority Indicator -->
          <div class="kanban-card-priority kanban-priority-{{ task.priority }}"></div>

          <!-- Card Content -->
          <div class="kanban-card-content">
            <h6 class="kanban-card-title">
              <a href="javascript:void(0);" onclick="openTaskModal({{ task.id }})">{{ task.name }}</a>
            </h6>
            {% if task.project %}
            <div class="mb-2">
              <span class="kanban-badge" style="background:#e5e7eb;color:#374151;">{{ task.project.code_display }}</span>
            </div>
            {% endif %}
            
            {% if task.description %}
            <p class="kanban-card-description">
              {{ task.description[:90] }}{% if task.description|length > 90 %}...{% endif %}
            </p>
            {% endif %}

            <!-- Badges Row -->
            <div class="kanban-card-badges">
              <span class="kanban-badge kanban-badge-priority kanban-badge-priority-{{ task.priority }}">
                {{ task.priority_display }}
              </span>
              {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}
              <span class="kanban-badge kanban-badge-active">
                <i class="fas fa-circle-dot"></i> {{ _('Active') }}
              </span>
              {% endif %}
              {% if task.is_overdue %}
              <span class="kanban-badge kanban-badge-overdue">
                <i class="fas fa-exclamation-triangle"></i> {{ _('Overdue') }}
              </span>
              {% endif %}
            </div>

            <!-- Progress Bar -->
            {% if task.estimated_hours %}
            <div class="kanban-card-progress">
              <div class="kanban-progress-header">
                <span class="kanban-progress-label">{{ _('Progress') }}</span>
                <span class="kanban-progress-value">{{ task.progress_percentage }}%</span>
            </div>
              <div class="kanban-progress-bar">
                <div class="kanban-progress-fill" style="width: {{ task.progress_percentage }}%"></div>
              </div>
            </div>
            {% endif %}
          </div>

          <!-- Card Footer -->
          <div class="kanban-card-footer">
            <div class="kanban-card-meta">
                {% if task.assigned_user %}
              <div class="kanban-meta-item kanban-meta-assignee" title="{{ task.assigned_user.display_name }}">
                <i class="fas fa-user"></i>
                <span>{{ task.assigned_user.display_name }}</span>
              </div>
              {% endif %}
              {% if task.due_date %}
              <div class="kanban-meta-item kanban-meta-date {% if task.is_overdue %}kanban-meta-overdue{% endif %}" title="{{ _('Due Date') }}">
                <i class="fas fa-calendar"></i>
                <span>{{ task.due_date.strftime('%b %d') }}</span>
              </div>
              {% endif %}
            </div>
          </div>
        </div>
        {% endfor %}
      </div>
    </div>
    {% endfor %}
  </div>
</div>

<style>
/* ============================================
   KANBAN BOARD - MODERN REDESIGN
   ============================================ */

/* Toolbar */
.kanban-board-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.kanban-toolbar {
  padding: 0;
  margin-bottom: 24px;
}

.kanban-toolbar-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.kanban-toolbar-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

/* Board Layout */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  align-items: start;
}

/* Column Styles */
.kanban-column {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  min-height: 150px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: box-shadow 0.2s ease;
}

.kanban-column:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.kanban-column-header {
  padding: 16px 18px;
  border-bottom: 2px solid #f3f4f6;
  background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.kanban-column-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Status Icons */
.kanban-status-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.kanban-status-todo {
  background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #64748b;
}

.kanban-status-in_progress {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  color: #d97706;
}

.kanban-status-review {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #2563eb;
}

.kanban-status-done {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  color: #059669;
}

/* Count Badge */
.kanban-count {
  min-width: 28px;
  height: 28px;
  padding: 0 10px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  background: #f3f4f6;
  color: #6b7280;
}

.kanban-count-todo { background: #f1f5f9; color: #64748b; }
.kanban-count-in_progress { background: #fef3c7; color: #d97706; }
.kanban-count-review { background: #dbeafe; color: #2563eb; }
.kanban-count-done { background: #d1fae5; color: #059669; }

/* Column Body */
.kanban-column-body {
  padding: 16px;
  min-height: 150px;
  max-height: 75vh;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fafbfc;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

.kanban-column-body::-webkit-scrollbar {
  width: 6px;
}

.kanban-column-body::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-column-body::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.kanban-column-body::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Drag and Drop States */
.kanban-column-body.drag-over {
  background: rgba(59, 130, 246, 0.05);
  outline: 2px dashed #3b82f6;
  outline-offset: -8px;
}

/* ============================================
   KANBAN CARDS - ENHANCED DESIGN
   ============================================ */

.kanban-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  margin-bottom: 12px;
  cursor: grab;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.kanban-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  border-color: #cbd5e1;
}

.kanban-card:active {
  cursor: grabbing;
}

.kanban-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
  transform: rotate(3deg);
}

/* Active Card State */
.kanban-card-active {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1), 0 4px 12px rgba(59, 130, 246, 0.15);
}

.kanban-card-active:hover {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15), 0 8px 20px rgba(59, 130, 246, 0.2);
}

/* Card Header */
.kanban-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px 14px;
  background: linear-gradient(to bottom, #fafbfc 0%, #ffffff 100%);
  border-bottom: 1px solid #f3f4f6;
}

.kanban-card-id {
  font-size: 0.75rem;
  font-weight: 600;
  color: #9ca3af;
  letter-spacing: 0.02em;
}

.kanban-card-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.kanban-card:hover .kanban-card-actions {
  opacity: 1;
}

.kanban-action-btn {
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
  background: #f3f4f6;
  color: #6b7280;
}

.kanban-action-btn:hover {
  transform: scale(1.05);
}

.kanban-action-play {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.kanban-action-play:hover {
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.kanban-action-stop {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
}

.kanban-action-stop:hover {
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.kanban-action-edit:hover {
  background: #e5e7eb;
  color: #374151;
}

/* Priority Indicator */
.kanban-card-priority {
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.kanban-priority-low {
  background: linear-gradient(to bottom, #10b981 0%, #059669 100%);
}

.kanban-priority-medium {
  background: linear-gradient(to bottom, #f59e0b 0%, #d97706 100%);
}

.kanban-priority-high {
  background: linear-gradient(to bottom, #f97316 0%, #ea580c 100%);
}

.kanban-priority-urgent {
  background: linear-gradient(to bottom, #ef4444 0%, #dc2626 100%);
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

/* Card Content */
.kanban-card-content {
  padding: 14px;
}

.kanban-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 8px;
  color: var(--text-primary);
}

.kanban-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}

.kanban-card-title a:hover {
  color: #3b82f6;
}

.kanban-card-description {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: #6b7280;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Badges */
.kanban-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.kanban-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.kanban-badge i {
  font-size: 10px;
}

.kanban-badge-priority-low {
  background: #d1fae5;
  color: #065f46;
}

.kanban-badge-priority-medium {
  background: #fef3c7;
  color: #92400e;
}

.kanban-badge-priority-high {
  background: #fed7aa;
  color: #9a3412;
}

.kanban-badge-priority-urgent {
  background: #fee2e2;
  color: #991b1b;
}

.kanban-badge-active {
  background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
  color: #1e40af;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.8; }
}

.kanban-badge-overdue {
  background: #fee2e2;
  color: #991b1b;
}

/* Progress Bar */
.kanban-card-progress {
  margin-bottom: 12px;
}

.kanban-progress-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.kanban-progress-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kanban-progress-value {
  font-size: 0.75rem;
  font-weight: 600;
  color: #3b82f6;
}

.kanban-progress-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.kanban-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Card Footer */
.kanban-card-footer {
  padding: 0 14px 14px 14px;
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.kanban-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: #6b7280;
  padding: 6px 10px;
  background: #f9fafb;
  border-radius: 6px;
  white-space: nowrap;
}

.kanban-meta-item i {
  font-size: 12px;
  opacity: 0.7;
}

.kanban-meta-assignee {
  color: #0ea5e9;
  background: #f0f9ff;
}

.kanban-meta-assignee i {
  color: #0ea5e9;
}

.kanban-meta-date {
  color: #6b7280;
}

.kanban-meta-overdue {
  color: #dc2626;
  background: #fef2f2;
  font-weight: 600;
}

.kanban-meta-overdue i {
  color: #dc2626;
}

/* Responsive Design */
@media (max-width: 768px) {
  .kanban-board {
    grid-template-columns: 1fr;
  }
  
  .kanban-card-meta {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .kanban-meta-item {
    width: 100%;
  }
}

/* Dark Mode Support */
[data-theme="dark"] .kanban-toolbar-title,
[data-theme="dark"] .kanban-column-title {
  color: #f1f5f9;
}

[data-theme="dark"] .kanban-column {
  background: #0f172a;
  border-color: #1e293b;
}

[data-theme="dark"] .kanban-column-header {
  background: linear-gradient(to bottom, #0f172a 0%, #0a0f1e 100%);
  border-bottom-color: #1e293b;
}

[data-theme="dark"] .kanban-column-body {
  background: #0a0f1e;
}

[data-theme="dark"] .kanban-card {
  background: #1e293b;
  border-color: #334155;
}

[data-theme="dark"] .kanban-card:hover {
  border-color: #475569;
}

[data-theme="dark"] .kanban-card-header {
  background: linear-gradient(to bottom, #1e293b 0%, #1e293b 100%);
  border-bottom-color: #334155;
}

[data-theme="dark"] .kanban-card-id {
  color: #64748b;
}

[data-theme="dark"] .kanban-card-title {
  color: #f1f5f9;
}

[data-theme="dark"] .kanban-card-description {
  color: #94a3b8;
}

[data-theme="dark"] .kanban-action-btn {
  background: #334155;
  color: #94a3b8;
}

[data-theme="dark"] .kanban-action-edit:hover {
  background: #475569;
  color: #e2e8f0;
}

[data-theme="dark"] .kanban-meta-item {
  background: #0f172a;
  color: #94a3b8;
}

[data-theme="dark"] .kanban-progress-bar {
  background: #334155;
}

[data-theme="dark"] .kanban-count {
  background: #1e293b;
  color: #94a3b8;
}

/* Professional Task Modal Styles */
.task-modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 50px rgba(0,0,0,0.15); overflow: hidden; }
.task-modal-icon { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); }
.task-modal-title { font-size: 1.25rem; font-weight: 600; color: var(--text-primary); margin: 0; line-height: 1.4; }
.task-modal-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.task-modal-field { padding: 12px; background: var(--light-color, #f8fafc); border-radius: 10px; transition: all 0.2s ease; }
.task-modal-field:hover { background: var(--surface-hover, #f1f5f9); }
.task-modal-value { font-size: 0.9375rem; color: var(--text-primary); font-weight: 500; }
.task-modal-section { padding: 0; }
.task-modal-description { padding: 16px; background: var(--light-color, #f8fafc); border-radius: 10px; color: var(--text-primary); line-height: 1.6; border-left: 3px solid var(--primary-color); }
.task-modal-project-card { padding: 14px; background: var(--light-color, #f8fafc); border-radius: 10px; border-left: 3px solid var(--primary-color); display: flex; align-items: center; gap: 12px; transition: all 0.2s ease; }
.task-modal-project-card:hover { background: var(--surface-hover, #f1f5f9); transform: translateX(2px); }
.task-modal-project-icon { width: 36px; height: 36px; border-radius: 8px; background: var(--primary-color); background: linear-gradient(135deg, var(--primary-color) 0%, #2563eb 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 14px; }
.task-modal-progress { height: 10px; border-radius: 10px; background: var(--light-color, #e5e7eb); overflow: hidden; }
.task-modal-progress .progress-bar { background: linear-gradient(90deg, var(--primary-color) 0%, #2563eb 100%); border-radius: 10px; transition: width 0.4s ease; }
.task-modal-progress-text { font-size: 0.875rem; font-weight: 600; color: var(--primary-color); min-width: 45px; text-align: right; }
.task-modal-stat { display: flex; align-items: center; gap: 12px; padding: 14px; background: var(--light-color, #f8fafc); border-radius: 10px; transition: all 0.2s ease; }
.task-modal-stat:hover { background: var(--surface-hover, #f1f5f9); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.task-modal-stat-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.task-modal-stat-content { flex-grow: 1; min-width: 0; }
.task-modal-stat-value { font-size: 1.125rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.task-modal-stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.bg-primary-subtle { background-color: rgba(59, 130, 246, 0.1); }
.bg-info-subtle { background-color: rgba(14, 165, 233, 0.1); }
.bg-success-subtle { background-color: rgba(34, 197, 94, 0.1); }

/* Dark Mode Support */
[data-theme="dark"] .task-modal-content { background: #0f172a; }
[data-theme="dark"] .task-modal-title { color: var(--text-secondary); }
[data-theme="dark"] .task-modal-field { background: #1e293b; }
[data-theme="dark"] .task-modal-field:hover { background: #334155; }
[data-theme="dark"] .task-modal-description { background: #1e293b; color: var(--text-secondary); }
[data-theme="dark"] .task-modal-project-card { background: #1e293b; }
[data-theme="dark"] .task-modal-project-card:hover { background: #334155; }
[data-theme="dark"] .task-modal-progress { background: #1e293b; }
[data-theme="dark"] .task-modal-stat { background: #1e293b; }
[data-theme="dark"] .task-modal-stat:hover { background: #334155; }
[data-theme="dark"] .task-modal-value { color: var(--text-secondary); }
[data-theme="dark"] .modal-header { background: #0f172a; border-color: #1e293b; }
[data-theme="dark"] .modal-body { background: #0f172a; }
[data-theme="dark"] .modal-footer { background: #0f172a; border-color: #1e293b; }

/* Responsive */
@media (max-width: 576px) {
  .task-modal-stat { padding: 10px; }
  .task-modal-stat-icon { width: 32px; height: 32px; font-size: 14px; }
  .task-modal-stat-value { font-size: 1rem; }
  .task-modal-stat-label { font-size: 0.7rem; }
}
</style>

<script>
(function(){
  const board = document.getElementById('kanbanBoard');
  if (!board) return;

  const statusLabels = { 
    {% for col in kanban_columns %}
    '{{ col.key }}': '{{ col.label }}'{% if not loop.last %},{% endif %}
    {% endfor %}
  };
  const updateUrlTemplate = "{{ url_for('tasks.api_update_status', task_id=0) }}"; // will replace 0 with actual id
  // Track columns signature to avoid redundant rebuilds
  let lastColumnsSignature = null;

  function computeColumnsSignature(columns){
    try {
      return (columns || []).map(c => [c.key, c.label, c.icon, c.color, c.is_active ? 1 : 0].join('|')).join(',');
    } catch(_) { return null; }
  }

  async function fetchColumnsNoStore(){
    const resp = await fetch('/api/kanban/columns?_=' + Date.now(), {
      headers: { 'X-Requested-With': 'XMLHttpRequest', 'Cache-Control': 'no-cache' },
      cache: 'no-store'
    });
    if (!resp.ok) throw new Error('Failed to fetch columns');
    const payload = await resp.json();
    return Array.isArray(payload.columns) ? payload.columns : [];
  }

  function rebuildBoardColumns(columns){
    const existingCardsByStatus = {};
    document.querySelectorAll('.kanban-column-body').forEach(body => {
      const status = body.getAttribute('data-status');
      existingCardsByStatus[status] = Array.from(body.querySelectorAll('.kanban-card'));
    });

    const boardEl = document.getElementById('kanbanBoard');
    if (!boardEl) return;
    boardEl.innerHTML = '';

    columns.forEach(col => {
      const colEl = document.createElement('div');
      colEl.className = 'kanban-column';
      colEl.setAttribute('data-status', col.key);
      colEl.setAttribute('data-column-color', col.color || 'secondary');

      const header = document.createElement('div');
      header.className = 'kanban-column-header';
      header.innerHTML = `
        <div class="d-flex align-items-center justify-content-between">
          <div class="d-flex align-items-center gap-2">
            <div class="kanban-status-icon kanban-status-${col.key}" style="--column-color: ${col.color || 'var(--primary-color)'};">
              <i class="${col.icon || 'fas fa-circle'}"></i>
            </div>
            <h6 class="kanban-column-title mb-0">${col.label}</h6>
          </div>
          <span class="kanban-count kanban-count-${col.key}">0</span>
        </div>`;

      const body = document.createElement('div');
      body.className = 'kanban-column-body';
      body.setAttribute('data-status', col.key);

      const cards = existingCardsByStatus[col.key] || [];
      cards.forEach(card => { body.appendChild(card); });

      colEl.appendChild(header);
      colEl.appendChild(body);
      boardEl.appendChild(colEl);
    });

    bindDragAndDrop();
    updateCounts();
  }


  function updateCounts() {
    document.querySelectorAll('.kanban-column').forEach(col => {
      const body = col.querySelector('.kanban-column-body');
      const count = body ? body.querySelectorAll('.kanban-card').length : 0;
      const badge = col.querySelector('.kanban-count');
      if (badge) badge.textContent = count;
    });
  }

  let dragCard = null;
  board.addEventListener('dragstart', (e) => {
    const card = e.target.closest('.kanban-card');
    if (!card) return;
    dragCard = card;
    card.classList.add('dragging');
    e.dataTransfer.effectAllowed = 'move';
    e.dataTransfer.setData('text/plain', card.dataset.taskId);
  });

  board.addEventListener('dragend', () => {
    if (dragCard) dragCard.classList.remove('dragging');
    dragCard = null;
    document.querySelectorAll('.kanban-column-body').forEach(b => b.classList.remove('drag-over'));
  });

  document.querySelectorAll('.kanban-column-body').forEach(body => {
    body.addEventListener('dragover', (e) => {
      e.preventDefault();
      e.dataTransfer.dropEffect = 'move';
      body.classList.add('drag-over');
    });
    body.addEventListener('dragleave', () => body.classList.remove('drag-over'));
    body.addEventListener('drop', async (e) => {
      e.preventDefault();
      body.classList.remove('drag-over');
      const targetStatus = body.dataset.status;
      const taskId = e.dataTransfer.getData('text/plain');
      const card = dragCard || board.querySelector(`.kanban-card[data-task-id="${taskId}"]`);
      if (!card) return;
      const originalParent = card.parentElement;
      const originalStatus = card.dataset.status;
      if (targetStatus === originalStatus) {
        body.appendChild(card);
        return;
      }
      body.appendChild(card);
      updateCounts();
      // optimistic UI: update card status
      card.dataset.status = targetStatus;

      const url = updateUrlTemplate.replace('/0/', `/${taskId}/`);
      try {
        const resp = await fetch(url, {
          method: 'PUT',
          headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
          body: JSON.stringify({ status: targetStatus })
        });
        if (!resp.ok) {
          throw new Error('{{ _('Failed to update status') }}');
        }
        const data = await resp.json();
        if (!data.success) {
          throw new Error(data.error || 'Update rejected');
        }
      } catch (err) {
        // revert
        if (originalParent) originalParent.appendChild(card);
        card.dataset.status = originalStatus;
        updateCounts();
        alert('{{ _('Failed to update task status') }}');
      }
    });
  });

  updateCounts();

  // Live handler for Kanban column updates, invoked by base listener
  window.handleKanbanColumnsUpdated = async function(data){
    try {
      // Use global toast system
      if (window.toastManager) {
        const action = (data && data.action) ? String(data.action) : 'updated';
        const msg = action === 'created' ? '{{ _('Kanban column created') }}'
                  : action === 'deleted' ? '{{ _('Kanban column deleted') }}'
                  : action === 'reordered' ? '{{ _('Kanban columns reordered') }}'
                  : action === 'toggled' ? '{{ _('Kanban column visibility changed') }}'
                  : '{{ _('Kanban columns updated') }}';
        window.toastManager.info(msg, '{{ _('Update') }}', 3000);
      } else {
        try { showToast('{{ _('Kanban columns updated') }}', 'info'); } catch(_) {}
      }

      const columns = await fetchColumnsNoStore();
      const sig = computeColumnsSignature(columns);
      if (sig && sig !== lastColumnsSignature) {
        rebuildBoardColumns(columns);
        lastColumnsSignature = sig;
      }
    } catch (e) {
      console.warn('Failed to update Kanban columns live:', e);
      try { showToast('{{ _('Failed to refresh kanban columns') }}', 'warning'); } catch(_) {}
    }
  };

  // Extract drag/drop binding into a function so we can reapply after DOM rebuilds
  function bindDragAndDrop(){
    document.querySelectorAll('.kanban-column-body').forEach(body => {
      // Remove old listeners by cloning
      const clone = body.cloneNode(true);
      body.parentNode.replaceChild(clone, body);
    });
    document.querySelectorAll('.kanban-column-body').forEach(body => {
      body.addEventListener('dragover', (e) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
        body.classList.add('drag-over');
      });
      body.addEventListener('dragleave', () => body.classList.remove('drag-over'));
      body.addEventListener('drop', async (e) => {
        e.preventDefault();
        body.classList.remove('drag-over');
        const targetStatus = body.dataset.status;
        const taskId = e.dataTransfer.getData('text/plain');
        const card = dragCard || board.querySelector(`.kanban-card[data-task-id="${taskId}"]`);
        if (!card) return;
        const originalParent = card.parentElement;
        const originalStatus = card.dataset.status;
        if (targetStatus === originalStatus) { body.appendChild(card); return; }
        body.appendChild(card);
        updateCounts();
        card.dataset.status = targetStatus;
        const url = updateUrlTemplate.replace('/0/', `/${taskId}/`);
        try {
          const resp = await fetch(url, {
            method: 'PUT',
            headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' },
            body: JSON.stringify({ status: targetStatus })
          });
          if (!resp.ok) throw new Error('Failed');
          const data = await resp.json();
          if (!data.success) throw new Error(data.error || 'Rejected');
        } catch (err) {
          if (originalParent) originalParent.appendChild(card);
          card.dataset.status = originalStatus;
          updateCounts();
          try { showToast('{{ _('Failed to update task status') }}', 'error'); } catch(_) { alert('{{ _('Failed to update task status') }}'); }
        }
      });
    });
  }

  // Initial bind of drag/drop now that function exists
  bindDragAndDrop();
  // Background polling fallback to catch missed events
  try {
    setInterval(async () => {
      try {
        const columns = await fetchColumnsNoStore();
        const sig = computeColumnsSignature(columns);
        if (sig && sig !== lastColumnsSignature) {
          rebuildBoardColumns(columns);
          lastColumnsSignature = sig;
          if (window.toastManager) window.toastManager.info('{{ _('Kanban columns updated') }}', '{{ _('Update') }}', 2000);
        }
      } catch(_) {}
    }, 15000);
  } catch(_) {}
})();
</script>

<!-- Task Modal JavaScript -->
<script>
// Global function to open task modal
window.openTaskModal = async function(taskId) {
  const modalEl = document.getElementById('taskQuickViewModal');
  
  // Ensure modal is attached to body to avoid stacking/pointer issues
  if (modalEl && modalEl.parentElement !== document.body) {
    document.body.appendChild(modalEl);
  }
  
  const modal = new bootstrap.Modal(modalEl);
  
  // Show loading state
  document.querySelector('.task-modal-loading').style.display = 'block';
  document.querySelector('.task-modal-content-wrapper').style.display = 'none';
  
  modal.show();
  
  try {
    // Fetch task details from API
    const response = await fetch(`/api/tasks/${taskId}`);
    if (!response.ok) throw new Error('Failed to load task');
    
    const task = await response.json();
    
    // Populate modal with task data
    document.getElementById('taskModalName').textContent = task.name;
    document.getElementById('taskModalId').textContent = `#${task.id}`;
    
    // Status badge
    const statusBadge = `<span class="status-badge status-${task.status}">${task.status_display || task.status}</span>`;
    document.getElementById('taskModalStatus').innerHTML = statusBadge;
    
    // Priority badge
    const priorityBadge = `<span class="priority-badge priority-${task.priority}">${task.priority_display || task.priority}</span>`;
    document.getElementById('taskModalPriority').innerHTML = priorityBadge;
    
    // Project info
    const projectHtml = `
      <div class="task-modal-project-icon">
        <i class="fas fa-project-diagram"></i>
      </div>
      <div>
        <div class="fw-semibold" style="color: var(--text-primary);">${task.project?.name || 'N/A'}</div>
        <small class="text-muted">${task.project?.client || ''}</small>
      </div>
    `;
    document.getElementById('taskModalProject').innerHTML = projectHtml;
    
    // Description
    const descSection = document.getElementById('taskModalDescriptionSection');
    if (task.description && task.description.trim()) {
      descSection.style.display = 'block';
      document.getElementById('taskModalDescription').textContent = task.description;
    } else {
      descSection.style.display = 'none';
    }
    
    // Assigned user
    const assignedSection = document.getElementById('taskModalAssignedSection');
    if (task.assigned_user) {
      assignedSection.style.display = 'block';
      const assignedHtml = `
        <div class="d-flex align-items-center gap-2">
          <div class="bg-primary bg-opacity-10 rounded-circle d-flex align-items-center justify-content-center" style="width: 28px; height: 28px;">
            <i class="fas fa-user text-primary" style="font-size: 12px;"></i>
          </div>
          <span>${task.assigned_user.display_name || task.assigned_user.username}</span>
        </div>
      `;
      document.getElementById('taskModalAssigned').innerHTML = assignedHtml;
    } else {
      assignedSection.style.display = 'none';
    }
    
    // Due date
    const dueDateSection = document.getElementById('taskModalDueDateSection');
    if (task.due_date) {
      dueDateSection.style.display = 'block';
      const dueDate = new Date(task.due_date);
      const isOverdue = task.is_overdue || (dueDate < new Date() && task.status !== 'done');
      const dueDateHtml = `
        <span class="${isOverdue ? 'text-danger fw-semibold' : ''}">
          <i class="fas fa-calendar me-1"></i>
          ${dueDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
          ${isOverdue ? '<span class="badge bg-danger ms-2">Overdue</span>' : ''}
        </span>
      `;
      document.getElementById('taskModalDueDate').innerHTML = dueDateHtml;
    } else {
      dueDateSection.style.display = 'none';
    }
    
    // Progress
    const progressSection = document.getElementById('taskModalProgressSection');
    const estimatedSection2 = document.getElementById('taskModalEstimatedSection2');
    if (task.estimated_hours && task.estimated_hours > 0) {
      progressSection.style.display = 'block';
      estimatedSection2.style.display = 'block';
      
      const progress = task.progress_percentage || 0;
      document.getElementById('taskModalProgressBar').style.width = `${progress}%`;
      document.getElementById('taskModalProgressText').textContent = `${progress}%`;
      
      const tracked = task.total_hours || 0;
      document.getElementById('taskModalHoursInfo').textContent = 
        `${tracked.toFixed(1)}h tracked / ${task.estimated_hours.toFixed(1)}h estimated`;
      document.getElementById('taskModalEstimated').textContent = `${task.estimated_hours.toFixed(1)}h`;
    } else {
      progressSection.style.display = 'none';
      estimatedSection2.style.display = 'none';
    }
    
    // Tags
    const tagsSection = document.getElementById('taskModalTagsSection');
    if (task.tags && task.tags.length > 0) {
      tagsSection.style.display = 'block';
      const tagsHtml = task.tags.map(tag => 
        `<span class="badge bg-light text-dark border">${tag}</span>`
      ).join('');
      document.getElementById('taskModalTags').innerHTML = tagsHtml;
    } else {
      tagsSection.style.display = 'none';
    }
    
    // Stats
    document.getElementById('taskModalTotalHours').textContent = 
      `${(task.total_hours || 0).toFixed(1)}h`;
    
    // Created date
    const createdDate = new Date(task.created_at);
    document.getElementById('taskModalCreated').textContent = 
      createdDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
    
    // Completed date
    const completedSection = document.getElementById('taskModalCompletedSection');
    if (task.completed_at) {
      completedSection.style.display = 'block';
      const completedDate = new Date(task.completed_at);
      document.getElementById('taskModalCompleted').textContent = 
        completedDate.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
    } else {
      completedSection.style.display = 'none';
    }
    
    // Update action buttons
    document.getElementById('taskModalViewFullBtn').href = `/tasks/${taskId}`;
    document.getElementById('taskModalEditBtn').href = `/tasks/${taskId}/edit`;
    
    // Hide loading, show content
    document.querySelector('.task-modal-loading').style.display = 'none';
    document.querySelector('.task-modal-content-wrapper').style.display = 'block';
    
  } catch (error) {
    console.error('Error loading task:', error);
    document.querySelector('.task-modal-loading').innerHTML = `
      <div class="text-danger">
        <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
        <p>Failed to load task details</p>
        <button class="btn btn-sm btn-secondary" onclick="bootstrap.Modal.getInstance(document.getElementById('taskQuickViewModal')).hide();">Close</button>
      </div>
    `;
  }
};
</script>

<!-- Professional Task Modal -->
<div class="modal fade" id="taskQuickViewModal" tabindex="-1" aria-labelledby="taskModalTitle" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
  <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
    <div class="modal-content task-modal-content">
      <!-- Modal Header -->
      <div class="modal-header border-bottom-0 pb-2">
        <div class="d-flex align-items-center gap-2 flex-grow-1">
          <div class="task-modal-icon">
            <i class="fas fa-tasks"></i>
          </div>
          <div class="flex-grow-1">
            <h5 class="modal-title task-modal-title" id="taskModalTitle">
              <span id="taskModalName">Loading...</span>
            </h5>
            <small class="text-muted" id="taskModalId"></small>
          </div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <!-- Modal Body -->
      <div class="modal-body pt-2" id="taskModalBody">
        <div class="task-modal-loading text-center py-5">
          <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
          </div>
          <p class="text-muted mt-3">{{ _('Loading task details...') }}</p>
        </div>
        
        <div class="task-modal-content-wrapper" style="display: none;">
          <!-- Status & Priority Row -->
          <div class="row g-3 mb-4">
            <div class="col-sm-6">
              <div class="task-modal-field">
                <label class="task-modal-label">
                  <i class="fas fa-flag me-2"></i>{{ _('Status') }}
                </label>
                <div id="taskModalStatus"></div>
              </div>
            </div>
            <div class="col-sm-6">
              <div class="task-modal-field">
                <label class="task-modal-label">
                  <i class="fas fa-exclamation-circle me-2"></i>{{ _('Priority') }}
                </label>
                <div id="taskModalPriority"></div>
              </div>
            </div>
          </div>

          <!-- Project Info -->
          <div class="task-modal-section mb-4">
            <label class="task-modal-label">
              <i class="fas fa-project-diagram me-2"></i>{{ _('Project') }}
            </label>
            <div class="task-modal-project-card" id="taskModalProject"></div>
          </div>

          <!-- Description -->
          <div class="task-modal-section mb-4" id="taskModalDescriptionSection" style="display: none;">
            <label class="task-modal-label">
              <i class="fas fa-align-left me-2"></i>{{ _('Description') }}
            </label>
            <div class="task-modal-description" id="taskModalDescription"></div>
          </div>

          <!-- Details Grid -->
          <div class="row g-3 mb-4">
            <div class="col-sm-6" id="taskModalAssignedSection" style="display: none;">
              <div class="task-modal-field">
                <label class="task-modal-label">
                  <i class="fas fa-user me-2"></i>{{ _('Assigned To') }}
                </label>
                <div id="taskModalAssigned" class="task-modal-value"></div>
              </div>
            </div>
            <div class="col-sm-6" id="taskModalDueDateSection" style="display: none;">
              <div class="task-modal-field">
                <label class="task-modal-label">
                  <i class="fas fa-calendar me-2"></i>{{ _('Due Date') }}
                </label>
                <div id="taskModalDueDate" class="task-modal-value"></div>
              </div>
            </div>
          </div>

          <!-- Progress Bar (if estimated hours exist) -->
          <div class="task-modal-section mb-4" id="taskModalProgressSection" style="display: none;">
            <label class="task-modal-label">
              <i class="fas fa-chart-line me-2"></i>{{ _('Progress') }}
            </label>
            <div class="d-flex align-items-center gap-3">
              <div class="flex-grow-1">
                <div class="progress task-modal-progress">
                  <div class="progress-bar" role="progressbar" id="taskModalProgressBar" style="width: 0%"></div>
                </div>
              </div>
              <span class="task-modal-progress-text" id="taskModalProgressText">0%</span>
            </div>
            <div class="d-flex justify-content-between mt-2 small text-muted">
              <span id="taskModalHoursInfo"></span>
            </div>
          </div>

          <!-- Tags -->
          <div class="task-modal-section mb-4" id="taskModalTagsSection" style="display: none;">
            <label class="task-modal-label">
              <i class="fas fa-tags me-2"></i>{{ _('Tags') }}
            </label>
            <div id="taskModalTags" class="d-flex flex-wrap gap-2"></div>
          </div>

          <!-- Quick Stats -->
          <div class="row g-3 mb-3">
            <div class="col-6 col-md-3">
              <div class="task-modal-stat">
                <div class="task-modal-stat-icon bg-primary-subtle">
                  <i class="fas fa-clock text-primary"></i>
                </div>
                <div class="task-modal-stat-content">
                  <div class="task-modal-stat-value" id="taskModalTotalHours">0h</div>
                  <div class="task-modal-stat-label">{{ _('Tracked') }}</div>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3" id="taskModalEstimatedSection2">
              <div class="task-modal-stat">
                <div class="task-modal-stat-icon bg-info-subtle">
                  <i class="fas fa-hourglass-half text-info"></i>
                </div>
                <div class="task-modal-stat-content">
                  <div class="task-modal-stat-value" id="taskModalEstimated">0h</div>
                  <div class="task-modal-stat-label">{{ _('Estimated') }}</div>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3">
              <div class="task-modal-stat">
                <div class="task-modal-stat-icon bg-success-subtle">
                  <i class="fas fa-calendar-plus text-success"></i>
                </div>
                <div class="task-modal-stat-content">
                  <div class="task-modal-stat-value" id="taskModalCreated">-</div>
                  <div class="task-modal-stat-label">{{ _('Created') }}</div>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3" id="taskModalCompletedSection" style="display: none;">
              <div class="task-modal-stat">
                <div class="task-modal-stat-icon bg-success-subtle">
                  <i class="fas fa-check-circle text-success"></i>
                </div>
                <div class="task-modal-stat-content">
                  <div class="task-modal-stat-value" id="taskModalCompleted">-</div>
                  <div class="task-modal-stat-label">{{ _('Completed') }}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- Modal Footer -->
      <div class="modal-footer border-top-0 pt-2 flex-wrap gap-2">
        <a href="#" id="taskModalViewFullBtn" class="btn btn-outline-secondary btn-sm" target="_blank">
          <i class="fas fa-external-link-alt me-2"></i>{{ _('View Full Details') }}
        </a>
        <a href="#" id="taskModalEditBtn" class="btn btn-primary btn-sm">
          <i class="fas fa-edit me-2"></i>{{ _('Edit Task') }}
        </a>
        <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">
          <i class="fas fa-times me-2"></i>{{ _('Close') }}
        </button>
      </div>
    </div>
  </div>
</div>