{% extends "base.html" %}

{% block content %}
<div class="max-w-2xl">
    <div class="mb-2 flex items-center gap-2">
        <span class="text-forge-gold text-2xl">⚒</span>
        <h1 class="text-3xl font-semibold tracking-tight">The Anvil</h1>
    </div>
    <p class="text-forge-muted mb-6">Choose a blade, dictate the task and strike. The Forge will execute with fire and rules.</p>

    <div class="forge-card border rounded-2xl p-6">
        <form hx-post="/run" hx-target="#result" hx-swap="innerHTML" class="space-y-5">
            <div>
                <label class="block text-xs tracking-widest text-forge-gold mb-1.5">🗡️ BLADE TO FORGE</label>
                <select name="agent_name" class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2.5 text-sm focus:border-forge-ember outline-none">
                    {% for a in agents %}
                    <option value="{{ a.name }}">{{ a.name }} (v{{ a.version }})</option>
                    {% endfor %}
                </select>
            </div>

            <div>
                <label class="block text-xs tracking-widest text-forge-gold mb-1.5">🔥 THE STEEL TO STRIKE (SCENARIO / INPUT)</label>
                <textarea name="input" rows="4" class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2 font-mono text-sm focus:border-forge-ember outline-none"
                          placeholder='{"scenario": "01_sip_registration_drop"}'>{"scenario": "01_sip_registration_drop"}</textarea>
            </div>

            <button type="submit"
                    class="w-full sm:w-auto px-6 py-2.5 bg-forge-ember text-black font-semibold rounded-lg text-sm flex items-center justify-center gap-2 hover:brightness-105 active:scale-[0.985] transition">
                <span>⚒ STRIKE THE ANVIL</span>
                <span class="htmx-indicator">⋯</span>
            </button>
        </form>
    </div>

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