{% extends "base.html" %}
{% block title %}Task Board - ICDEV™ Dashboard{% endblock %}
{% block content %}
<div class="page-header">
    <h1>Task Board</h1>
    <p class="subtitle">Manage scheduled and planned tasks — drag across columns or use arrow buttons to move.</p>
</div>

<div style="display:flex; align-items:center; gap:10px; margin-bottom:12px;">
    <input type="text" id="kanban-filter-input" placeholder="Filter by title, id, priority..." aria-label="Filter tasks"
           style="flex:1; max-width:420px; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
    <span id="kanban-filter-count" style="font-size:12px; color:var(--text-dim);"></span>
    <div style="margin-left:auto;">
        <button class="btn btn-primary" onclick="openAddTaskModal()">+ Add Task</button>
    </div>
</div>

<div class="kanban-board" id="kanban-board">
    {% set columns = [
        ("suggested", "Suggested"),
        ("backlog", "Backlog"),
        ("scheduled", "Scheduled"),
        ("in_progress", "In Progress"),
        ("done", "Done")
    ] %}
    {% for status_key, status_label in columns %}
    <div class="kanban-column" data-status="{{ status_key }}">
        <div class="kanban-column-header">
            <h3>{{ status_label }}</h3>
            <span class="kanban-column-count">0</span>
            {% if status_key == "suggested" %}
            <button class="btn btn-sm" id="btn-promote-all" onclick="promoteAllSuggested()" title="Promote all suggested cards to backlog" style="margin-left:auto; padding:4px 12px; font-size:12px; font-weight:600; background:#22c55e; color:#fff; border:none; border-radius:4px; cursor:pointer; display:none; letter-spacing:0.3px;">&#x2714; Promote All</button>
            {% endif %}
        </div>
        <div class="kanban-column-body">
            <div class="kanban-empty">Loading...</div>
        </div>
    </div>
    {% endfor %}
</div>

<!-- Add/Edit Task Modal -->
<div id="task-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1000; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card, #1e293b); border-radius:12px; width:90%; max-width:500px; border:1px solid var(--border);">
        <div style="display:flex; justify-content:space-between; align-items:center; padding:16px 20px; border-bottom:1px solid var(--border);">
            <h3 id="task-modal-title" style="margin:0;">Add Task</h3>
            <button class="btn btn-sm" onclick="closeTaskModal()">&times;</button>
        </div>
        <div style="padding:20px;">
            <input type="hidden" id="task-edit-id">
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Title *</label>
                <input type="text" id="task-title" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);" placeholder="e.g. Build notification system">
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Description</label>
                <textarea id="task-desc" rows="3" style="width:100%; padding:8px 12px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); resize:vertical;" placeholder="Optional details..."></textarea>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Type</label>
                    <select id="task-type" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="build">Build</option>
                        <option value="run">Run</option>
                        <option value="fix">Fix</option>
                        <option value="research">Research</option>
                        <option value="deploy">Deploy</option>
                        <option value="test">Test</option>
                        <option value="chore">Chore</option>
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Priority</label>
                    <select id="task-priority" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="low">Low</option>
                        <option value="medium" selected>Medium</option>
                        <option value="high">High</option>
                        <option value="critical">Critical</option>
                    </select>
                </div>
            </div>
            <div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px;">
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Status</label>
                    <select id="task-status" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                        <option value="suggested">Suggested</option>
                        <option value="backlog">Backlog</option>
                        <option value="scheduled">Scheduled</option>
                        <option value="in_progress">In Progress</option>
                        <option value="done">Done</option>
                    </select>
                </div>
                <div>
                    <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Scheduled For</label>
                    <input type="datetime-local" id="task-scheduled-at" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                </div>
            </div>
            <div style="margin-bottom:12px;">
                <label style="display:block; font-size:12px; color:var(--text-dim); margin-bottom:4px;">Executor</label>
                <select id="task-executor-type" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary);">
                    <option value="claude_cli">&#129502; Claude CLI</option>
                    <option value="gitlab">&#129418; GitLab CI</option>
                    <option value="github_actions">&#9881;&#65039; GitHub Actions</option>
                </select>
            </div>
        </div>
        <div style="padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:flex-end;">
            <button class="btn" onclick="closeTaskModal()">Cancel</button>
            <button class="btn btn-primary" onclick="saveTask()">Save</button>
        </div>
    </div>
</div>

<!-- OPT-62: mid-run message injection modal -->
<div id="kanban-message-modal" style="display:none; position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:1200; align-items:center; justify-content:center;">
    <div style="background:var(--bg-elev); border:1px solid var(--border); border-radius:8px; width:min(480px, 92vw); max-height:90vh; overflow:auto;">
        <div style="padding:16px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <h3 style="margin:0; font-size:16px;">&#128172; Send message to running task</h3>
            <button class="kanban-move-btn" onclick="closeMessageModal()" title="Close">&#10005;</button>
        </div>
        <div style="padding:16px 20px;">
            <div style="font-size:12px; color:var(--text-dim); margin-bottom:8px;" id="kanban-msg-target">Task: —</div>
            <textarea id="kanban-msg-text" placeholder="e.g. also please run ruff and bandit before finishing" rows="5" style="width:100%; padding:8px; background:var(--bg-code); border:1px solid var(--border); border-radius:6px; color:var(--text-primary); font-family:inherit; resize:vertical;"></textarea>
            <div style="font-size:11px; color:var(--text-dim); margin-top:8px;">The message is queued and delivered at the next LLM call boundary (max 10 iterations per task).</div>
            <div id="kanban-msg-status" style="font-size:12px; margin-top:8px; min-height:1em;"></div>
        </div>
        <div style="padding:16px 20px; border-top:1px solid var(--border); display:flex; gap:12px; justify-content:flex-end;">
            <button class="btn" onclick="closeMessageModal()">Cancel</button>
            <button class="btn btn-primary" id="kanban-msg-send" onclick="submitMessage()">Send</button>
        </div>
    </div>
</div>

<script>
function _isoToLocal(iso) {
    // Convert ISO/UTC string to local datetime-local input value
    if (!iso) return '';
    var d = new Date(iso);
    if (isNaN(d.getTime())) return '';
    var pad = function(n) { return n < 10 ? '0' + n : '' + n; };
    return d.getFullYear() + '-' + pad(d.getMonth()+1) + '-' + pad(d.getDate())
        + 'T' + pad(d.getHours()) + ':' + pad(d.getMinutes());
}

function _localToIso(localVal) {
    // Convert datetime-local value to ISO UTC string
    if (!localVal) return null;
    return new Date(localVal).toISOString();
}

function _formatSchedule(iso) {
    // Human-readable schedule time (e.g. "Mar 24, 5:00 PM")
    if (!iso) return '';
    var d = new Date(iso);
    if (isNaN(d.getTime())) return '';
    return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })
        + ' ' + d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' });
}

function openAddTaskModal() {
    document.getElementById('task-modal-title').textContent = 'Add Task';
    document.getElementById('task-edit-id').value = '';
    document.getElementById('task-title').value = '';
    document.getElementById('task-desc').value = '';
    document.getElementById('task-type').value = 'build';
    document.getElementById('task-priority').value = 'medium';
    document.getElementById('task-status').value = 'backlog';
    document.getElementById('task-scheduled-at').value = '';
    document.getElementById('task-executor-type').value = 'claude_cli';
    document.getElementById('task-modal').style.display = 'flex';
}

function openEditTaskModal(task) {
    document.getElementById('task-modal-title').textContent = 'Edit Task';
    document.getElementById('task-edit-id').value = task.id;
    document.getElementById('task-title').value = task.title;
    document.getElementById('task-desc').value = task.description || '';
    document.getElementById('task-type').value = task.task_type;
    document.getElementById('task-priority').value = task.priority;
    document.getElementById('task-status').value = task.status;
    document.getElementById('task-scheduled-at').value = _isoToLocal(task.scheduled_at);
    document.getElementById('task-executor-type').value = task.executor_type || 'claude_cli';
    document.getElementById('task-modal').style.display = 'flex';
}

function closeTaskModal() {
    document.getElementById('task-modal').style.display = 'none';
}

function saveTask() {
    var editId = document.getElementById('task-edit-id').value;
    var payload = {
        title: document.getElementById('task-title').value,
        description: document.getElementById('task-desc').value,
        task_type: document.getElementById('task-type').value,
        priority: document.getElementById('task-priority').value,
        status: document.getElementById('task-status').value,
        scheduled_at: _localToIso(document.getElementById('task-scheduled-at').value),
        executor_type: document.getElementById('task-executor-type').value
    };
    if (!payload.title.trim()) { alert('Title is required'); return; }

    var url = editId ? '/api/kanban/tasks/' + editId : '/api/kanban/tasks';
    var method = editId ? 'PATCH' : 'POST';

    fetch(url, { method: method, headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) })
        .then(function(r) { return r.json(); })
        .then(function() { closeTaskModal(); refreshKanbanTasks(); })
        .catch(function(e) { alert('Error: ' + e); });
}

// OPT-68: optimistic move — reflect the change immediately, rollback on failure
function moveTask(taskId, newStatus) {
    var card = document.querySelector('[data-task-id="' + taskId + '"]');
    var originalStatus = null;
    var originalParent = null;
    if (card) {
        originalParent = card.parentElement;
        originalStatus = card.getAttribute('data-status');
        var newColBody = document.querySelector('.kanban-column[data-status="' + newStatus + '"] .kanban-column-body');
        if (newColBody) {
            var empty = newColBody.querySelector('.kanban-empty');
            if (empty) empty.remove();
            newColBody.insertBefore(card, newColBody.firstChild);
            card.setAttribute('data-status', newStatus);
        }
    }

    fetch('/api/kanban/tasks/' + taskId + '/move', {
        method: 'POST', headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ status: newStatus })
    })
    .then(function(r) {
        if (!r.ok) throw new Error('HTTP ' + r.status);
        return r.json();
    })
    .then(function() {
        // OPT-68 Pattern 3: undo toast for a reversible move
        if (window.ICDEV && ICDEV.undoToast && originalStatus && originalStatus !== newStatus) {
            ICDEV.undoToast.show({
                message: 'Task moved to ' + newStatus,
                undoCallback: function () {
                    return fetch('/api/kanban/tasks/' + taskId + '/move', {
                        method: 'POST', headers: {'Content-Type': 'application/json'},
                        body: JSON.stringify({ status: originalStatus })
                    }).then(function() { refreshKanbanTasks(); });
                },
                durationMs: 5000
            });
        }
    })
    .catch(function(err) {
        // Rollback optimistic update
        if (card && originalParent && originalStatus) {
            originalParent.insertBefore(card, originalParent.firstChild);
            card.setAttribute('data-status', originalStatus);
        }
        alert('Move failed: ' + err + '. Reverted.');
    });
}

function deleteTask(taskId) {
    if (!confirm('Delete this task?')) return;
    // Capture task snapshot BEFORE deletion so we can offer undo
    var card = document.querySelector('[data-task-id="' + taskId + '"]');
    var snapshot = null;
    if (card && card.dataset.snapshot) {
        try { snapshot = JSON.parse(card.dataset.snapshot); } catch (e) { snapshot = null; }
    }
    fetch('/api/kanban/tasks/' + taskId, { method: 'DELETE' })
        .then(function(r) { return r.json(); })
        .then(function() {
            refreshKanbanTasks();
            if (window.ICDEV && ICDEV.undoToast && snapshot) {
                ICDEV.undoToast.show({
                    message: 'Task deleted',
                    undoCallback: function () {
                        return fetch('/api/kanban/tasks', {
                            method: 'POST', headers: {'Content-Type': 'application/json'},
                            body: JSON.stringify(snapshot)
                        }).then(function() { refreshKanbanTasks(); });
                    },
                    durationMs: 5000
                });
            }
        });
}

function refreshKanbanTasks() {
    fetch('/api/kanban/tasks')
        .then(function(r) { return r.json(); })
        .then(function(data) { renderTaskKanban(data.tasks || []); });
}

function promoteAllSuggested() {
    if (!confirm('Promote ALL suggested cards to backlog?')) return;
    var btn = document.getElementById('btn-promote-all');
    if (btn) { btn.disabled = true; btn.textContent = 'Promoting...'; }
    fetch('/api/kanban/tasks/promote-all', { method: 'POST' })
        .then(function(r) { return r.json(); })
        .then(function(data) {
            if (btn) { btn.disabled = false; btn.textContent = 'Promote All'; }
            if (data.error) { alert('Error: ' + data.error); return; }
            refreshKanbanTasks();
        })
        .catch(function() {
            if (btn) { btn.disabled = false; btn.textContent = 'Promote All'; }
            alert('Promote all failed');
        });
}

function renderTaskKanban(tasks) {
    var board = document.getElementById('kanban-board');
    if (!board) return;

    var columns = { suggested: [], backlog: [], scheduled: [], in_progress: [], done: [] };
    tasks.forEach(function(t) {
        var s = t.status || 'backlog';
        if (columns[s]) columns[s].push(t); else columns.backlog.push(t);
    });

    var priorityColors = { critical: '#ef4444', high: '#f97316', medium: '#3b82f6', low: '#6b7280' };
    var typeIcons = { build: '\u{1F528}', run: '\u25B6', fix: '\u{1F41B}', research: '\u{1F50D}', deploy: '\u{1F680}', test: '\u2705', chore: '\u{1F9F9}' };
    var nextStatus = { suggested: 'backlog', backlog: 'scheduled', scheduled: 'in_progress', in_progress: 'done' };
    var prevStatus = { backlog: 'suggested', scheduled: 'backlog', in_progress: 'scheduled', done: 'in_progress' };
    var executorLabels = {
        claude_cli: { icon: '\uD83E\uDD16', label: 'Claude', color: '#7c3aed' },
        gitlab: { icon: '\uD83E\uDD8A', label: 'GitLab', color: '#e24304' },
        github_actions: { icon: '\u2699\uFE0F', label: 'GH Actions', color: '#2ea043' }
    };
    var llmModeIcons = { claude: '\uD83E\uDDE0', ollama: '\uD83D\uDCBB', none: '\u2699\uFE0F' };
    var llmModeTitles = { claude: 'LLM: Claude', ollama: 'LLM: Ollama (local)', none: 'No LLM' };

    board.querySelectorAll('.kanban-column').forEach(function(colEl) {
        var status = colEl.getAttribute('data-status');
        if (!columns[status]) return;
        var items = columns[status];

        var countEl = colEl.querySelector('.kanban-column-count');
        if (countEl) countEl.textContent = items.length;

        // Show/hide the Promote All button based on suggested card count
        if (status === 'suggested') {
            var promBtn = document.getElementById('btn-promote-all');
            if (promBtn) promBtn.style.display = items.length > 0 ? 'inline-block' : 'none';
        }

        var bodyEl = colEl.querySelector('.kanban-column-body');
        if (!bodyEl) return;

        if (items.length === 0) {
            bodyEl.innerHTML = '<div class="kanban-empty">No tasks</div>';
            return;
        }

        var esc = window.ICDEV && ICDEV.escapeHTML ? ICDEV.escapeHTML : function(s) { return String(s || ''); };
        bodyEl.innerHTML = items.map(function(t) {
            var icon = typeIcons[t.task_type] || '';
            var pColor = priorityColors[t.priority] || '#6b7280';
            var arrows = '';
            if (prevStatus[status]) arrows += '<button class="kanban-move-btn" onclick="event.stopPropagation(); moveTask(\'' + t.id + '\',\'' + prevStatus[status] + '\')" title="Move left">\u25C0</button>';
            if (nextStatus[status]) arrows += '<button class="kanban-move-btn" onclick="event.stopPropagation(); moveTask(\'' + t.id + '\',\'' + nextStatus[status] + '\')" title="Move right">\u25B6</button>';

            var schedLine = t.scheduled_at ? '<div style="font-size:11px; color:var(--text-dim); margin-top:4px;">\u{1F4C5} ' + _formatSchedule(t.scheduled_at) + '</div>' : '';

            // Executor badge
            var execInfo = executorLabels[t.executor_type] || executorLabels['claude_cli'];
            var execBadge = '<span class="badge" style="background:' + execInfo.color + '20;color:' + execInfo.color + ';font-size:10px;" title="Executor: ' + execInfo.label + '">'
                + execInfo.icon + ' ' + execInfo.label + '</span>';

            // Execution ID as clickable link (GitLab pipeline URL) or plain text
            var execIdLine = '';
            if (t.execution_id) {
                var execUrl = t.executor_url || null;
                if (execUrl) {
                    execIdLine = '<div style="font-size:10px; color:var(--text-dim); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">'
                        + '\uD83D\uDD17 <a href="' + esc(execUrl) + '" target="_blank" rel="noopener" onclick="event.stopPropagation();" style="color:var(--text-dim);text-decoration:underline;">' + esc(t.execution_id) + '</a></div>';
                } else {
                    execIdLine = '<div style="font-size:10px; color:var(--text-dim); margin-top:3px;">\uD83C\uDD94 ' + esc(t.execution_id) + '</div>';
                }
            }

            // LLM mode indicator — inferred from executor_type
            var llmMode = (t.executor_type === 'claude_cli') ? 'claude' : (t.executor_type === 'gitlab' ? 'none' : 'none');
            var llmIcon = llmModeIcons[llmMode] || '';
            var llmTitle = llmModeTitles[llmMode] || '';
            var llmBadge = '<span title="' + llmTitle + '" style="font-size:11px; cursor:default;">' + llmIcon + '</span>';

            // OPT-62: mid-run message injection button (in_progress only)
            var msgBtn = '';
            if (status === 'in_progress') {
                msgBtn = '<button class="kanban-move-btn" onclick="event.stopPropagation(); openMessageModal(\'' + t.id + '\',' + JSON.stringify(t.title || '').replace(/"/g, '&quot;') + ')" title="Send message to running task">\uD83D\uDCAC</button>';
            }

            var snapAttr = JSON.stringify(t).replace(/"/g, '&quot;');
            return '<div class="kanban-card" data-task-id="' + esc(t.id) + '" data-status="' + esc(status) + '" data-snapshot="' + snapAttr + '" style="border-left:3px solid ' + pColor + '; cursor:pointer;" onclick="openEditTaskModal(' + snapAttr + ')">'
                + '<div class="kanban-card-title" title="' + esc(t.title) + '">' + icon + ' ' + esc(t.title) + '</div>'
                + '<div class="kanban-card-meta">'
                + '<span class="badge badge-info">' + esc(t.task_type) + '</span>'
                + '<span class="badge" style="background:' + pColor + '20; color:' + pColor + ';">' + esc(t.priority) + '</span>'
                + execBadge
                + llmBadge
                + '</div>'
                + schedLine
                + execIdLine
                + '<div style="display:flex; justify-content:space-between; align-items:center; margin-top:6px;">'
                + '<div style="display:flex; gap:4px;">' + arrows + msgBtn + '</div>'
                + '<button class="kanban-move-btn" onclick="event.stopPropagation(); deleteTask(\'' + t.id + '\')" title="Delete" style="color:#ef4444;">\u2715</button>'
                + '</div>'
                + '</div>';
        }).join('');
    });
}

// OPT-62: mid-run message injection
var _kanbanMsgTargetId = null;
function openMessageModal(taskId, title) {
    _kanbanMsgTargetId = taskId;
    document.getElementById('kanban-msg-target').textContent = 'Task: ' + (title || taskId);
    document.getElementById('kanban-msg-text').value = '';
    document.getElementById('kanban-msg-status').textContent = '';
    document.getElementById('kanban-msg-status').style.color = 'var(--text-dim)';
    document.getElementById('kanban-message-modal').style.display = 'flex';
    setTimeout(function() { document.getElementById('kanban-msg-text').focus(); }, 50);
}

function closeMessageModal() {
    document.getElementById('kanban-message-modal').style.display = 'none';
    _kanbanMsgTargetId = null;
}

function submitMessage() {
    if (!_kanbanMsgTargetId) return;
    var text = document.getElementById('kanban-msg-text').value.trim();
    if (!text) {
        document.getElementById('kanban-msg-status').textContent = 'Message cannot be empty.';
        document.getElementById('kanban-msg-status').style.color = '#ef4444';
        return;
    }
    var btn = document.getElementById('kanban-msg-send');
    btn.disabled = true;
    document.getElementById('kanban-msg-status').textContent = 'Sending…';
    document.getElementById('kanban-msg-status').style.color = 'var(--text-dim)';
    fetch('/api/kanban/tasks/' + _kanbanMsgTargetId + '/message', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({ message: text, sender: 'dashboard' })
    }).then(function(r) { return r.json().then(function(body) { return { ok: r.ok, status: r.status, body: body }; }); })
    .then(function(res) {
        btn.disabled = false;
        if (res.ok) {
            document.getElementById('kanban-msg-status').textContent = '\uD83D\uDC40 Queued — will be delivered at next LLM call.';
            document.getElementById('kanban-msg-status').style.color = '#10b981';
            setTimeout(closeMessageModal, 1200);
        } else {
            document.getElementById('kanban-msg-status').textContent = 'Failed: ' + (res.body && res.body.error ? res.body.error : ('HTTP ' + res.status));
            document.getElementById('kanban-msg-status').style.color = '#ef4444';
        }
    }).catch(function(e) {
        btn.disabled = false;
        document.getElementById('kanban-msg-status').textContent = 'Error: ' + e;
        document.getElementById('kanban-msg-status').style.color = '#ef4444';
    });
}

// OPT-68 Pattern 1: filter-as-you-type across all visible kanban cards
function applyKanbanFilter(query) {
    var q = (query || '').trim().toLowerCase();
    var matched = 0;
    document.querySelectorAll('.kanban-card').forEach(function(card) {
        var text = (card.textContent || '').toLowerCase();
        var tid = (card.getAttribute('data-task-id') || '').toLowerCase();
        var show = !q || text.indexOf(q) !== -1 || tid.indexOf(q) !== -1;
        card.style.display = show ? '' : 'none';
        if (show) matched++;
    });
    var countEl = document.getElementById('kanban-filter-count');
    if (countEl) countEl.textContent = q ? matched + ' match' + (matched === 1 ? '' : 'es') : '';
}

document.addEventListener('DOMContentLoaded', function() {
    refreshKanbanTasks();
    // Wire filter input once debounce_filter.js is ready
    var input = document.getElementById('kanban-filter-input');
    if (input && window.ICDEV && ICDEV.debounceFilter) {
        ICDEV.debounceFilter.bind(input, {
            delayMs: 200,
            onFilter: applyKanbanFilter,
        });
    } else if (input) {
        // Fallback: plain listener (no debounce)
        input.addEventListener('input', function() { applyKanbanFilter(input.value); });
    }
});
</script>
<script src="{{ url_for('static', filename='js/debounce_filter.js') }}"></script>
<script src="{{ url_for('static', filename='js/undo_toast.js') }}"></script>

<style>
.kanban-move-btn {
    background: transparent; border: 1px solid var(--border); color: var(--text-dim);
    border-radius: 4px; padding: 2px 6px; font-size: 10px; cursor: pointer; line-height: 1;
}
.kanban-move-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
</style>
{% endblock %}