#set($view = "$searcher.searchType/${searcher.searchType}autocomplete")

#set($cols = $testbench.getDetailsForView($view))
#if(!$cols)


#if(!$cols || !$cols.size())
  #set($cols = [$searcher.getDetail("name")])
#end


#end

$listresults.setHitsPerPage(20)


<table class="table table-hover table-sm align-middle">
  <thead>
    <tr>
      #foreach($col in $cols)
        <th>$col.getText($context)</th>
      #end
    </tr>
  </thead>
  <tbody>
  
    #foreach($type in $listresults.getPageOfHits())
    
    #if($detail.render)
  #set($label = $searcherManager.getValue($catalogid, $detail.render, $type.properties))
#else
  #set($label = $type.getName($context.getLanguage()))
#end
    
      <tr class="autocomplete-row #if($value == $type.id) active #end" style="cursor: pointer;" 
    data-value="$type.id"
    data-label="#esc($label)">
        #foreach($col in $cols)
          <td>
            $context.putPageValue("data", $type)
            $context.putPageValue("detail", $col)
            $context.putPageValue("value", $type.get($col.id))
            $context.putPageValue("val", $type.get($col.id))            
            $pages.include("$apphome/components/xml/detailreadonly.html", $context) 
          </td>
        #end
      </tr>
    #end
  </tbody>
</table>


<style>
.autocomplete-row {
  cursor: pointer;
  transition: background-color 0.2s;
}

.autocomplete-row:hover {
  background-color: #f8f9fa;
}

.autocomplete-row.active {
  background-color: #dbeafe !important; /* light blue */
  font-weight: 600;
  outline: 2px solid #60a5fa; /* blue-400 */
}

.autocomplete-row td {
  background-color: transparent !important; /* override if table rows have bg */
}
</style>