<h2 class="text-3xl">Blockchains</h2>

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

  <div>
    <%= content_tag(
      :button,
      "start all",
      class: "bg-green-400 hover:bg-green-500 text-white disabled:opacity-25 font-bold group-hover:visible py-2 px-4 rounded",
      disabled: all_running?(@blockchains),
      "phx-click": "start-all"
    ) %>
    <%= content_tag(
      :button,
      "stop all",
      class: "bg-red-600 hover:bg-red-700 text-white disabled:opacity-25 font-bold group-hover:visible py-2 px-4 rounded",
      disabled: none_running?(@blockchains),
      "phx-click": "stop-all"
    ) %>
  </div>
</div>

<table class="w-full mt-8">
  <thead class="bg-gray-200 border-t-2 border-gray-400">
    <tr>
      <th scope="col" class="w-4/36 px-4 py-3 text-left">ID</th>
      <th scope="col" class="w-6/36 px-4 py-3 text-left">Name</th>
      <th scope="col" class="w-2/36 px-4 py-3 text-left">Status</th>
      <th scope="col" class="w-3/36 px-4 py-3 text-left">Network ID</th>
      <th scope="col" class="w-2/36 px-4 py-3 text-left">Chain ID</th>
      <th scope="col" class="w-2/36 px-4 py-3 text-left">Chain</th>
      <th scope="col" class="w-2/36 px-4 py-3 text-left">Testnet</th>
      <th scope="col" class="w-7/36 px-4 py-3 text-left">RPC</th>
      <th scope="col" class="w-2/36 px-4 py-3 text-left">Explorer</th>
      <th scope="col" class="w-3/36 px-4 py-3 text-left">Latest Block</th>
      <th scope="col" class="w-3/36 px-4 py-3 text-right">Actions</th>
    </tr>
  </thead>
  <tbody>
    <%= if Enum.any?(@blockchains) do %>
      <%= for b <- @blockchains do %>
        <tr class="hover:bg-gray-50 border-t border-b group">
          <td scope="row" class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.id %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.name %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.status %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.network_id %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.chain_id %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.chain %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.testnet %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>"><%= b.rpc %></td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>">
            <%= explorer_url(b.explorer) %>
          </td>
          <td class="px-4 py-3 <%= !running?(b) && "text-gray-400"%>">-</td>
          <td class="px-4 py-3 text-right">
            <%= content_tag(
              :button,
              "start",
              class: "text-green-500 disabled:opacity-25 font-bold invisible group-hover:visible",
              disabled: b.status == :running,
              "phx-click": "start",
              "phx-value-id": b.id
            ) %>

            <%= content_tag(
              :button,
              "stop",
              class: "text-red-500 disabled:opacity-25 font-bold invisible group-hover:visible ml-4",
              disabled: b.status != :running,
              "phx-click": "stop",
              "phx-value-id": b.id
            ) %>
          </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 blockchains configured
          <% else %>
            no search results
          <% end %>
        </td>
      </tr>
    <% end %>
  </tbody>
</table>
