<.header>
  Messages
  <:actions>
    <.link patch={~p"/messages/new"}>
      <.button>New Message</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="messages"
  rows={@streams.messages}
  row_click={fn {_id, message} -> JS.navigate(~p"/messages/#{message}") end}
>
  <:col :let={{_id, message}} label="Subject">
    <%= message.subject %>
  </:col>
  <:col :let={{_id, message}} label="Created">
    <%= format_date(message.inserted_at) %>
  </:col>
  <:action :let={{id, message}}>
    <.link
      phx-click={JS.push("delete", value: %{id: message.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      Delete
    </.link>
  </:action>
</.table>

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