{% extends "base.html" %}

{% block title %}Agents - Codomyrmex{% endblock %}

{% block content %}
<h1>AI Agent Integrations</h1>

<p style="color: var(--text-secondary); margin-bottom: 1.5rem;">
    {{ agents|length }} agent frameworks and integrations available in the Codomyrmex agents module.
</p>

<div style="margin-bottom: 1.5rem;">
    <input
        id="agent-search"
        type="search"
        placeholder="Search agents…"
        aria-label="Search agent integrations"
        style="width: 100%; max-width: 400px; padding: 0.5rem 0.75rem;
               background: var(--bg-secondary); border: 1px solid var(--border-color);
               border-radius: 6px; color: var(--text-primary); font-size: 0.9rem;"
    >
</div>

<div class="grid" id="agents-grid">
    {% for agent in agents %}
    <div class="card" data-name="{{ agent.name|lower }}" data-type="{{ agent.type|lower }}">
        <h2 class="card-title">
            {{ agent.name }}
            <span
                class="status-badge {% if agent.type == 'CLI Integration' %}active{% elif agent.type == 'API Integration' %}running{% else %}pending{% endif %}">
                {{ agent.type }}
            </span>
        </h2>
        <p style="margin-bottom: 0.75rem;">{{ agent.description[:250] }}{% if agent.description|length > 250 %}...{%
            endif %}</p>
        <p class="console"
            style="margin-top: 0; padding: 0.5rem; font-size: 0.8rem; color: var(--text-secondary); background: transparent; border: none;">
            {{ agent.path }}
        </p>
    </div>
    {% endfor %}
</div>

{% if not agents %}
<div class="empty-state" aria-label="No agents found">
    <div class="empty-state-icon" aria-hidden="true">🤖</div>
    <p>No agent integrations found in <code>src/codomyrmex/agents/</code></p>
</div>
{% endif %}

<script>
    document.getElementById('agent-search').addEventListener('input', function () {
        const q = this.value.toLowerCase();
        document.querySelectorAll('#agents-grid .card').forEach(function (card) {
            const name = card.dataset.name || '';
            const type = card.dataset.type || '';
            const desc = card.querySelector('p') ? card.querySelector('p').textContent.toLowerCase() : '';
            card.style.display = (name.includes(q) || type.includes(q) || desc.includes(q)) ? '' : 'none';
        });
    });
</script>
{% endblock %}