<.header>
  Contacts
  <:actions>
    <.link patch={~p"/contacts/new"}>
      <.button>New Contact</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="contacts"
  rows={@streams.contacts}
  row_click={fn {_id, contact} -> JS.navigate(~p"/contacts/#{contact}") end}
>
  <:col :let={{_id, contact}} label="Name"><%= contact.name %></:col>
  <:col :let={{_id, contact}} label="Email"><%= contact.email %></:col>
  <:col :let={{_id, contact}} label="Subscribed"><%= contact.subscribed %></:col>
  <:action :let={{id, contact}}>
    <.link
      phx-click={JS.push("delete", value: %{id: contact.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

<.modal :if={@live_action in [:new]} id="contact-modal" show on_cancel={JS.patch(~p"/contacts")}>
  <.live_component
    module={SendItWeb.ContactLive.FormComponent}
    id={:new}
    title={@page_title}
    action={@live_action}
    contact={@contact}
    patch={~p"/contacts"}
  />
</.modal>