dotfiles/app/lib/prymn_web/live/server_live/index.html.heex

<.header>
  Your servers
  <small class="block">
    <%= "#{Enum.count(@servers)} servers" %>
  </small>
  <:actions>
    <.button type="link" patch={~p"/servers/new"}>Connect a Server</.button>
  </:actions>
</.header>

<div class="space-y-5" phx-update="replace" id="servers">
  <.link
    :for={server <- @servers}
    navigate={~p"/servers/#{server}"}
    class="group block rounded-lg bg-gray-100 p-5 shadow-sm shadow-gray-300 hover:bg-black hover:text-white"
  >
    <div class="flex flex-row flex-wrap justify-between">
      <h2 class="text-xl"><%= server.name %></h2>
      <.server_status status={server.status} health={@healths[server.public_ip]} />
    </div>
    <div class="flex flex-row flex-wrap justify-between lg:text-sm">
      <span>IP: <%= server.public_ip || "N/A" %></span>
      <span
        :if={@healths[server.public_ip] && Enum.count(@healths[server.public_ip].tasks)}
        class="text-right text-xs text-slate-700"
      >
        <%= for {name, task} <- Enum.take(@healths[server.public_ip].tasks, 1) do %>
          <div>In progress: <%= name %></div>
          <div><%= task.progress %></div>
        <% end %>
      </span>
    </div>
  </.link>
</div>

<.modal :if={@live_action == :new} id="server-modal" show on_cancel={JS.patch(~p"/servers")}>
  <.live_component module={PrymnWeb.ServerLive.NewServer} id={:new} patch={~p"/servers"} />
</.modal>