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>
      <span class="self-center text-sm">
        <.server_status status={server.status} health={@healths[server.public_ip]} />
      </span>
    </div>
    <div class="lg:text-sm">
      <span>IP: <%= server.public_ip || "N/A" %></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>