<.live_component config={@config} module={ExqUIWeb.StatsComponent} id="stats" />
<h5 class="mt-2 text-muted">Nodes</h5>
<table class="mt-2 table table-bordered">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Started</th>
      <th scope="col">Busy</th>
    </tr>
  </thead>
  <tbody>
    <%= for node <- @nodes do %>
      <tr>
        <td>
          <div class="d-flex align-items-center">
            <span class="me-2">{node.identity}</span>
            <%= form_for :signal, "#", [id: "node-#{node.identity}", phx_auto_recover: :ignore, phx_change: :signal, class: "mb-0 form-check form-switch form-check-inline"], fn f -> %>
              {hidden_input(f, :name, value: "TSTP")}
              {hidden_input(f, :node_id, value: node.identity)}
              {checkbox(f, :quiet,
                value: !node.quiet,
                disabled: node.quiet,
                class: "form-check-input",
                role: "switch",
                title: "quiet"
              )}
            <% end %>
          </div>
          <span><b>Queues: </b>{Enum.join(node.queues, ", ")}</span>
        </td>
        <td>{human_time(node.started_at)}</td>
        <td>{node.busy}</td>
      </tr>
    <% end %>
  </tbody>
</table>
<h5 class="text-muted">Jobs</h5>
<.live_component
  config={@config}
  module={ExqUIWeb.TableComponent}
  id="busy-table"
  actions={@actions}
  columns={@columns}
  items={@items}
  total={@total}
  current_page={@current_page}
  page_size={@page_size}
/>
