INPUT:
<input data-controller="hot-search" type='text' data-action='input->hot-search#debouncedSearch'/>

<hr/>
<%= pagy_search_field(@q, :name_cont, class: "text-sm w-full h-8 text-gray-800 dark:text-gray-400 bg-gray-200 dark:bg-gray-700") %>

<%= search_form_for @q do |f| %>

  <%= f.label :name_cont %>
  <%= f.search_field :name_cont %>

  <%= f.submit %>
<% end %>
<%=turbo_frame_tag :scores do %>
  <table class="min-w-full divide-gray-300 dark:divide-gray-500 divide-y-4 border-gray-200 dark:border-gray-600 border-2 dark:bg-gray-600">
    <thead>
      <tr class="whitespace-nowrap text-md text-left font-semibold text-gray-800 dark:text-gray-200 bg-gray-100 dark:bg-gray-700">
        <th scope="col" class="p-2">
          <%= pagy_sort_link(@q, :name) %>
        </th>
        <th scope="col" class="p-2">
          <%= pagy_sort_link(@q, :grade) %>
        </th>
        <th scope="col" class="p-2">
          <%= pagy_sort_link(@q, :created_at) %>
        </th>
        <th scope="col" class="p-2 m-5 flex justify-end">
          Actions
        </th>
      </tr>
      <tr class="text-gray-800 bg-gray-100 dark:bg-gray-600 dark:text-gray-200">
        <th class='p-1'>
          <%= pagy_search_field(@q, :name_cont, class: "text-sm w-full h-8 text-gray-800 dark:text-gray-400 bg-gray-200 dark:bg-gray-700") %>
          <input data-controller="hot-search" type='text' data-action='keypress->hot-search#debouncedSearch'/>
        </th>
        <th class='p-1'>
        </th>
        <th class='p-1'>
        </th>
        <th class='p-1'>
        </th>
      </tr>
    </thead>
    <tbody class="bg-gray-100 dark:bg-gray-700 divide-y divide-gray-200 dark:divide-gray-500 ">
      <%= render @scores %>
    </tbody>
  </table>
  <div class="flex flex-col items-center justify-center text-sm text-gray-500 my-5 gap-2">
    <%== pagy_nav @pagy %>
    <%== pagy_info @pagy %>
  </div>
<%end%>