<.header>
  Listing Items
  <:actions>
    <.link patch={~p"/items/new"}>
      <.button>New Item</.button>
    </.link>
  </:actions>
</.header>

<.table
  id="items"
  rows={@streams.items}
  row_click={fn {_id, item} -> JS.navigate(~p"/items/#{item}/show/edit") end}
>
  <:col :let={{_id, item}} label="Title"><%= item.title %></:col>
  <:col :let={{_id, item}} label="Description"><%= item.description %></:col>
  <:col :let={{_id, item}} label="Desire"><%= item.desire %></:col>
  <:action :let={{id, item}}>
    <.link
      phx-click={JS.push("delete", value: %{id: item.id}) |> hide("##{id}")}
      data-confirm="Are you sure?"
    >
      <.icon name="hero-trash" />
    </.link>
  </:action>
</.table>

<.modal :if={@live_action in [:new, :edit]} id="item-modal" show on_cancel={JS.patch(~p"/items")}>
  <.live_component
    module={WishWeb.ItemLive.FormComponent}
    id={@item.id || :new}
    title={@page_title}
    action={@live_action}
    item={@item}
    patch={~p"/items"}
  />
</.modal>