{% extends "base.html" %}

{% block content %}
<div>
    <div class="flex items-baseline gap-3 mb-6">
        <span class="text-2xl text-forge-ember">⚔</span>
        <h1 class="text-3xl font-semibold tracking-tight">Arsenal</h1>
        <span class="text-xs px-2 py-px bg-forge-surface2 border border-forge-iron rounded text-forge-muted">FORGED BLADES</span>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- List of blades -->
        <div class="lg:col-span-1">
            <div class="border border-forge-iron bg-forge-surface rounded-xl overflow-hidden">
                {% for a in agents %}
                <a href="/agents/{{ a.name }}"
                   hx-get="/agents/{{ a.name }}"
                   hx-target="#agent-detail"
                   hx-swap="innerHTML"
                   class="block px-4 py-3 border-b border-forge-iron last:border-b-0 hover:bg-forge-surface2 hover:border-l-2 hover:border-forge-ember cursor-pointer transition">
                    <div class="flex items-center gap-3">
                        <span class="text-2xl flex-shrink-0"
                              {% if a.color %}style="color: {{ a.color }}"{% endif %}>
                            {{ a.icon or "◆" }}
                        </span>
                        <div class="min-w-0">
                            <div class="font-medium truncate">{{ a.name }}</div>
                            <div class="text-xs text-forge-muted">v{{ a.version }} · {{ a.state }}</div>
                        </div>
                    </div>
                </a>
                {% else %}
                <div class="px-4 py-6 text-forge-muted">No forged blades in the Arsenal yet.</div>
                {% endfor %}
            </div>
        </div>

        <!-- Detail / inspection area -->
        <div class="lg:col-span-2">
            <div id="agent-detail" class="border border-forge-iron bg-forge-surface rounded-xl p-6 h-full">
                <div class="h-full flex items-center justify-center">
                    <div class="text-forge-muted text-sm text-center max-w-[260px]">
                        <span class="text-forge-ember">🛡</span> Select a blade from the Arsenal to inspect its temper, purpose and edge.
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}