<%!-- Header with Actions --%>

Select Media

<%= if @selection_mode == :single do %> Click on an image to select it <% else %> Select one or more images <% end %> <%= if MapSet.size(@selected_uuids) > 0 do %> {MapSet.size(@selected_uuids)} selected <% end %>

<%!-- Upload Section --%>

<.icon name="hero-arrow-up-tray" class="w-5 h-5" /> Upload New Files

<.form for={%{}} phx-change="validate" phx-submit="save"> <.live_file_input upload={@uploads.media_files} class="hidden" id="file-upload-input" /> <%!-- Upload Progress --%> <%= for entry <- @uploads.media_files.entries do %>
{entry.client_name} {entry.progress}%
<% end %>
<%!-- Search and Filter Section --%>
<%!-- Search --%>
<.form for={%{}} phx-submit="search" class="w-full">
<%!-- Filter by Type --%>
<%!-- Media Grid --%>
<%= if Enum.empty?(@uploaded_files) do %>
<.icon name="hero-photo" class="w-16 h-16 mx-auto mb-4 text-base-content/30" />

No media files found

Upload files using the area above or adjust your search filters

<% else %>
<%= for file <- @uploaded_files do %> <% is_selected = MapSet.member?(@selected_uuids, file.file_uuid) %>
<%!-- Thumbnail --%>
<.thumbnail_url :let={url} file={file}> <%= if url do %> {file.filename} <% else %>
<.icon name="hero-document" class="w-16 h-16 text-base-content/30" />
<% end %> <%!-- Selection Indicator --%> <%= if is_selected do %>
<.icon name="hero-check" class="w-5 h-5" />
<% else %>
<% end %> <%!-- File Type Badge --%>
{file.file_type}
<%!-- File Info --%>

{file.filename}

{format_file_size(file.size)} <%= if file.width && file.height do %> {file.width}×{file.height} <% end %>
<% end %>
<% end %>
<%!-- Pagination --%> <%= if @total_pages > 1 do %>
<%= if @current_page > 1 do %> <.link navigate={ "#{@current_path}?page=#{@current_page - 1}&return_to=#{URI.encode_www_form(@return_to)}&mode=#{@selection_mode}&filter=#{@file_type_filter}" } class="join-item btn" > « <% else %> <% end %> <%= for page <- pagination_range(@current_page, @total_pages) do %> <%= if page == :ellipsis do %> <% else %> <.link navigate={ "#{@current_path}?page=#{page}&return_to=#{URI.encode_www_form(@return_to)}&mode=#{@selection_mode}&filter=#{@file_type_filter}" } class={"join-item btn #{if page == @current_page, do: "btn-active"}"} > {page} <% end %> <% end %> <%= if @current_page < @total_pages do %> <.link navigate={ "#{@current_path}?page=#{@current_page + 1}&return_to=#{URI.encode_www_form(@return_to)}&mode=#{@selection_mode}&filter=#{@file_type_filter}" } class="join-item btn" > » <% else %> <% end %>
<% end %>