rube

<h2 class="text-3xl">Tokens (<%= length(@tokens) %>)</h2>

<div class="flex items-center mt-4">
  <form phx-change="search" phx-submit="search">
    <input type="text" name="query" value="<%= @query %>" placeholder="Search" autocomplete="off"/>
  </form>
</div>

<table class="w-full mt-8">
  <thead class="bg-gray-200 border-t-2 border-gray-400">
    <tr>
      <th scope="col" class="w-2/12 px-4 py-3 text-left">Blockchain ID</th>
      <th scope="col" class="w-2/12 px-4 py-3 text-left">Symbol</th>
      <th scope="col" class="w-6/12 px-4 py-3 text-left">Address</th>
      <th scope="col" class="w-2/12 px-4 py-3 text-left">Precision</th>
    </tr>
  </thead>
  <tbody>
    <%= if Enum.any?(@tokens) do %>
      <%= for t <- @tokens do %>
        <%# <tr class="<%= if t == @latest_token, do: "fade-out-bg", else: "" %1>"> %>
        <tr class="hover:bg-gray-50 border-t border-b group">
          <td scope="row" class="px-4 py-3"><%= t.blockchain_id %></td>
          <td class="px-4 py-3"><%= t.symbol %></td>
          <td class="px-4 py-3"><%= t.address %></td>
          <td class="px-4 py-3"><%= t.precision %></td>
        </tr>
      <% end %>
    <% else %>
      <tr class="hover:bg-gray-50 border-t border-b group">
        <td colspan="4" class="px-4 py-3">
          <%= if @query == nil do %>
            no tokens have been received yet
          <% else %>
            no search results
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>