<!-- htmlhint doctype-first:false -->
<table id="servers-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">Icon</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">S. No.</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Server 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">Auth</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">Tools</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Resources</th>
      <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">Prompts</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">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="servers-table-body" data-testid="server-list" class="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
  {% if data|length == 0 %}
  <tr data-testid="servers-empty-state">
    <td colspan="14" class="px-6 py-8 text-center">
      <p class="text-sm font-medium text-gray-700 dark:text-gray-300">
        {% if query_params is defined and query_params.get('team_id') %}
        No servers found in the selected team.
        {% else %}
        No servers found.
        {% endif %}
      </p>
      {% if query_params is defined and query_params.get('team_id') %}
      <p class="mt-2 text-xs text-gray-500 dark:text-gray-400">
        Switch the header selector back to <strong>All Teams</strong> to view servers outside this team scope.
      </p>
      {% endif %}
    </td>
  </tr>
  {% endif %}
  {% for server in data %}
  {% set server_label = server.name or server.id %}
  {% set can_modify = is_admin or server.ownerEmail == current_user_email or (server.visibility == 'team' and server.teamId and user_team_roles.get(server.teamId|string) == 'owner') %}
  <tr data-testid="server-item" data-enabled="{{ server.enabled|lower }}" data-owner-email="{{ server.ownerEmail }}" data-team-id="{{ server.teamId or '' }}" data-visibility="{{ server.visibility }}">
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
      <div class="relative"
           x-data="window.Admin?.overflowMenu?.('servers-table-wrapper')"
               @click.away="menuOpen = false"
               @keydown.escape="menuOpen = false; $refs.trigger.focus()">
        <button
          type="button"
          x-ref="trigger"
          @click="menuOpen ? (menuOpen = false) : openMenu()"
          class="p-1.5 rounded-md text-gray-500 hover:text-gray-700 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-gray-200 dark:hover:bg-gray-700 transition-colors"
          :aria-expanded="menuOpen"
          aria-haspopup="menu"
          aria-label="Actions"
          x-tooltip="'Actions'"
        >
          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
            <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zm6 0a2 2 0 11-4 0 2 2 0 014 0zm6 0a2 2 0 11-4 0 2 2 0 014 0z"/>
          </svg>
        </button>
        <!-- Dropdown menu (fixed-positioned to escape overflow/scroll containers) -->
        <div
          x-ref="menu"
          x-cloak
          x-show="menuOpen"
          x-transition:enter="transition ease-out duration-100"
          x-transition:enter-start="opacity-0 scale-95"
          x-transition:enter-end="opacity-100 scale-100"
          x-transition:leave="transition ease-in duration-75"
          x-transition:leave-start="opacity-100 scale-100"
          x-transition:leave-end="opacity-0 scale-95"
          class="fixed w-44 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 z-50 py-1"
          :style="`top: ${menuTop}px; left: ${menuLeft}px; display: ${menuOpen ? 'block' : 'none'}`"
          role="menu"
          aria-orientation="vertical"
          @keydown.arrow-down.prevent="navigate(1)"
          @keydown.arrow-up.prevent="navigate(-1)"
        >
          <button
            type="button"
            role="menuitem"
            tabindex="0"
            @click="menuOpen = false; window.Admin?.viewServer?.({{ server.id|tojson_attr }})"
            class="w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
          >View</button>
          {% if can_modify %}
          <button
            type="button"
            role="menuitem"
            tabindex="0"
            @click="menuOpen = false; window.Admin?.editServer?.({{ server.id|tojson_attr }})"
            class="w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
          >Edit</button>
          {% endif %}
          <button
            type="button"
            role="menuitem"
            tabindex="0"
            @click="menuOpen = false; window.Admin?.showConfigSelectionModal?.({{ server.id|tojson_attr }}, {{ server.name|tojson_attr }})"
            class="w-full flex items-center px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700"
            x-tooltip="'💡Generate client configuration files for this server'"
          >Export Config</button>
          {% if can_modify %}
          <hr class="border-gray-200 dark:border-gray-600 my-1">
          <form method="POST" action="{{ root_path }}/admin/servers/{{ server.id }}/state" class="contents" @submit="menuOpen = false" data-action-submit="handleToggleSubmit" data-arg0="servers">
            <input type="hidden" name="activate" value="{{ 'false' if server.enabled else 'true' }}" />
            <button
              type="submit"
              role="menuitem"
              tabindex="0"
              class="w-full flex items-center px-4 py-2 text-sm {% if server.enabled %}text-yellow-600 dark:text-yellow-400{% else %}text-green-600 dark:text-green-400{% endif %} hover:bg-gray-100 dark:hover:bg-gray-700"
            >{% if server.enabled %}Deactivate{% else %}Activate{% endif %}</button>
          </form>
          <form method="POST" action="{{ root_path }}/admin/servers/{{ server.id }}/delete" class="contents" @submit="menuOpen = false" data-action-submit="handleDeleteSubmit" data-arg0="server" data-arg1="{{ server_label|tojson_attr }}" data-arg2="servers">
            <button
              type="submit"
              role="menuitem"
              tabindex="0"
              class="w-full flex items-center px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-gray-100 dark:hover:bg-gray-700"
            >Delete</button>
          </form>
          {% endif %}
        </div>
      </div>
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {% if server.icon %}
      <img src="{{ server.icon }}" alt="{{ server.name }} Icon" class="h-8 w-8" />
      {% else %}
      <span class="text-gray-500 dark:text-gray-300">N/A</span>
      {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300">{{ (pagination.page - 1) * pagination.per_page + loop.index }}</td>
    <td class="px-6 py-4 whitespace-normal break-all text-sm font-medium text-gray-900 dark:text-gray-300 max-w-32">{{ server.id }}</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900 dark:text-gray-300">{{ server.name }}</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
      {% if server.oauthEnabled %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200">OAuth</span>
      {% else %}
      <span class="text-gray-500 dark:text-gray-400 text-xs">—</span>
      {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300">{{ server.description | decode_html }}</td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
      {% if server.associatedTools %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300">{{ server.associatedTools | length }} tool{{ 's' if server.associatedTools | length != 1 else '' }}</span>
      {% else %}
      <span class="text-gray-500 dark:text-gray-400 text-xs">0 tools</span>
      {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
      {% if server.associatedResources %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300">{{ server.associatedResources | length }} resource{{ 's' if server.associatedResources | length != 1 else '' }}</span>
      {% else %}
      <span class="text-gray-500 dark:text-gray-400 text-xs">0 resources</span>
      {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-gray-300">
      {% if server.associatedPrompts %}
      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300">{{ server.associatedPrompts | length }} prompt{{ 's' if server.associatedPrompts | length != 1 else '' }}</span>
      {% else %}
      <span class="text-gray-500 dark:text-gray-400 text-xs">0 prompts</span>
      {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {% if server.tags %}
        {% for tag in server.tags %}
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1 mb-1" data-tag="{% if tag is mapping %}{{ tag.id }}{% else %}{{ tag }}{% endif %}">
          {% if tag is mapping %}{{ tag.id }}{% else %}{{ tag }}{% endif %}
        </span>
        {% endfor %}
      {% else %}
      <span class="text-gray-500 dark:text-gray-300 text-xs">None</span>
      {% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {% if server.ownerEmail %}
      <span class="text-sm text-gray-900 dark:text-gray-100">{{ server.ownerEmail }}</span>
      {% else %}
      <span class="text-gray-500 dark:text-gray-300 text-xs">N/A</span>
      {% endif %}
    </td>
    <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-20">
      {% if server.team %}{{ server.team }}{% else %}<span class="text-gray-400 dark:text-gray-600 text-xs">None</span>{% endif %}
    </td>
    <td class="px-6 py-4 whitespace-nowrap">
      {% if server.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 server.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 server.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="servers-pagination-controls" hx-swap-oob="true">
  {% set base_url = root_path + '/admin/servers/partial' %}
  {% set hx_target = '#servers-table' %}
  {% set hx_swap = 'outerHTML' %}
  {% set hx_indicator = '#servers-loading' %}
  {% set table_name = 'servers' %}
  {% set query_params = query_params if query_params is defined else {'include_inactive': include_inactive} %}
  {% include 'pagination_controls.html' %}
</div>
