{% extends "base.html" %}

{% block content %}
<h1 class="text-3xl font-semibold mb-2">▶️ Ejecutar Agente</h1>
<p class="text-zinc-400 mb-6">Invoca un agente con todo el gobierno (guardrails + HITL + observabilidad).</p>

<div class="max-w-2xl">
    <form hx-post="/run" hx-target="#result" hx-swap="innerHTML" class="space-y-4">
        <div>
            <label class="block text-sm mb-1">Agente</label>
            <select name="agent_name" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 text-sm">
                {% for a in agents %}
                <option value="{{ a.name }}">{{ a.name }} (v{{ a.version }})</option>
                {% endfor %}
            </select>
        </div>

        <div>
            <label class="block text-sm mb-1">Input / Escenario</label>
            <textarea name="input" rows="4" class="w-full bg-zinc-900 border border-zinc-700 rounded-lg px-3 py-2 font-mono text-sm"
                      placeholder='{"scenario": "01_sip_registration_drop"}'>{"scenario": "01_sip_registration_drop"}</textarea>
        </div>

        <button type="submit"
                class="px-4 py-2 bg-white text-black rounded-lg text-sm font-medium flex items-center gap-2 hover:bg-zinc-200">
            <span>Invocar</span>
            <span class="htmx-indicator">...</span>
        </button>
    </form>
</div>

<div id="result" class="mt-6"></div>
{% endblock %}