{% if agents %}
{% for agent in agents %}
<div class="group flex flex-col bg-surface border border-border-dark rounded-xl hover:border-primary/50 transition-all duration-300 shadow-sm hover:shadow-md hover:-translate-y-0.5 {% if not agent.enabled %}opacity-60{% endif %}">
  <div class="p-5 flex flex-col flex-1">
    <div class="flex items-start justify-between mb-4">
      <div class="w-12 h-12 rounded-xl bg-surface-2 border border-border-dark flex items-center justify-center text-primary font-bold overflow-hidden text-lg">
        {% if agent.avatar_url %}
        <img class="w-full h-full object-cover" src="{{ agent.avatar_url }}" alt="{{ agent.display_name }}">
        {% else %}
        {{ agent.initials }}
        {% endif %}
      </div>
      {% if not agent.enabled %}
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-bold bg-slate-500/10 border border-slate-500/20 text-slate-400">
        <span class="w-1.5 h-1.5 rounded-full bg-slate-500"></span>
        Disabled
      </span>
      {% elif agent.status == 'setup_required' %}
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-bold bg-rose-500/10 border border-rose-500/20 text-rose-400">
        <span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
        Setup Required
      </span>
      {% elif agent.status == 'busy' %}
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-bold bg-amber-500/10 border border-amber-500/20 text-amber-400">
        <span class="w-1.5 h-1.5 rounded-full bg-amber-500 animate-pulse"></span>
        Busy
      </span>
      {% else %}
      <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md text-[10px] font-bold bg-emerald-500/10 border border-emerald-500/20 text-emerald-400">
        <span class="w-1.5 h-1.5 rounded-full bg-emerald-500 animate-pulse"></span>
        Online
      </span>
      {% endif %}
    </div>

    {% if current_user and current_user.is_admin %}
    <a href="{{ base_path }}/dashboard/agents/{{ agent.id }}/detail" class="text-base font-bold text-white group-hover:text-primary transition-colors hover:underline">{{ agent.display_name }}</a>
    {% else %}
    <h4 class="text-base font-bold text-white group-hover:text-primary transition-colors">{{ agent.display_name }}</h4>
    {% endif %}
    <p class="text-xs text-slate-500 mb-2">{{ agent.model }}</p>

    {% if agent.description %}
    <p class="mt-1 text-sm text-slate-400 line-clamp-2">{{ agent.description }}</p>
    {% else %}
    <p class="mt-1 text-sm text-slate-500 italic">No description provided for this agent.</p>
    {% endif %}

    {% if agent.tags %}
    <div class="mt-3 flex flex-wrap gap-1.5">
      {% for tag in agent.tags %}
      <span class="px-2 py-0.5 rounded-md text-[10px] font-semibold bg-primary/10 text-primary border border-primary/20">{{ tag }}</span>
      {% endfor %}
    </div>
    {% endif %}
  </div>

  <div class="px-5 py-3 bg-surface-2 border-t border-border-dark/50 flex items-center justify-between rounded-b-xl">
    <div class="flex items-center gap-2">
      {% if agent.status == 'setup_required' %}
      <a href="{{ base_path }}/dashboard/agents/{{ agent.id }}/setup" class="flex items-center gap-2 px-3 py-1.5 bg-primary text-white rounded-lg text-xs font-bold hover:bg-primary/90 transition-colors">
        <span class="material-symbols-outlined text-sm">settings</span>
        Configure
      </a>
      {% else %}
      <a href="{{ base_path }}/dashboard/chat?agent_id={{ agent.id }}" class="flex items-center gap-2 px-3 py-1.5 bg-primary text-white rounded-lg text-xs font-bold hover:bg-primary/90 transition-colors">
        <span class="material-symbols-outlined text-sm">chat_bubble</span>
        Chat
      </a>
      <a href="{{ base_path }}/dashboard/executions?agent_id={{ agent.id }}" class="p-1.5 text-slate-400 hover:text-primary hover:bg-primary/10 rounded-lg transition-all border border-transparent hover:border-primary/20" title="View Executions">
        <span class="material-symbols-outlined text-base">terminal</span>
      </a>
      {% endif %}
    </div>
    <div class="flex items-center gap-1">
      {% if agent.is_personal and agent.status != 'setup_required' %}
      <a href="{{ base_path }}/dashboard/agents/{{ agent.id }}/setup" class="p-1.5 text-slate-500 hover:text-primary hover:bg-primary/10 rounded-lg transition-all" title="Configuration">
        <span class="material-symbols-outlined text-base">settings</span>
      </a>
      {% endif %}
      {% if current_user and current_user.is_admin %}
      <form method="POST" action="{{ base_path }}/dashboard/agents/{{ agent.id }}/toggle" class="inline">
        {% if agent.enabled %}
        <button type="submit" class="p-1.5 text-slate-500 hover:text-rose-400 hover:bg-rose-500/10 rounded-lg transition-all" title="Disable Agent">
          <span class="material-symbols-outlined text-base">block</span>
        </button>
        {% else %}
        <button type="submit" class="p-1.5 text-slate-500 hover:text-emerald-400 hover:bg-emerald-500/10 rounded-lg transition-all" title="Enable Agent">
          <span class="material-symbols-outlined text-base">check_circle</span>
        </button>
        {% endif %}
      </form>
      {% endif %}
    </div>
  </div>
</div>
{% endfor %}
{% else %}
<div class="col-span-full py-20 flex flex-col items-center justify-center text-center">
  <div class="w-20 h-20 bg-surface-2 border border-border-dark rounded-full flex items-center justify-center text-slate-500 mb-6">
    <span class="material-symbols-outlined text-4xl">smart_toy</span>
  </div>
  <h3 class="text-xl font-bold text-white mb-2">No Agents Found</h3>
  <p class="text-slate-500 max-w-sm text-sm">No agents are currently configured in your workspace. Add one to get started.</p>
</div>
{% endif %}