<.header>
  Listing Images
  <:actions>
    <.link patch={~p"/images/new"}>
      <.button>New Image</.button>
    </.link>
  </:actions>
</.header>

<%!-- <.table --%>
<%!--   id="images" --%>
<%!--   rows={@streams.images} --%>
<%!--   row_click={fn {_id, image} -> JS.navigate(~p"/images/#{image.file}") end} --%>
<%!-- > --%>
<%!--   <:col :let={{_id, image}} label="File"><%= image.file %></:col> --%>
<%!--   <:action :let={{_id, image}}> --%>
<%!--     <div class="sr-only"> --%>
<%!--       <.link navigate={~p"/images/#{image.file}"}>Show</.link> --%>
<%!--     </div> --%>
<%!--     <.link patch={~p"/images/#{image}/edit"}>Edit</.link> --%>
<%!--   </:action> --%>
<%!--   <:action :let={{id, image}}> --%>
<%!--     <.link --%>
<%!--       phx-click={JS.push("delete", value: %{id: image.id}) |> hide("##{id}")} --%>
<%!--       data-confirm="Are you sure?" --%>
<%!--     > --%>
<%!--       Delete --%>
<%!--     </.link> --%>
<%!--   </:action> --%>
<%!-- </.table> --%>

<div class="grid grid-cols-3 gap-4">
  <img
    :for={{dom_id, image} <- @streams.images}
    src={"https://s3.zoeys.computer/imgs/uploads/#{image.file}.png"}
    phx-click={JS.navigate(~p"/images/#{image.file}")}
    class="cursor-pointer hover:shadow-lg transition duration-300 hover:scale-105 rounded-lg ease-out border-2 border-ctp-base hover:border-ctp-mauve"
    id={dom_id}
  />
</div>

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