{% extends "base.html" %}

{% block content %}
<h1 class="text-3xl font-semibold mb-6">🤝 Aprobaciones Pendientes (HITL)</h1>

<div class="space-y-4 max-w-4xl" id="approvals-list">
{% for ex in pending %}
<div class="border border-amber-800 bg-zinc-900 rounded-xl p-4">
    <div class="flex justify-between items-start">
        <div>
            <div class="font-medium">{{ ex.agent_name }} v{{ ex.agent_version }}</div>
            <div class="text-xs text-zinc-400">{{ ex.trace_id }}</div>
        </div>
        <div class="text-amber-400 text-xs">AWAITING APPROVAL</div>
    </div>

    <div class="mt-3 flex gap-2">
        <button
            hx-post="/approvals/{{ ex.trace_id }}/approve"
            hx-target="#approvals-list"
            hx-swap="outerHTML"
            class="px-3 py-1 text-xs bg-emerald-600 hover:bg-emerald-500 rounded">
            Aprobar todo
        </button>
        <button
            hx-post="/approvals/{{ ex.trace_id }}/reject"
            hx-target="#approvals-list"
            hx-swap="outerHTML"
            class="px-3 py-1 text-xs bg-red-600 hover:bg-red-500 rounded">
            Rechazar
        </button>
    </div>
</div>
{% else %}
<div class="text-zinc-400">No hay ejecuciones esperando aprobación.</div>
{% endfor %}
</div>
{% endblock %}