<!-- htmlhint doctype-first:false -->
<!-- Tools Table Rows AND Pagination Controls for HTMX Updates -->
<!-- This template renders both the table body content and pagination controls together -->
<!-- Uses HTMX out-of-band swaps to update multiple elements -->

<!-- Main content wrapped in a div that will be swapped into the target -->
<div>
  {% if data is defined %}
  <!-- HTMX response with out-of-band swaps -->

  <!-- 1. Table rows to be swapped into the table body -->
  {% for tool in data %}
    {% set can_modify = is_admin or tool.ownerEmail == current_user_email or (tool.visibility == 'team' and tool.teamId and user_team_roles.get(tool.teamId|string) == 'owner') %}
    <tr data-owner-email="{{ tool.ownerEmail }}" data-team-id="{{ tool.teamId or '' }}" data-visibility="{{ tool.visibility }}">
      <td class="px-2 py-4 whitespace-nowrap text-sm font-medium text-gray-900 w-12 dark:text-gray-100">
        {{ (pagination.page - 1) * pagination.per_page + loop.index }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-36">
        {{ tool.gatewaySlug }}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm font-medium text-gray-900 w-24 dark:text-gray-100">
        {{ tool.name }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-24">
        {{ tool.url }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-12">
        {{ tool.integrationType }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-12">
        {{ tool.requestType }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300">
        {% set clean_desc = (tool.description or "") | decode_html | replace('\n', ' ') | replace('\r', ' ') %}
        {% set refactor_desc = clean_desc | striptags | trim %}
        {% if refactor_desc | length is greaterthan 220 %}
          {{ refactor_desc[:400] + "..." }}
        {% else %}
          {{ refactor_desc }}
        {% endif %}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words">
        {% if tool.annotations %}
          {% if tool.annotations.readOnlyHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-1 mb-1">📖</span>
          {% endif %}
          {% if tool.annotations.destructiveHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 mr-1 mb-1">⚠️</span>
          {% endif %}
          {% if tool.annotations.idempotentHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 mr-1 mb-1">🔄</span>
          {% endif %}
          {% if tool.annotations.openWorldHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800 mr-1 mb-1">🌐</span>
          {% endif %}
        {% else %}
          <span class="text-gray-500 dark:text-gray-300 text-xs">None</span>
        {% endif %}
      </td>
      <td class="px-2 py-4 whitespace-nowrap">
        {% if tool.tags %}
          {% for tag in tool.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">{% 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-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-20">
        {{ tool.ownerEmail }}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-20">
        {% if tool.teamName %}{{ tool.teamName }}{% else %}<span class="text-gray-400 dark:text-gray-600 text-xs">None</span>{% endif %}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-16">
        {% if tool.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>
        {% elif tool.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>
        {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">🔒 Private</span>
        {% endif %}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm w-12">
        <div class="relative group">
          {% set enabled = tool.enabled %}
          {% set reachable = tool.reachable %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if enabled and reachable %}bg-green-100 text-green-800{% elif enabled %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
            {% if enabled and reachable %}
              Online
              <svg class="ml-1 h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L9 11.586 6.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            {% elif enabled %}
              Offline
              <svg class="ml-1 h-4 w-4 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-10h2v4h-2V8zm0 6h2v2h-2v-2z" clip-rule="evenodd" />
              </svg>
            {% else %}
              Inactive
              <svg class="ml-1 h-4 w-4 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M6.293 6.293a1 1 0 011.414 0L10 8.586l2.293-2.293a1 1 0 111.414 1.414L11.414 10l2.293 2.293a1 1 0 11-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 11-1.414-1.414L8.586 10 6.293 7.707a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            {% endif %}
          </span>
          <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 z-30 whitespace-nowrap shadow">
            {% if not enabled %} 💡Tool is Manually Deactivated. {%
            elif not reachable %} 💡The host gateway for this tool
            is unreachable. {% else %} 💡Everything stable. {% endif
            %}
          </div>
        </div>
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm font-medium w-32">
        <div class="grid grid-cols-2 gap-x-2 gap-y-0 max-w-48">
          <!-- Row 1: Test -->
          <button data-action-click="testTool" data-arg0="{{ tool.id|tojson_attr }}" 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="'💡Execute this Tool with sample inputs'">
            Test
          </button>

          <!-- Row 2: View | Edit -->
          <button data-action-click="viewTool" data-arg0="{{ tool.id|tojson_attr }}" 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" x-tooltip="'💡View tool details and configuration'">
            View
          </button>
          {% if can_modify %}
          <button data-action-click="editTool" data-arg0="{{ tool.id|tojson_attr }}" 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" x-tooltip="'💡Edit tool settings and configuration'">
            Edit
          </button>
          {% endif %}

          {% if can_modify %}
          <!-- Row 3: Deactivate/Activate | Delete -->
          <div class="col-span-2 flex flex-col space-y-1">
            {% if tool.enabled %}
              <form method="POST" action="{{ root_path }}/admin/tools/{{ tool.id }}/state" class="contents" data-action-submit="handleToggleSubmit" data-arg0="tools">
                <input type="hidden" name="activate" value="false" />
                <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20 transition-colors" x-tooltip="'💡Temporarily disable this tool'">
                  Deactivate
                </button>
              </form>
            {% else %}
              <form method="POST" action="{{ root_path }}/admin/tools/{{ tool.id }}/state" class="contents" data-action-submit="handleToggleSubmit" data-arg0="tools">
                <input type="hidden" name="activate" value="true" />
                <button type="submit" 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" x-tooltip="'💡Re-enable this tool'">
                  Activate
                </button>
              </form>
            {% endif %}

            <form method="POST" action="{{ root_path }}/admin/tools/{{ tool.id }}/delete" class="contents" data-action-submit="handleDeleteSubmit" data-arg0="tool" data-arg1="{{ tool.name|tojson_attr }}" data-arg2="tools">
              <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" x-tooltip="'💡Permanently delete this tool'">
                Delete
              </button>
            </form>
          </div>
          {% endif %}
        </div>
      </td>
    </tr>
  {% endfor %}

  <!-- 2. Pagination controls, also swapped OOB -->
  <div id="tools-pagination-controls" hx-swap-oob="true">
    {% set base_url = root_path + '/admin/tools/partial' %}
    {% set hx_target = '#tools-table-body' %}
    {% set hx_indicator = '#tools-loading' %}
    {% set table_name = 'tools' %}
    {% set query_params = {'include_inactive': include_inactive} %}
    {% include 'pagination_controls.html' %}
  </div>

  {% else %}
  <!-- Initial page load: render the full table body -->
  <tbody id="tools-table-body" class="bg-white divide-y divide-gray-200 dark:bg-gray-900 dark:divide-gray-700">
    {% for tool in tools %}
    {% set can_modify = is_admin or tool.ownerEmail == current_user_email or (tool.visibility == 'team' and tool.teamId and user_team_roles.get(tool.teamId|string) == 'owner') %}
    <tr data-owner-email="{{ tool.ownerEmail }}" data-team-id="{{ tool.teamId or '' }}" data-visibility="{{ tool.visibility }}">
      <td class="px-2 py-4 whitespace-nowrap text-sm font-medium text-gray-900 w-12 dark:text-gray-100">
        {{ (pagination.page - 1) * pagination.per_page + loop.index }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-36">
        {{ tool.gatewaySlug }}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm font-medium text-gray-900 w-24 dark:text-gray-100">
        {{ tool.name }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-24">
        {{ tool.url }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-12">
        {{ tool.integrationType }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300 w-12">
        {{ tool.requestType }}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words text-sm text-gray-500 dark:text-gray-300">
        {% set clean_desc = (tool.description or "") | decode_html | replace('\n', ' ') | replace('\r', ' ') %}
        {% set refactor_desc = clean_desc | striptags | trim %}
        {% if refactor_desc | length is greaterthan 220 %}
          {{ refactor_desc[:400] + "..." }}
        {% else %}
          {{ refactor_desc }}
        {% endif %}
      </td>
      <td class="px-2 py-4 whitespace-normal break-words">
        {% if tool.annotations %}
          {% if tool.annotations.readOnlyHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-1 mb-1">📖</span>
          {% endif %}
          {% if tool.annotations.destructiveHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800 mr-1 mb-1">⚠️</span>
          {% endif %}
          {% if tool.annotations.idempotentHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 mr-1 mb-1">🔄</span>
          {% endif %}
          {% if tool.annotations.openWorldHint %}
            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800 mr-1 mb-1">🌐</span>
          {% endif %}
        {% else %}
          <span class="text-gray-500 dark:text-gray-300 text-xs">None</span>
        {% endif %}
      </td>
      <td class="px-2 py-4 whitespace-nowrap">
        {% if tool.tags %}
          {% for tag in tool.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">{% 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-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-20">
        {{ tool.ownerEmail }}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-20">
        {% if tool.teamName %}{{ tool.teamName }}{% else %}<span class="text-gray-400 dark:text-gray-600 text-xs">None</span>{% endif %}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm text-gray-500 dark:text-gray-300 w-16">
        {% if tool.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>
        {% elif tool.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>
        {% else %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-gray-100 text-gray-800">🔒 Private</span>
        {% endif %}
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm w-12">
        <div class="relative group">
          {% set enabled = tool.enabled %}
          {% set reachable = tool.reachable %}
          <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium {% if enabled and reachable %}bg-green-100 text-green-800{% elif enabled %}bg-yellow-100 text-yellow-800{% else %}bg-red-100 text-red-800{% endif %}">
            {% if enabled and reachable %}
              Online
              <svg class="ml-1 h-4 w-4 text-green-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 00-1.414 0L9 11.586 6.707 9.293a1 1 0 00-1.414 1.414l3 3a1 1 0 001.414 0l7-7a1 1 0 000-1.414z" clip-rule="evenodd" />
              </svg>
            {% elif enabled %}
              Offline
              <svg class="ml-1 h-4 w-4 text-yellow-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm-1-10h2v4h-2V8zm0 6h2v2h-2v-2z" clip-rule="evenodd" />
              </svg>
            {% else %}
              Inactive
              <svg class="ml-1 h-4 w-4 text-red-600" fill="currentColor" viewBox="0 0 20 20">
                <path fill-rule="evenodd" d="M6.293 6.293a1 1 0 011.414 0L10 8.586l2.293-2.293a1 1 0 111.414 1.414L11.414 10l2.293 2.293a1 1 0 11-1.414 1.414L10 11.414l-2.293 2.293a1 1 0 11-1.414-1.414L8.586 10 6.293 7.707a1 1 0 010-1.414z" clip-rule="evenodd" />
              </svg>
            {% endif %}
          </span>
          <div class="absolute left-full top-1/2 -translate-y-1/2 ml-2 hidden group-hover:block bg-gray-800 text-white text-xs rounded py-1 px-2 z-30 whitespace-nowrap shadow">
            {% if not enabled %} 💡Tool is Manually Deactivated. {%
            elif not reachable %} 💡The host gateway for this tool
            is unreachable. {% else %} 💡Everything stable. {% endif
            %}
          </div>
        </div>
      </td>
      <td class="px-2 py-4 whitespace-nowrap text-sm font-medium w-32">
        <div class="grid grid-cols-2 gap-x-2 gap-y-0 max-w-48">
          <!-- Row 1: Test -->
          <button data-action-click="testTool" data-arg0="{{ tool.id|tojson_attr }}" 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="'💡Execute this Tool with sample inputs'">
            Test
          </button>

          <!-- Row 2: View | Edit -->
          <button data-action-click="viewTool" data-arg0="{{ tool.id|tojson_attr }}" 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" x-tooltip="'💡View tool details and configuration'">
            View
          </button>
          {% if can_modify %}
          <button data-action-click="editTool" data-arg0="{{ tool.id|tojson_attr }}" 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" x-tooltip="'💡Edit tool settings and configuration'">
            Edit
          </button>
          {% endif %}

          {% if can_modify %}
          <!-- Row 3: Deactivate/Activate | Delete -->
          <div class="col-span-2 flex flex-col space-y-1">
            {% if tool.enabled %}
              <form method="POST" action="{{ root_path }}/admin/tools/{{ tool.id }}/state" class="contents" data-action-submit="handleToggleSubmit" data-arg0="tools">
                <input type="hidden" name="activate" value="false" />
                <button type="submit" class="flex items-center justify-center px-2 py-1 text-xs font-medium rounded-md text-yellow-600 hover:text-yellow-900 hover:bg-yellow-50 dark:text-yellow-400 dark:hover:bg-yellow-900/20 transition-colors" x-tooltip="'💡Temporarily disable this tool'">
                  Deactivate
                </button>
              </form>
            {% else %}
              <form method="POST" action="{{ root_path }}/admin/tools/{{ tool.id }}/state" class="contents" data-action-submit="handleToggleSubmit" data-arg0="tools">
                <input type="hidden" name="activate" value="true" />
                <button type="submit" 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" x-tooltip="'💡Re-enable this tool'">
                  Activate
                </button>
              </form>
            {% endif %}

            <form method="POST" action="{{ root_path }}/admin/tools/{{ tool.id }}/delete" class="contents" data-action-submit="handleDeleteSubmit" data-arg0="tool" data-arg1="{{ tool.name|tojson_attr }}" data-arg2="tools">
              <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" x-tooltip="'💡Permanently delete this tool'">
                Delete
              </button>
            </form>
          </div>
          {% endif %}
        </div>
      </td>
    </tr>
    {% endfor %}
  </tbody>
  {% endif %}
</div>
