{{template "main.html" .}}
{{define "title"}}Tasks — Congo Dev{{end}}
{{define "content"}}
<div class="max-w-3xl mx-auto px-6 py-8">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold">Tasks</h1>
        <div class="flex gap-2 items-center">
            <span class="text-xs px-2 py-1 rounded" style="background: {{if eq work.AgentStatus "running"}}#dcfce7{{else}}#f1f5f9{{end}}; color: {{if eq work.AgentStatus "running"}}#16a34a{{else}}#8b95a8{{end}};">Agent: {{work.AgentStatus}}</span>
            <span class="text-xs text-muted">Heartbeat: {{work.AgentHeartbeat}}</span>
        </div>
    </div>

    <form method="POST" action="/work/tasks/create" class="flex gap-2 mb-6">
        <input type="text" name="title" placeholder="New task..." class="flex-1 px-3 py-2 rounded text-sm" style="border: 1px solid rgba(100,130,180,0.15); outline: none;" required />
        <select name="priority" class="px-2 py-2 rounded text-xs" style="border: 1px solid rgba(100,130,180,0.15);">
            <option value="medium">medium</option>
            <option value="high">high</option>
            <option value="low">low</option>
        </select>
        <select name="assignee" class="px-2 py-2 rounded text-xs" style="border: 1px solid rgba(100,130,180,0.15);">
            <option value="">anyone</option>
            <option value="twin">twin</option>
            <option value="connor">connor</option>
        </select>
        <button class="px-4 py-2 rounded text-xs" style="background: #4f8ef7; color: white; border: none; cursor: pointer;">Add</button>
    </form>

    {{range $task := work.TodoTasks}}
    <div class="bg-white rounded-lg p-4 mb-2 flex items-center justify-between" style="border: 1px solid rgba(100,130,180,0.08); box-shadow: 0 2px 8px rgba(79,142,247,0.05);">
        <div>
            <span class="text-sm font-semibold" style="color: #1a1a2e;">{{$task.Title}}</span>
            <div class="flex gap-2 mt-1">
                {{if eq $task.Priority "high"}}<span class="text-xs" style="color: #ef4444;">high</span>{{end}}
                {{if eq $task.Priority "medium"}}<span class="text-xs" style="color: #f59e0b;">medium</span>{{end}}
                {{if eq $task.Priority "low"}}<span class="text-xs" style="color: #8b95a8;">low</span>{{end}}
                {{if $task.Assignee}}<span class="text-xs" style="color: #4f8ef7;">@{{$task.Assignee}}</span>{{end}}
                {{if eq $task.Status "blocked"}}<span class="text-xs" style="color: #ef4444;">blocked: {{$task.Blocked}}</span>{{end}}
            </div>
        </div>
        <div class="flex gap-1">
            <form method="POST" action="/work/tasks/{{$task.ID}}/status"><input type="hidden" name="status" value="done"><button class="text-xs px-2 py-1 rounded" style="background: #dcfce7; color: #16a34a; border: none; cursor: pointer;">done</button></form>
            <form method="POST" action="/work/tasks/{{$task.ID}}/delete" onsubmit="return confirm('Delete?')"><button class="text-xs px-2 py-1 rounded" style="color: #ef4444; background: none; border: none; cursor: pointer;">x</button></form>
        </div>
    </div>
    {{end}}

    {{if work.DoneTasks}}
    <h2 class="text-sm font-semibold mt-8 mb-3" style="color: #8b95a8;">Completed</h2>
    {{range $task := work.DoneTasks}}
    <div class="bg-white rounded-lg p-3 mb-2 flex items-center justify-between" style="border: 1px solid rgba(100,130,180,0.05); opacity: 0.6;">
        <span class="text-sm line-through" style="color: #8b95a8;">{{$task.Title}}</span>
    </div>
    {{end}}
    {{end}}
</div>
{{end}}