<!-- htmlhint doctype-first:false -->
<table id="agents-table" class="min-w-full divide-y divide-gray-200">
  <thead class="bg-gray-50 dark:bg-gray-700">
    <tr>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Actions</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">ID</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Name</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Description</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Endpoint</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Tags</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Type</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Status</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Reachability</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Owner</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Team</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Visibility</th>
    </tr>
  </thead>
  <tbody id="agents-table-body" class="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
    {% for agent in data %}
    {% set agent_label = agent.name or agent.id %}
    {% set can_modify = is_admin or agent.ownerEmail == current_user_email or (agent.visibility == 'team' and agent.teamId and user_team_roles.get(agent.teamId|string) == 'owner') %}
      <tr data-enabled="{{ agent.enabled|lower }}" data-owner-email="{{ agent.ownerEmail }}" data-team-id="{{ agent.teamId or '' }}" data-visibility="{{ agent.visibility }}">
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
          <div class="grid grid-cols-2 gap-x-2 gap-y-0 max-w-48">
            <!-- Row 1: Test -->
            <button
              onclick="testA2AAgent('{{ agent.id }}', '{{ agent.name }}', '{{ agent.endpointUrl }}')"
              class="col-span-2 flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-purple-600 hover:text-purple-900 hover:bg-purple-50 dark:text-purple-400 dark:hover:bg-purple-900/20 transition-colors"
              x-tooltip="'💡Test this agent with sample arguments'"
            >
              Test
            </button>

            <!-- Row 2: View | Edit -->
            <button onclick="viewAgent('{{ agent.id }}')" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-indigo-600 hover:text-indigo-900 hover:bg-indigo-50 dark:text-indigo-400 dark:hover:bg-indigo-900/20 transition-colors">View</button>
            {% if can_modify %}
            <button onclick="editA2AAgent('{{ agent.id }}')" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-green-600 hover:text-green-900 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20 transition-colors">Edit</button>
            {% endif %}

            {% if can_modify %}
            <!-- Row 3 & 4: Activate/Deactivate | Delete -->
            <div class="col-span-2 flex flex-col space-y-1">
              <form method="POST" action="{{ root_path }}/admin/a2a/{{ agent.id }}/state" class="contents" onsubmit="return handleToggleSubmit(event, 'a2a')">
                <input type="hidden" name="activate" value="{{ 'false' if agent.enabled else 'true' }}" />
                <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md {% if agent.enabled %}text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20{% else %}text-green-600 hover:text-green-900 hover:bg-green-50 dark:text-green-400 dark:hover:bg-green-900/20{% endif %}">{% if agent.enabled %}Deactivate{% else %}Activate{% endif %}</button>
              </form>
              <form method="POST" action="{{ root_path }}/admin/a2a/{{ agent.id }}/delete" class="contents" onsubmit="return handleDeleteSubmit(event, 'agent', '{{ agent_label }}', 'a2a')">
                <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-red-600 hover:text-red-900 hover:bg-red-50 dark:text-red-400 dark:hover:bg-red-900/20 transition-colors">Delete</button>
              </form>
            </div>
            {% endif %}
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-700 dark:text-gray-300">{{ (pagination.page - 1) * pagination.per_page + loop.index }}</td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm font-medium text-gray-900 dark:text-gray-200">{{ agent.name }}</div>
        </td>
        <td class="px-6 py-4 whitespace-normal break-words text-sm text-gray-600 dark:text-gray-400">{{ (agent.description if agent.description else '') | decode_html }}</td>
        <td class="px-6 py-4 whitespace-normal break-all text-sm text-gray-600 dark:text-gray-400 max-w-xs">{{ agent.endpointUrl }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
          {% if agent.tags %}
            {% for tag in agent.tags %}
            <span class="inline-flex items-center px-2 py-1 rounded text-xs bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300 mr-1">
              {% if tag is mapping %}{{ tag.id }}{% else %}{{ tag }}{% endif %}
            </span>
            {% endfor %}
          {% endif %}
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">{{ agent.agentType }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
          <div class="flex flex-col gap-1">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if agent.enabled %}bg-green-100 text-green-800{% else %}bg-red-100 text-red-800{% endif %}">{% if agent.enabled %}Active{% else %}Inactive{% endif %}</span>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">
          <div class="flex flex-col gap-1">
            <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium {% if agent.reachable %}bg-green-100 text-green-800{% else %}bg-yellow-100 text-yellow-800{% endif %}">{% if agent.reachable %}Reachable{% else %}Unreachable{% endif %}</span>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">{{ agent.ownerEmail }}</td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-600 dark:text-gray-400">{{ agent.team }}</td>
        <td class="px-6 py-4 whitespace-nowrap">
          {% if agent.visibility == 'private' %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">Private</span>
          {% elif agent.visibility == 'team' %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Team</span>
          {% elif agent.visibility == 'public' %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Public</span>
          {% else %}
          <span class="text-gray-500 dark:text-gray-300 text-xs">N/A</span>
          {% endif %}
        </td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<!-- Out-of-band swap for pagination controls -->
<div id="agents-pagination-controls" hx-swap-oob="true">
  {% set base_url = root_path + '/admin/a2a/partial' %}
  {% set hx_target = '#agents-table' %}
  {% set hx_indicator = '#agents-loading' %}
  {% set table_name = 'agents' %}
  {% set query_params = query_params if query_params is defined else {'include_inactive': include_inactive} %}
  {% include 'pagination_controls.html' %}
</div>
