{% extends "base.html" %}

{% block content %}
<div class="max-w-3xl mx-auto pb-12">

    <div class="mb-8">
        <div class="flex items-center gap-2 mb-1">
            <span class="text-forge-ember text-2xl">✧</span>
            <h1 class="text-4xl font-semibold tracking-tighter">Forge Tutorial</h1>
        </div>
        <p class="text-forge-muted">Learn the ancient craft of forging governed agents — step by step, strike by strike.</p>
    </div>

    <!-- Step 1 -->
    <div class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="font-mono text-xs px-2 py-px border border-forge-iron rounded bg-forge-surface2">01</span>
            <span class="uppercase tracking-[2px] text-xs text-forge-ember">STATION I — THE HEARTH</span>
        </div>
        <h3 class="text-xl font-semibold mb-2">Visit the Arsenal</h3>
        <p class="text-sm text-forge-muted mb-3">
            Every agent in the Forge is a blade that has already been tempered. Inspect existing blades to understand their purpose, risk threshold, and the laws (guardrails) that bind them.
        </p>
        <a href="/agents" class="inline-block text-sm text-forge-ember hover:underline">Open the Arsenal →</a>
    </div>

    <!-- Step 2 -->
    <div class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="font-mono text-xs px-2 py-px border border-forge-iron rounded bg-forge-surface2">02</span>
            <span class="uppercase tracking-[2px] text-xs text-forge-ember">STATION II — THE ANVIL</span>
        </div>
        <h3 class="text-xl font-semibold mb-2">Strike at the Anvil</h3>
        <p class="text-sm text-forge-muted mb-3">
            This is where the real work happens. Choose a forged blade, give it a concrete task (the "steel"), and strike. The Forge will run the full pipeline: input guardrails → LLM reasoning → output guardrails → action proposal.
        </p>
        <div class="text-sm text-forge-muted mb-3">
            Try a real example. Use the incident analyzer blade with a short network incident:
        </div>

        <!-- Live practice strike form (reuses the real /run endpoint) -->
        <div class="forge-card border border-forge-iron rounded-2xl p-5 mb-4">
            <form hx-post="/run" hx-target="#tutorial-result" hx-swap="innerHTML" class="space-y-4">
                <input type="hidden" name="agent_name" value="incident_analyzer">
                <div>
                    <label class="block text-xs tracking-widest text-forge-muted mb-1.5">TASK (the steel you strike)</label>
                    <textarea name="input" rows="3" 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">Network incident: sudden 80% drop in SIP registrations after a recent image promotion. Need root cause hypothesis and rollback plan if required.</textarea>
                </div>
                <button type="submit"
                        class="px-5 py-2 bg-forge-ember text-black font-semibold rounded-lg text-sm hover:brightness-105 active:scale-[0.985] transition">
                    STRIKE THE ANVIL (LIVE)
                </button>
            </form>
        </div>
        <div id="tutorial-result" class="mb-4"></div>
        <p class="text-xs text-forge-muted">The result below will show the real Strike Sequence, Flaws, and Proposed Edges — exactly like a production forging.</p>
    </div>

    <!-- Step 3 -->
    <div class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="font-mono text-xs px-2 py-px border border-forge-iron rounded bg-forge-surface2">03</span>
            <span class="uppercase tracking-[2px] text-xs text-forge-ember">STATION III — THE JUDGMENT</span>
        </div>
        <h3 class="text-xl font-semibold mb-2">Face the Judgment (HITL)</h3>
        <p class="text-sm text-forge-muted mb-3">
            When an action's risk score crosses the blade's threshold, the forging pauses. A human (you) must bless or shatter the proposed edges before the agent can continue. This is the heart of governed autonomy.
        </p>
        <a href="/approvals" class="inline-block text-sm text-forge-ember hover:underline">Enter the Judgment Chamber →</a>
    </div>

    <!-- Step 4 -->
    <div class="mb-10">
        <div class="flex items-center gap-3 mb-2">
            <span class="font-mono text-xs px-2 py-px border border-forge-iron rounded bg-forge-surface2">04</span>
            <span class="uppercase tracking-[2px] text-xs text-forge-ember">MASTERY</span>
        </div>
        <h3 class="text-xl font-semibold mb-2">Repeat and Improve</h3>
        <p class="text-sm text-forge-muted">
            Every successful forging increases the overall heat of the Forge. Review history (when available), tune risk thresholds on your blades, and strengthen guardrails. True mastery comes from deliberate, observed repetition.
        </p>
    </div>

    <div class="border-t border-forge-iron pt-8 text-sm text-forge-muted">
        The Forge does not forgive sloppy steel. The risk threshold is the critical temper point. If the blade glows white-hot, The Judgment must intervene.
        Nothing leaves the Forge without passing through fire and hammer.
    </div>

</div>
{% endblock %}