{{define "tasks-tab"}}
<div class="space-y-6">
    <!-- Unified Tasks Section -->
    <section>
        <h2 class="section-header mb-6">
            <span class="section-accent bg-gradient-to-r from-red-500 to-blue-500"></span>
            Upcoming Tasks
        </h2>

        {{if .Atoms}}
        <div class="space-y-4">
            {{range .Atoms}}
            <div class="bg-white rounded-lg p-6 shadow-sm hover:shadow-md transition-shadow border-l-4 {{.ColorClass}}">
                <div class="flex items-start justify-between">
                    <div class="flex-1">
                        <div class="flex items-center gap-3 mb-2">
                            <span class="text-2xl">{{.SourceIcon}}</span>
                            <h3 class="text-lg font-semibold text-gray-900">{{.Title}}</h3>
                        </div>

                        {{if .Description}}
                        <p class="text-sm text-gray-600 mb-3">{{.Description}}</p>
                        {{end}}

                        <div class="flex items-center gap-4 text-sm text-gray-500">
                            {{if .DueDate}}
                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                                </svg>
                                <span>{{.DueDate.Format "Jan 2, 3:04 PM"}}</span>
                            </div>
                            {{end}}

                            <div class="flex items-center gap-1">
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z"></path>
                                </svg>
                                <span>{{if eq .Source "trello"}}Trello{{else if eq .Source "todoist"}}Todoist{{else}}{{.Source}}{{end}}</span>
                            </div>

                            {{if gt .Priority 2}}
                            <div class="flex items-center gap-1 text-red-600 font-medium">
                                <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10 2a8 8 0 100 16 8 8 0 000-16zm1 11H9v-2h2v2zm0-4H9V5h2v4z"></path>
                                </svg>
                                <span>Priority {{.Priority}}</span>
                            </div>
                            {{end}}
                        </div>
                    </div>

                    {{if .URL}}
                    <a href="{{.URL}}" target="_blank" class="ml-4 text-primary-600 hover:text-primary-800 transition-colors">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                        </svg>
                    </a>
                    {{end}}
                </div>
            </div>
            {{end}}
        </div>
        {{else}}
        <div class="bg-gray-50 rounded-lg p-8 text-center">
            <p class="text-gray-600">No upcoming tasks with due dates.</p>
        </div>
        {{end}}
    </section>
</div>
{{end}}