slurpee

<h2 class="text-3xl">New Head Subscriptions</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-3/12 px-4 py-2 text-left">Blockchain ID</th>
      <th scope="col" class="w-1/12 px-4 py-2 text-left">Enabled</th>
      <th scope="col" class="w-8/12 px-4 py-2 text-left">Handler</th>
    </tr>
  </thead>
  <tbody>
    <%= if Enum.any?(@new_head_subscriptions) do %>
      <%= for s <- @new_head_subscriptions do %>
        <tr class="hover:bg-gray-50 border-t border-b group">
          <td scope="row" class="px-4 py-3"><%= s.blockchain_id %></td>
          <td class="px-4 py-3 <%= !s.enabled && "text-gray-400"%>"><%= s.enabled %></td>
          <td class="px-4 py-3 <%= !s.enabled && "text-gray-400"%>"><%= s.handler |> inspect %></td>
        </tr>
      <% end %>
    <% else %>
      <tr class="hover:bg-gray-50 border-t border-b group">
        <td colspan="7" class="px-4 py-3">
          <%= if @query == nil do %>
            no new head subscriptions configured
          <% else %>
            no search results
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>