{% if processes %}
    {% for p in processes %}
    {% set is_slow = p.duration_seconds > 10 %}
    {% set is_idle_in_tx = p.state == 'idle in transaction' %}
    {% set needs_attention = is_slow or is_idle_in_tx %}
    <div class="p-4 flex items-start justify-between gap-4 hover:bg-[#21262d]/50 {% if needs_attention %}bg-red-500/5 border-l-2 border-red-500{% endif %}">
        <div class="flex-1 min-w-0">
            <div class="flex items-center gap-3 mb-1 flex-wrap">
                <span class="inline-flex items-center gap-1.5">
                    <span class="w-2 h-2 rounded-full {% if p.state == 'active' %}bg-green-500{% elif p.state == 'idle' %}bg-gray-500{% else %}bg-yellow-500{% endif %}"></span>
                    <span class="font-mono text-sm">PID {{ p.pid }}</span>
                </span>
                <span class="text-gray-500 text-sm">{{ p.user }}@{{ p.database }}</span>
                <span class="{% if is_slow %}text-red-400 font-medium{% else %}text-gray-500{% endif %} text-sm">{{ p.duration_human }}</span>
                <span class="text-xs px-2 py-0.5 rounded-full {% if p.state == 'active' %}bg-green-500/20 text-green-400{% elif p.state == 'idle' %}bg-gray-500/20 text-gray-400{% elif is_idle_in_tx %}bg-red-500/20 text-red-400{% else %}bg-yellow-500/20 text-yellow-400{% endif %}">{{ p.state }}</span>
                {% if is_slow %}<span class="text-xs px-2 py-0.5 rounded-full bg-red-500/20 text-red-400">SLOW</span>{% endif %}
            </div>
            <div class="font-mono text-xs text-gray-400 truncate" title="{{ p.query }}">{{ p.query_preview }}</div>
        </div>
        {% if p.state != 'idle' %}
        <button hx-post="/api/admin/{{ conn_id }}/kill/{{ p.pid }}"
                hx-target="#processes-list"
                hx-swap="innerHTML"
                hx-confirm="Terminate process {{ p.pid }}?"
                class="text-red-400 hover:text-red-300 hover:bg-red-500/20 px-2 py-1 rounded transition-colors text-sm">
            Kill
        </button>
        {% endif %}
    </div>
    {% endfor %}
{% else %}
    <div class="p-4 text-gray-500">No active processes</div>
{% endif %}