<.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}
>
  <:col :let={{_id, server}} label="Name"><%= server.name %></:col>
  <:col :let={{_id, server}} label="IPv4"><%= server.ipv4 || "N/A" %></:col>
  <:col :let={{_id, server}} label="IPv6"><%= server.ipv6 || "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 in [:new, :edit]}
  id="server-modal"
  show
  on_cancel={JS.patch(~p"/servers")}
>
  <.header>
    Add a new server
    <:subtitle>Connect your server to Prymn!</:subtitle>
  </.header>
  <.live_component
    module={PrymnWeb.ServerLive.FormComponent}
    id={:new}
    title={@page_title}
    action={@live_action}
    server={@server}
    patch={~p"/servers"}
  />
</.modal>