{% extends "base.html" %}

{% block content %}
<h1 class="text-3xl font-semibold mb-6">🤝 Pending Approvals (HITL)</h1>
<p class="text-sm text-zinc-400 mb-4 max-w-2xl">Executions with high-risk actions are paused here. Approve or reject so the graph can continue (or fail). The list updates after every action.</p>

<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="/api/executions/{{ ex.trace_id }}/approve"
            hx-vals='{"approved_action_ids": [], "comment": "Aprobado desde UI"}'
            hx-target="#approvals-list"
            hx-swap="none"
            hx-on::after-request="setTimeout(() => location.reload(), 400)"
            class="px-3 py-1 text-xs bg-emerald-600 hover:bg-emerald-500 rounded">
            Aprobar todo
        </button>
        <button
            hx-post="/api/executions/{{ ex.trace_id }}/reject"
            hx-vals='{"reason": "Rechazado desde interfaz web"}'
            hx-target="#approvals-list"
            hx-swap="none"
            hx-on::after-request="setTimeout(() => location.reload(), 400)"
            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 executions awaiting approval.</div>
{% endfor %}
</div>
{% endblock %}