{% extends "base.html" %}

{% block content %}
<div class="max-w-3xl">
    <div class="mb-2 flex items-center gap-2">
        <span class="text-forge-gold text-xl">⚖</span>
        <span class="text-forge-ember text-sm tracking-[2px]">JUDGMENT CHAMBER</span>
    </div>
    <h1 class="text-3xl font-semibold tracking-tight mb-2">The Judgment</h1>
    <p class="text-sm text-forge-muted mb-6 max-w-xl">High-risk forgings pause here to be tempered or shattered. Approve or reject. The anvil waits.</p>

    <div class="space-y-4" id="approvals-list">
    {% for ex in pending %}
    <div class="forge-card border border-amber-900/60 rounded-2xl p-5">
        <div class="flex justify-between items-start">
            <div>
                <div class="font-medium">{{ ex.agent_name }} <span class="text-forge-muted">v{{ ex.agent_version }}</span></div>
                <div class="text-xs text-forge-muted font-mono mt-0.5">{{ ex.trace_id }}</div>
            </div>
            <div class="text-amber-400 text-xs font-mono tracking-widest flex items-center gap-1">🛡️ AWAITING TEMPERING</div>
        </div>

        <div class="mt-4 flex gap-3">
            <button
                hx-post="/api/executions/{{ ex.trace_id }}/approve"
                hx-vals='{"approved_action_ids": [], "comment": "Approved from UI"}'
                hx-target="#approvals-list"
                hx-swap="none"
                hx-on::after-request="setTimeout(() => location.reload(), 400)"
                class="px-4 py-1.5 text-xs font-medium bg-emerald-600 hover:bg-emerald-500 text-white rounded transition">
                🛡 BLESS THE BLADE
            </button>
            <button
                hx-post="/api/executions/{{ ex.trace_id }}/reject"
                hx-vals='{"reason": "Rejected from web UI"}'
                hx-target="#approvals-list"
                hx-swap="none"
                hx-on::after-request="setTimeout(() => location.reload(), 400)"
                class="px-4 py-1.5 text-xs font-medium bg-red-700 hover:bg-red-600 text-white rounded transition">
                ⚔ SHATTER THE BLADE
            </button>
        </div>
    </div>
    {% else %}
    <div class="forge-card border border-forge-iron rounded-2xl p-8 text-center text-forge-muted">
        <span class="text-forge-gold">🛡️</span> No forgings currently await judgment. The Forge is quiet.
    </div>
    {% endfor %}
    </div>
</div>
{% endblock %}