<%!-- Optional heading --%>
{@title}
<%!-- Thumbnail grid via the canonical <.draggable_list> primitive. Grid layout (cols configurable), aspect-square thumbnails, featured badge on the first item (opt-in), hover-revealed remove + preview buttons. Add-tile sits as the trailing grid cell so the picker is visually part of the gallery. --%> <.draggable_list id={"#{@id}-grid"} items={@selected} item_id={& &1} on_reorder="reorder_images" target={"##{@id}"} cols={@cols} draggable={not @readonly and length(@selected) > 1} > <:item :let={uuid}>
<%!-- `image_set`'s class attr is a plain string (not a class list), so the rotation transform is interpolated; a nil (unrotated) reads as "". --%> <.image_set file_uuid={uuid} variants={Map.get(@variants_map, uuid, [])} alt="" class={"w-full h-full object-cover rounded-lg border-2 border-base-300 #{rotation_class(%{rotation: Map.get(@rotations_map, uuid)})}"} loading="eager" /> <%!-- Featured badge: only the first item in @selected, only when the consumer opted in via featured_first={true}. --%>
{gettext("Featured")}
<%!-- Remove button (hover-revealed, top-right) — hidden in readonly. --%> <%!-- Eye / preview button (hover-revealed, bottom-right). Available in readonly mode too — lightbox is a view-only feature. --%>
<%!-- Add tile is omitted entirely (the slot itself is conditional) once the selection reaches its limit, so draggable_list renders no trailing cell at all — not even an empty wrapper. --%> <:add_button :if={not @readonly and not selection_at_limit?(@selected, @mode, @max_count)}> <%!-- Media selector modal (embedded, self-contained). Only mounted once the user clicks the Add tile — this avoids rendering a live_component node in static/test contexts where `show_picker` is false and no LiveView process exists. --%> <.live_component :if={not @readonly and @show_picker} module={MediaSelectorModal} id={"#{@id}-media-selector"} show={true} mode={@mode} selected_uuids={@selected} max_select={@max_count} file_type_filter={:image} scope_folder_id={@scope_folder_id} phoenix_kit_current_user={@phoenix_kit_current_user} notify={{__MODULE__, @id}} />
<%!-- Lightbox — delegated to MediaViewer, inside the single root so morphdom patches it reliably --%> <.live_component :if={@preview_uuid} module={PhoenixKitWeb.Components.MediaViewer} id={"#{@id}-viewer"} files={@selected} current={@preview_uuid} current_user={@phoenix_kit_current_user} notify={{__MODULE__, @id}} />