<!-- htmlhint doctype-first:false -->
<div class="overflow-x-auto" id="tool-ops-table-container">
    <table class="min-w-full divide-y divide-gray-200 text-sm" id="toolTable">
        <thead class="bg-gray-50">
            <tr>
                <th class="px-4 py-3"></th>
                <th class="px-4 py-3 text-left font-medium text-gray-600">Name</th>
                <th class="px-4 py-3 text-left font-medium text-gray-600">Type</th>
                <th class="px-4 py-3 text-left font-medium text-gray-600">Status</th>
                <th class="px-4 py-3 text-left font-medium text-gray-600">Action</th>
            </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-200" id="toolBody">
            {% for tool in tools %}
                {% set can_modify = is_admin or tool.owner_email == current_user_email or (tool.visibility == 'team' and tool.team_id and user_team_roles.get(tool.team_id|string) == 'owner') %}
                <tr data-name="{{ tool.name.lower() }}" data-status="{{ 'enabled' if tool.enabled else 'disabled' }}" data-owner-email="{{ tool.owner_email or '' }}" data-team-id="{{ tool.team_id or '' }}" data-visibility="{{ tool.visibility or '' }}">
                    <td class="px-4 py-3">
                        <input type="checkbox" class="tool-checkbox h-4 w-4 text-indigo-600 border-gray-300 rounded"
                            data-tool="{{ tool.name }}###{{ tool.id }}">
                    </td>
                    <td class="px-4 py-3">{{ tool.name }}</td>
                    <td class="px-4 py-3">{{ tool.integration_type if tool.integration_type else "-" }}</td>
                    <td class="px-2 py-4 whitespace-nowrap text-sm w-12">
                        {% if tool.enabled and tool.reachable %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">
                            Online
                        </span>
                        {% elif tool.enabled %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">
                            Offline
                        </span>
                        {% else %}
                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">
                            Inactive
                        </span>
                        {% endif %}
                    </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">
                            {% if can_modify %}
                            <button onclick="enrichTool('{{ tool.id }}')"
                                    class="col-span-2 px-2 py-1 text-xs font-medium rounded-md text-teal-600 hover:bg-teal-50">
                                Enrich
                            </button>
                            <button onclick="generateToolTestCases('{{ tool.id }}')"
                                    class="col-span-2 px-2 py-1 text-[11px] font-small rounded-md text-purple-600 hover:bg-purple-50">
                                Generate Test Cases
                            </button>
                            <button onclick="validateTool('{{ tool.id }}')"
                                    class="col-span-2 px-2 py-1 text-xs font-medium rounded-md text-yellow-600 hover:bg-yellow-50">
                                Validate
                            </button>
                            {% endif %}
                            <button onclick="viewTool('{{ tool.id }}')"
                                    class="px-2 py-1 text-xs font-medium rounded-md text-indigo-600 hover:bg-indigo-50">
                                View
                            </button>
                            {% if can_modify %}
                            <button onclick="editTool('{{ tool.id }}')"
                                    class="px-2 py-1 text-xs font-medium rounded-md text-green-600 hover:bg-green-50">
                                Edit
                            </button>
                            {% endif %}
                        </div>
                    </td>
                </tr>
            {% else %}
            <tr>
                <td colspan="5" class="text-center py-4 text-gray-500">No tools found.</td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
