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

<.header>
  All available servers to you
  <:actions>
    <.link patch={~p"/servers/new"}>
      <.button>Connect a Server</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="servers"
  rows={@streams.servers}
  row_click={fn {_id, server} -> JS.navigate(~p"/servers/#{server}") end}
  row_indicator={
    fn
      {_id, %Servers.Server{status: :unregistered}} ->
        ~H(<span class="text-grey-600">Awaiting registration</span>)

      {_id, %Servers.Server{connection_status: nil, status: :registered}} ->
        ~H(<span class="text-yellow-600">Connecting...</span>)

      {_id, %Servers.Server{connection_status: "Connected"}} ->
        ~H(<span class="text-green-600">Connected</span>)

      {_id, %Servers.Server{connection_status: "Disconnected"}} ->
        ~H(<span class="text-red-600">Disconnected</span>)
    end
  }
  indicator_label="Status"
>
  <:col :let={{_id, server}} label="Name"><%= server.name %></:col>
  <:col :let={{_id, server}} label="IP"><%= server.public_ip || "N/A" %></:col>
  <:action :let={{id, server}}>
    <.link
      phx-click={JS.push("delete", value: %{id: server.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

<.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>