{% if agents %}
<h2 class="text-lg font-semibold text-yellow-400 mb-4 flex items-center">
    <span class="status-dot status-attention mr-2"></span>
    Needs Attention ({{ agents|length }})
</h2>
<div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
    {% for agent in agents %}
    <a href="/task/{{ agent.agent.agent_id }}/{{ agent.task.task_name }}"
       class="block bg-yellow-900/20 border border-yellow-700 rounded-lg p-4 hover:bg-yellow-900/30 transition">
        <div class="flex items-center justify-between mb-2">
            <span class="font-medium">{{ agent.agent.agent_name }}</span>
            <span class="text-xs text-yellow-400 bg-yellow-900/50 px-2 py-1 rounded">
                Awaiting Approval
            </span>
        </div>
        <div class="text-sm text-gray-400">{{ agent.agent.project_name }}</div>
        <div class="mt-2">
            <div class="text-sm font-medium">{{ agent.task.task_name }}</div>
            <div class="text-xs text-gray-500">Stage: {{ agent.task.stage }}</div>
        </div>
        <div class="mt-3 flex space-x-2">
            <button onclick="event.preventDefault(); approveTask('{{ agent.agent.agent_id }}', '{{ agent.task.task_name }}')"
                    class="px-3 py-1 bg-green-600 hover:bg-green-700 rounded text-sm">
                Approve
            </button>
            <button onclick="event.preventDefault(); rejectTask('{{ agent.agent.agent_id }}', '{{ agent.task.task_name }}')"
                    class="px-3 py-1 bg-red-600 hover:bg-red-700 rounded text-sm">
                Reject
            </button>
        </div>
    </a>
    {% endfor %}
</div>
{% endif %}