{% if agent and agent.task %}
<h2 class="text-lg font-semibold mb-4">Current Task</h2>
<a href="/task/{{ agent.agent.agent_id }}/{{ agent.task.task_name }}" class="block hover:bg-gray-750 -m-2 p-2 rounded">
    <div class="flex items-center justify-between">
        <div>
            <div class="font-medium text-purple-400">{{ agent.task.task_name }}</div>
        </div>
        <div class="text-right">
            <div class="text-sm font-medium">Stage: {{ agent.task.stage }}</div>
            <div class="text-xs text-gray-500">Attempt {{ agent.task.attempt }}</div>
        </div>
    </div>
    {% if agent.task.awaiting_approval %}
    <div class="mt-3 flex items-center">
        <span class="status-dot status-attention mr-2"></span>
        <span class="text-yellow-400 text-sm">Awaiting Approval</span>
    </div>
    {% endif %}
</a>
{% else %}
<h2 class="text-lg font-semibold mb-2">Current Task</h2>
<p class="text-gray-500">No active task</p>
{% endif %}