{% extends "dashboard/base.html" %}

{% block title %}Agents — {{ dashboard_title }}{% endblock %}
{% block page_title %}Agents{% endblock %}

{% block content %}
<div class="px-8 py-6">

  <!-- Page Header -->
  <div class="mb-6">
    <h1 class="text-2xl font-bold text-white tracking-tight">Agents</h1>
    <p class="text-slate-400 text-sm mt-1">Manage and monitor your AI agents.</p>
  </div>

  {% if workspace_errors %}
  <div class="p-4 mb-6 rounded-lg border border-amber-500/20 bg-amber-500/5 text-amber-400 flex gap-3">
    <span class="material-symbols-outlined text-amber-500 flex-shrink-0">warning</span>
    <div>
      <div class="font-bold text-sm">Workspace loaded with warnings</div>
      {% for err in workspace_errors %}
      <div class="text-xs mt-0.5 opacity-80">{{ err }}</div>
      {% endfor %}
    </div>
  </div>
  {% endif %}

  <!-- Tab Bar -->
  <div class="flex items-center gap-1 mb-6 border-b border-border-dark/50">
    <button
      id="tab-global"
      onclick="switchAgentTab('global')"
      class="px-4 py-2.5 text-sm font-semibold border-b-2 transition-all -mb-px
        border-primary text-primary"
    >
      Global Agents
    </button>
    <button
      id="tab-personal"
      onclick="switchAgentTab('personal')"
      class="px-4 py-2.5 text-sm font-semibold border-b-2 transition-all -mb-px
        border-transparent text-slate-400 hover:text-slate-200"
    >
      Personal Agents
    </button>
  </div>

  <!-- Global Agents Tab -->
  <div id="panel-global">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5" id="agent-cards-grid">
      {% include "dashboard/_agent_cards.html" %}
    </div>
  </div>

  <!-- Personal Agents Tab -->
  <div id="panel-personal" class="hidden">
    <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
      {% set personal_agents = agents | selectattr('is_personal') | list %}
      {% if personal_agents %}
        {% for agent in personal_agents %}
        <div class="group flex flex-col border-2 border-dashed border-border-dark rounded-xl hover:border-primary/40 transition-all duration-300">
          <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">
                {% 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 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>
            <h4 class="text-base font-bold text-white group-hover:text-primary transition-colors">{{ agent.display_name }}</h4>
            <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="p-3 bg-surface-2 border-t border-border-dark/50 flex items-center justify-between rounded-b-xl">
            <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>
          </div>
        </div>
        {% endfor %}
      {% else %}
      <div class="col-span-full py-16 flex flex-col items-center justify-center text-center">
        <div class="w-16 h-16 bg-surface-2 border border-border-dark rounded-full flex items-center justify-center text-slate-500 mb-4">
          <span class="material-symbols-outlined text-3xl">person</span>
        </div>
        <h3 class="text-base font-bold text-white mb-1">No Personal Agents</h3>
        <p class="text-sm text-slate-500 max-w-sm">Personal agents that require your configuration will appear here.</p>
      </div>
      {% endif %}
    </div>
  </div>

</div>

<script>
function switchAgentTab(tab) {
  const tabGlobal = document.getElementById('tab-global');
  const tabPersonal = document.getElementById('tab-personal');
  const panelGlobal = document.getElementById('panel-global');
  const panelPersonal = document.getElementById('panel-personal');

  if (tab === 'global') {
    tabGlobal.className = 'px-4 py-2.5 text-sm font-semibold border-b-2 transition-all -mb-px border-primary text-primary';
    tabPersonal.className = 'px-4 py-2.5 text-sm font-semibold border-b-2 transition-all -mb-px border-transparent text-slate-400 hover:text-slate-200';
    panelGlobal.classList.remove('hidden');
    panelPersonal.classList.add('hidden');
  } else {
    tabPersonal.className = 'px-4 py-2.5 text-sm font-semibold border-b-2 transition-all -mb-px border-primary text-primary';
    tabGlobal.className = 'px-4 py-2.5 text-sm font-semibold border-b-2 transition-all -mb-px border-transparent text-slate-400 hover:text-slate-200';
    panelPersonal.classList.remove('hidden');
    panelGlobal.classList.add('hidden');
  }
}
</script>
{% endblock %}