{# Jobs list — rendered as HTMX partial #}
<div class="mb-4">
    <h3 class="text-sm font-semibold text-[#8b949e] uppercase tracking-wide mb-3">Active Jobs</h3>
    <div class="space-y-3">
        {% if active_jobs %}
            {% for j in active_jobs %}
            <div class="job-row p-4 rounded-lg bg-[#0d1117] border border-[#30363d]">
                <div class="flex items-center justify-between mb-2">
                    <div class="flex items-center gap-2">
                        <i data-lucide="loader-2" class="w-4 h-4 text-indigo-400 {% if j.status == 'running' %}animate-spin{% endif %}"></i>
                        <span class="font-mono text-sm">{{ j.id }}</span>
                        <span class="text-xs px-1.5 py-0.5 rounded {% if j.status == 'running' %}bg-indigo-500/20 text-indigo-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ j.status }}</span>
                    </div>
                    <button hx-post="/api/cluster/jobs/{{ j.id }}/cancel"
                            hx-target="#cluster-jobs"
                            hx-swap="innerHTML"
                            hx-confirm="Cancel this job?"
                            class="p-1.5 hover:bg-red-500/20 rounded text-[#8b949e] hover:text-red-400"
                            title="Cancel">
                        <i data-lucide="x" class="w-4 h-4"></i>
                    </button>
                </div>
                <div class="text-xs text-[#8b949e] font-mono truncate mb-2">{{ j.sql }}</div>
                <div class="flex items-center gap-3">
                    <div class="flex-1 h-2 bg-[#21262d] rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-indigo-500 to-purple-500" style="width: {{ (j.progress * 100) | round }}%"></div>
                    </div>
                    <span class="text-sm font-medium">{{ (j.progress * 100) | round }}%</span>
                </div>
                {% if j.rows_processed %}
                <div class="text-xs text-[#8b949e] mt-1">{{ j.rows_processed }} rows processed</div>
                {% endif %}
            </div>
            {% endfor %}
        {% else %}
            <div class="text-[#8b949e] text-sm">No active jobs</div>
        {% endif %}
    </div>
</div>

<div>
    <h3 class="text-sm font-semibold text-[#8b949e] uppercase tracking-wide mb-3">Job History</h3>
    <div class="space-y-2">
        {% if history_jobs %}
            {% for j in history_jobs %}
            <div class="job-row rounded-lg hover:bg-[#21262d]" x-data="{ expanded: false }">
                <div class="flex items-center gap-3 p-3 cursor-pointer" @click="expanded = !expanded">
                    <i data-lucide="{% if j.status == 'completed' %}check-circle{% elif j.status == 'failed' %}circle-x{% elif j.status == 'cancelled' %}slash{% else %}circle{% endif %}"
                       class="w-4 h-4 flex-shrink-0 {% if j.status == 'completed' %}text-green-400{% elif j.status == 'failed' %}text-red-400{% elif j.status == 'cancelled' %}text-yellow-400{% else %}text-gray-400{% endif %}"></i>
                    <span class="font-mono text-sm">{{ j.id }}</span>
                    <span class="flex-1 text-xs text-[#8b949e] font-mono truncate">{{ j.sql }}</span>
                    <span class="text-xs text-[#8b949e]">{{ j.rows_processed }} rows</span>
                    <span class="text-xs px-1.5 py-0.5 rounded {% if j.status == 'completed' %}bg-green-500/20 text-green-400{% elif j.status == 'failed' %}bg-red-500/20 text-red-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ j.status }}</span>
                    <i data-lucide="chevron-down" class="w-4 h-4 text-[#8b949e] transition-transform" :class="expanded && 'rotate-180'"></i>
                </div>
                <div x-show="expanded" x-cloak class="px-3 pb-3 border-t border-[#30363d]">
                    <div class="pt-3 space-y-2">
                        <div class="text-xs font-mono bg-[#0d1117] rounded p-3 whitespace-pre-wrap break-all">{{ j.sql }}</div>
                        {% if j.error %}
                        <div class="text-xs text-red-400 bg-red-500/10 rounded p-2">{{ j.error }}</div>
                        {% endif %}
                        {% if j.worker_id %}
                        <div class="text-xs text-[#8b949e]">Worker: {{ j.worker_id }}</div>
                        {% endif %}
                        <div class="flex items-center gap-2 mt-2">
                            {% if j.status == 'completed' %}
                            <button hx-get="/api/cluster/jobs/{{ j.id }}/result"
                                    hx-target="#job-result-{{ j.id }}"
                                    hx-swap="innerHTML"
                                    class="text-xs px-2 py-1 bg-[#21262d] hover:bg-[#30363d] rounded flex items-center gap-1">
                                <i data-lucide="table" class="w-3 h-3"></i> View Result
                            </button>
                            {% endif %}
                            {% if j.status == 'failed' %}
                            <button hx-post="/api/cluster/jobs/{{ j.id }}/retry"
                                    hx-target="#cluster-jobs"
                                    hx-swap="innerHTML"
                                    class="text-xs px-2 py-1 bg-indigo-500/20 hover:bg-indigo-500/30 text-indigo-400 rounded flex items-center gap-1">
                                <i data-lucide="refresh-cw" class="w-3 h-3"></i> Retry
                            </button>
                            {% endif %}
                        </div>
                        <div id="job-result-{{ j.id }}" class="mt-2"></div>
                    </div>
                </div>
            </div>
            {% endfor %}
        {% else %}
            <div class="text-[#8b949e] text-sm">No job history</div>
        {% endif %}
    </div>
</div>