{% extends "base.html" %}
{% block title %}Agents — SimpleAudit{% endblock %}
{% block content %}
<div class="flex flex-wrap items-start justify-between gap-3 mb-5">
  <div>
    <h1 class="text-lg font-semibold text-gray-100">Agents</h1>
    <p class="text-sm text-gray-500 mt-0.5 max-w-2xl">
      {{ agents|length }} agent{{ agents|length|pluralize }}.
      An agent composes a model, instructions, knowledge, tools, and retrieval settings into an auditable target.
    </p>
  </div>
  <a href="{% url 'agent_new' %}"
     class="px-3 py-1.5 rounded-lg bg-accent text-white text-xs font-medium hover:bg-accent-hover whitespace-nowrap">+ New agent</a>
</div>

{% if agents %}
<div class="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
  {% for agent in agents %}
  <section class="bg-surface-raised rounded-xl border border-gray-800 p-4 {% if not agent.enabled %}opacity-60{% endif %}">
    <div class="flex items-start justify-between gap-2">
      <div class="min-w-0">
        <h2 class="text-sm font-semibold text-gray-100 truncate">{{ agent.name }}</h2>
        <p class="text-xs text-gray-500 mt-0.5">{{ agent.base_model.display_name }} · {{ agent.base_model.connection.name }}</p>
      </div>
      {% if not agent.enabled %}<span class="px-1.5 py-0.5 rounded bg-gray-800 text-[10px] text-gray-400 shrink-0">disabled</span>{% endif %}
    </div>
    {% if agent.description %}
    <p class="text-xs text-gray-400 mt-2 line-clamp-2">{{ agent.description }}</p>
    {% endif %}
    <div class="flex flex-wrap gap-1.5 mt-3">
      {% if agent.knowledge_bases.count %}
      <span class="px-1.5 py-0.5 rounded bg-sky-900/30 text-sky-300 text-[10px]">{{ agent.knowledge_bases.count }} KB</span>
      {% endif %}
      {% if agent.tools.count %}
      <span class="px-1.5 py-0.5 rounded bg-emerald-900/30 text-emerald-300 text-[10px]">{{ agent.tools.count }} tools</span>
      {% endif %}
      {% if agent.retrieval_settings %}
      <span class="px-1.5 py-0.5 rounded bg-amber-900/30 text-amber-300 text-[10px]">Retrieval: {{ agent.retrieval_settings.search_mode }}</span>
      {% endif %}
    </div>
    <div class="flex items-center gap-2 mt-3 pt-3 border-t border-gray-800">
      <a href="{% url 'agent_detail' agent.id %}" class="text-xs text-accent hover:underline">Edit</a>
      <a href="{% url 'agent_test_chat' agent.id %}" class="text-xs text-gray-400 hover:text-white">Test in Chat</a>
      <form method="post" action="{% url 'agent_delete' agent.id %}" class="ml-auto"
            onsubmit="return confirm('Delete agent &quot;{{ agent.name }}&quot;?')">
        {% csrf_token %}
        <button type="submit" class="text-xs text-gray-500 hover:text-red-400">Delete</button>
      </form>
    </div>
  </section>
  {% endfor %}
</div>
{% else %}
<div class="text-center py-16">
  <p class="text-gray-500 text-sm">No agents yet.</p>
  <a href="{% url 'agent_new' %}" class="text-accent text-sm hover:underline mt-2 inline-block">Create your first agent</a>
</div>
{% endif %}
{% endblock %}