<%!-- MediaBrowser LiveComponent template.
     All phx-* events route to the component via phx-target={@myself} on the root div. --%>
<div id={@id} phx-target={@myself}>
  <script>
    (function() {
      var m = localStorage.getItem("phoenix_kit_media_view_mode");
      if (m) document.documentElement.dataset.mediaView = m;
    })();
  </script>
  <style>
    [data-media-view="list"] [data-media-grid] { display: none !important; }
    [data-media-view="grid"] [data-media-list] { display: none !important; }
    @keyframes rename-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.5; }
    }
    .renaming-preview {
      animation: rename-pulse 1.5s ease-in-out infinite;
      color: oklch(var(--p));
      font-style: italic;
    }
  </style>

  <%!-- Scope-invalid guard: scope folder was deleted --%>
  <%= if @scope_invalid do %>
    <div role="alert" class="alert alert-warning mb-4">
      <.icon name="hero-exclamation-triangle" class="w-5 h-5 shrink-0" />
      <span>
        The configured scope folder no longer exists. The media browser is disabled until the scope is reconfigured.
      </span>
    </div>
  <% else %>
    <%!-- Upload Section --%>
    <%= if @show_upload do %>
      <div class="card bg-base-100 shadow-xl mb-6">
        <div class="card-body">
          <div class="flex items-center gap-3 mb-4">
            <h2 class="card-title text-xl">Upload Media</h2>
            <button
              phx-click="toggle_upload"
              phx-target={@myself}
              class="btn btn-sm btn-error gap-2"
            >
              <.icon name="hero-x-mark" class="w-4 h-4" /> Cancel
            </button>
          </div>
          <%= if @has_buckets do %>
            <.file_upload
              upload={@uploads.media_files}
              label="Upload Media Files"
              icon="hero-cloud-arrow-up"
              accept_description="All file types supported"
              max_size_description={"#{@max_upload_size_mb}MB per file"}
            />
          <% else %>
            <div class="alert alert-warning">
              <.icon name="hero-exclamation-triangle" class="w-6 h-6" />
              <div>
                <h3 class="font-bold">No Storage Buckets Configured</h3>
                <div class="text-sm mt-1">
                  <.link
                    navigate={PhoenixKit.Utils.Routes.path("/admin/settings/media")}
                    class="link link-primary font-semibold"
                  >
                    Configure Storage Buckets
                  </.link>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>

    <%!-- Main Layout: Sidebar + Content --%>
    <div class="flex gap-0">
      <%!-- Folder Sidebar --%>
      <div
        class="hidden lg:block shrink-0"
        style={if !@sidebar_collapsed, do: "width: 240px; max-width: 240px;"}
      >
        <%= if @sidebar_collapsed do %>
          <%!-- Collapsed strip --%>
          <div class="sticky top-4 w-10">
            <button
              phx-click="toggle_sidebar"
              phx-target={@myself}
              class="btn btn-ghost btn-sm w-full"
              title="Show folders"
            >
              <.icon name="hero-chevron-right" class="w-4 h-4" />
            </button>
          </div>
        <% else %>
          <%!-- Expanded sidebar --%>
          <div
            class="sticky top-4 border-r border-base-200 pr-3 mr-3 overflow-hidden"
            style="width: 240px; max-width: 240px;"
          >
            <div class="flex items-center justify-between mb-3">
              <h3 class="font-semibold text-sm text-base-content/70 uppercase tracking-wider">
                Folders
              </h3>
              <div class="flex gap-0.5">
                <button
                  phx-click="toggle_new_folder"
                  phx-target={@myself}
                  class="btn btn-ghost btn-xs"
                  title="New folder"
                >
                  <.icon name="hero-folder-plus" class="w-4 h-4" />
                </button>
                <button
                  phx-click="toggle_sidebar"
                  phx-target={@myself}
                  class="btn btn-ghost btn-xs"
                  title="Collapse sidebar"
                >
                  <.icon name="hero-chevron-left" class="w-4 h-4" />
                </button>
              </div>
            </div>

            <%!-- All Files flat view --%>
            <button
              phx-click="navigate_view_all"
              phx-target={@myself}
              class={[
                "flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-sm transition-colors mb-1 text-left",
                if(@file_view == "all",
                  do: "bg-primary/10 font-semibold text-primary",
                  else: "hover:bg-base-200"
                )
              ]}
            >
              <.icon name="hero-rectangle-stack" class="w-4 h-4 shrink-0" /> All Files
            </button>

            <%!-- Root (navigate to real root folder) --%>
            <button
              phx-click="navigate_root"
              phx-target={@myself}
              data-drop-folder="root"
              class={[
                "flex items-center gap-2 w-full px-2 py-1.5 rounded-lg text-sm transition-colors mb-1 text-left",
                if(@current_folder == nil and @file_view != "all",
                  do: "bg-primary/10 font-semibold text-primary",
                  else: "hover:bg-base-200"
                )
              ]}
            >
              <.icon name="hero-inbox" class="w-4 h-4 shrink-0" /> Root
            </button>

            <div class="divider my-1 h-0"></div>

            <%!-- Folder Tree --%>
            <ul class="space-y-0.5 w-full overflow-hidden">
              <%= for node <- @folder_tree do %>
                <.folder_tree_node
                  node={node}
                  current_folder={@current_folder}
                  expanded_folders={@expanded_folders}
                  renaming_folder={@renaming_folder}
                  renaming_source={@renaming_source}
                  renaming_text={@renaming_text}
                  show_new_folder={@show_new_folder}
                  depth={0}
                  myself={@myself}
                />
              <% end %>
              <%= if @show_new_folder && @current_folder == nil do %>
                <li>
                  <form
                    phx-submit="create_folder"
                    phx-target={@myself}
                    class="flex items-center gap-1 px-1 py-1"
                  >
                    <span class="text-warning">
                      <.icon name="hero-folder-plus" class="w-4 h-4" />
                    </span>
                    <input
                      type="text"
                      name="name"
                      placeholder="Folder name"
                      class="input input-bordered input-xs flex-1 min-w-0"
                      phx-mounted={JS.focus()}
                      required
                      phx-keydown="toggle_new_folder"
                      phx-target={@myself}
                      phx-key="Escape"
                    />
                  </form>
                </li>
              <% end %>
            </ul>

            <%!-- Trash --%>
            <div class="divider my-1 h-0"></div>
            <button
              phx-click="toggle_trash_filter"
              phx-target={@myself}
              class={[
                "flex items-center gap-2 px-2 py-1.5 rounded-lg text-sm transition-colors w-full",
                if(@filter_trash,
                  do: "bg-error/10 font-semibold text-error",
                  else: "hover:bg-base-200 text-base-content/60"
                )
              ]}
            >
              <.icon name="hero-trash" class="w-4 h-4 shrink-0" /> Trash
              <%= if @trash_count > 0 do %>
                <span class="badge badge-sm badge-error ml-auto">{@trash_count}</span>
              <% end %>
            </button>
          </div>
        <% end %>
      </div>

      <%!-- Main content area --%>
      <div class="flex-1 min-w-0">
        <%!-- Hidden upload input for folder drag-drop (always in DOM when in a folder) --%>
        <%= if @current_folder && @has_buckets && !@show_upload do %>
          <form
            phx-change="validate"
            phx-target={@myself}
            id="folder-drop-upload-form"
            class="hidden"
          >
            <.live_file_input upload={@uploads.media_files} />
          </form>
        <% end %>

        <div class="card bg-base-100 shadow-xl">
          <div
            class="card-body"
            id={if @current_folder, do: "folder-drop-upload"}
            phx-hook={if @current_folder, do: "FolderDropUpload"}
            phx-target={if @current_folder, do: @myself}
          >
            <%!-- Inline upload progress for drag-drop (no modal) --%>
            <%= if @current_folder && !@show_upload && length(@uploads.media_files.entries) > 0 do %>
              <div class="space-y-2 mb-4">
                <%= for entry <- @uploads.media_files.entries do %>
                  <div class="flex items-center gap-3 p-3 border border-base-300 rounded-lg bg-base-100">
                    <div class="flex-1">
                      <p class="font-medium text-sm truncate">{entry.client_name}</p>
                      <div class="flex gap-2 items-center mt-1">
                        <progress
                          value={entry.progress}
                          max="100"
                          class="progress progress-primary progress-sm flex-1"
                        >
                          {entry.progress}%
                        </progress>
                        <span class="text-xs text-base-content/60 min-w-max">
                          {entry.progress}%
                        </span>
                      </div>
                    </div>
                  </div>
                <% end %>
              </div>
            <% end %>

            <%!-- Breadcrumbs --%>
            <%= if @current_folder do %>
              <nav class="breadcrumbs text-sm mb-2">
                <ul>
                  <li>
                    <button
                      phx-click="navigate_root"
                      phx-target={@myself}
                      class="hover:underline text-primary"
                    >
                      All Media
                    </button>
                  </li>
                  <%= for folder <- @breadcrumbs do %>
                    <li>
                      <button
                        phx-click="navigate_folder"
                        phx-target={@myself}
                        phx-value-folder-uuid={folder.uuid}
                        class="hover:underline text-primary"
                      >
                        {folder.name}
                      </button>
                    </li>
                  <% end %>
                  <li>
                    {if @current_folder, do: @current_folder.name}
                  </li>
                </ul>
              </nav>
            <% end %>

            <%!-- Search Bar --%>
            <form phx-change="search" phx-target={@myself} phx-submit="search" class="mb-4">
              <label class="input input-bordered input-sm w-full flex items-center gap-2">
                <.icon name="hero-magnifying-glass" class="w-4 h-4 text-base-content/40" />
                <input
                  type="text"
                  name="q"
                  value={@search_query}
                  placeholder="Search files..."
                  class="grow bg-transparent border-none outline-none focus:outline-none"
                  phx-debounce="300"
                  autocomplete="off"
                />
                <%= if @search_query != "" do %>
                  <button
                    type="button"
                    phx-click="clear_search"
                    phx-target={@myself}
                    class="btn btn-ghost btn-xs btn-circle"
                  >
                    <.icon name="hero-x-mark" class="w-4 h-4" />
                  </button>
                <% end %>
              </label>
            </form>

            <%!-- Header --%>
            <div class="flex justify-between items-center mb-4">
              <%= if @select_mode do %>
                <%!-- Selection Mode Header --%>
                <div class="flex items-center gap-2 flex-wrap">
                  <button
                    phx-click="toggle_select_mode"
                    phx-target={@myself}
                    class="btn btn-sm btn-error gap-2"
                  >
                    <.icon name="hero-x-mark" class="w-4 h-4" /> Cancel
                  </button>
                  <span class="text-sm font-semibold">
                    {MapSet.size(@selected_files) + MapSet.size(@selected_folders)} selected
                  </span>
                  <button
                    phx-click="show_move_modal"
                    phx-target={@myself}
                    class="btn btn-sm btn-primary gap-1"
                  >
                    <.icon name="hero-folder-arrow-down" class="w-4 h-4" /> Move
                  </button>
                  <%= if MapSet.size(@selected_folders) > 0 do %>
                    <button
                      phx-click="delete_selected"
                      phx-target={@myself}
                      data-confirm={"Delete #{MapSet.size(@selected_folders)} folder(s)? Files will be moved to parent."}
                      class="btn btn-sm btn-error gap-1"
                    >
                      <.icon name="hero-trash" class="w-4 h-4" /> Delete folders
                    </button>
                  <% end %>
                  <button phx-click="select_all" phx-target={@myself} class="btn btn-sm btn-ghost">
                    Select all
                  </button>
                  <button
                    phx-click="deselect_all"
                    phx-target={@myself}
                    class="btn btn-sm btn-ghost"
                  >
                    Clear
                  </button>
                </div>
              <% else %>
                <%!-- Normal Header --%>
                <div class="flex items-center gap-3 flex-wrap">
                  <h2 class="card-title text-xl">
                    <%= cond do %>
                      <% @filter_trash -> %>
                        Trash ({@total_count})
                      <% @filter_orphaned -> %>
                        Orphaned Files ({@total_count})
                      <% @file_view == "all" -> %>
                        All Files ({@total_count})
                      <% @current_folder -> %>
                        {@current_folder.name} ({@total_count})
                      <% true -> %>
                        Root ({@total_count})
                    <% end %>
                  </h2>
                  <%= if @filter_trash do %>
                    <%= if @select_mode and MapSet.size(@selected_files) > 0 do %>
                      <button
                        phx-click="restore_selected"
                        phx-target={@myself}
                        class="btn btn-sm btn-success gap-1"
                      >
                        <.icon name="hero-arrow-uturn-left" class="w-4 h-4" /> Restore
                      </button>
                    <% end %>
                    <%= if @total_count > 0 do %>
                      <button
                        phx-click="empty_trash"
                        phx-target={@myself}
                        data-confirm={"Permanently delete all #{@total_count} trashed files?"}
                        class="btn btn-sm btn-error gap-1"
                      >
                        <.icon name="hero-trash" class="w-4 h-4" /> Empty Trash
                      </button>
                    <% end %>
                  <% end %>
                  <%= unless @show_upload or @filter_trash do %>
                    <button
                      phx-click="toggle_upload"
                      phx-target={@myself}
                      class="btn btn-sm btn-primary gap-2"
                    >
                      <.icon name="hero-plus" class="w-4 h-4" /> Add Media
                    </button>
                  <% end %>
                  <button
                    phx-click="toggle_select_mode"
                    phx-target={@myself}
                    class="btn btn-sm btn-secondary btn-outline gap-2"
                    phx-disable-with="Select"
                  >
                    <.icon name="hero-check-circle" class="w-4 h-4" /> Select
                  </button>
                  <button
                    phx-click="toggle_new_folder"
                    phx-target={@myself}
                    class="btn btn-sm btn-ghost gap-2 lg:hidden"
                  >
                    <.icon name="hero-folder-plus" class="w-4 h-4" /> New Folder
                  </button>
                  <%!-- Orphan filter is only meaningful at the global root (no scope set) --%>
                  <%= if is_nil(@scope_folder_id) do %>
                    <button
                      phx-click="toggle_orphan_filter"
                      phx-target={@myself}
                      class={[
                        "btn btn-sm gap-2",
                        if(@filter_orphaned, do: "btn-warning", else: "btn-ghost")
                      ]}
                    >
                      <.icon name="hero-funnel" class="w-4 h-4" />
                      <%= if @filter_orphaned do %>
                        Showing orphaned ({@orphaned_count})
                      <% else %>
                        Find orphaned ({@orphaned_count})
                      <% end %>
                    </button>
                    <%= if @filter_orphaned && @total_count > 0 do %>
                      <button
                        phx-click="delete_all_orphaned"
                        phx-target={@myself}
                        data-confirm={"Delete all #{@total_count} orphaned files?"}
                        class="btn btn-sm btn-error gap-2"
                      >
                        <.icon name="hero-trash" class="w-4 h-4" /> Delete all orphaned
                      </button>
                    <% end %>
                  <% end %>
                </div>
              <% end %>
              <div class="flex items-center gap-2">
                <%= if @total_count > 0 do %>
                  <div class="join">
                    <button
                      phx-click="set_view_mode"
                      phx-target={@myself}
                      phx-value-mode="grid"
                      data-view-mode="grid"
                      class={["btn btn-xs join-item", if(@view_mode == "grid", do: "btn-active")]}
                      title="Grid view"
                    >
                      <.icon name="hero-squares-2x2" class="w-3 h-3" />
                    </button>
                    <button
                      phx-click="set_view_mode"
                      phx-target={@myself}
                      phx-value-mode="list"
                      data-view-mode="list"
                      class={["btn btn-xs join-item", if(@view_mode == "list", do: "btn-active")]}
                      title="List view"
                    >
                      <.icon name="hero-bars-3-bottom-left" class="w-3 h-3" />
                    </button>
                  </div>
                  <.pagination_info
                    page={@current_page}
                    per_page={@per_page}
                    total_count={@total_count}
                  />
                <% end %>
              </div>
            </div>

            <%= if @uploaded_files == [] && (@folders == [] or @file_view == "all") do %>
              <%!-- Empty state --%>
              <div class={[
                "rounded-lg p-8 text-center",
                if(@current_folder,
                  do: "border-2 border-dashed border-base-300 bg-base-200/50",
                  else: "bg-base-200"
                )
              ]}>
                <%= cond do %>
                  <% @filter_trash -> %>
                    <.icon
                      name="hero-trash"
                      class="w-12 h-12 mx-auto text-base-content/30 mb-2"
                    />
                    <p class="text-base-content/70">Trash is empty.</p>
                    <p class="text-base-content/50 text-sm mt-1">
                      Deleted files will appear here
                    </p>
                  <% @current_folder -> %>
                    <.icon
                      name="hero-cloud-arrow-up"
                      class="w-12 h-12 mx-auto text-base-content/30 mb-2"
                    />
                    <p class="text-base-content/70">This folder is empty.</p>
                    <p class="text-base-content/50 text-sm mt-1">
                      Drop files here or click "Add Media" to upload
                    </p>
                  <% @file_view == "all" -> %>
                    <.icon
                      name="hero-folder-open"
                      class="w-12 h-12 mx-auto text-base-content/30 mb-2"
                    />
                    <p class="text-base-content/70">No files found.</p>
                  <% true -> %>
                    <.icon
                      name="hero-folder-open"
                      class="w-12 h-12 mx-auto text-base-content/30 mb-2"
                    />
                    <p class="text-base-content/70">
                      No media uploaded yet. Upload your first file above!
                    </p>
                <% end %>
              </div>
            <% else %>
              <%= if @view_mode == "grid" do %>
                <%!-- Grid View --%>
                <div
                  data-media-grid
                  class="grid grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-3"
                >
                  <%!-- New Folder Input (Grid) --%>
                  <%= if @show_new_folder and @file_view != "all" and not @filter_trash do %>
                    <div class="flex flex-col items-center justify-center aspect-square bg-base-200 rounded-lg border-2 border-dashed border-primary/30">
                      <span class="text-warning mb-2">
                        <.icon name="hero-folder-plus" class="w-10 h-10" />
                      </span>
                      <form phx-submit="create_folder" phx-target={@myself} class="w-full px-3">
                        <input
                          type="text"
                          name="name"
                          placeholder="Folder name"
                          class="input input-bordered input-xs w-full text-center"
                          phx-mounted={JS.focus()}
                          required
                          phx-keydown="toggle_new_folder"
                          phx-target={@myself}
                          phx-key="Escape"
                        />
                      </form>
                    </div>
                  <% end %>
                  <%!-- Folders --%>
                  <%= for folder <- if(@file_view == "all", do: [], else: @folders) do %>
                    <div
                      data-drop-folder={folder.uuid}
                      class={[
                        "group relative flex flex-col items-center justify-center aspect-square bg-base-200 rounded-lg cursor-pointer hover:bg-base-300 hover:shadow-lg transition-colors",
                        @select_mode && MapSet.member?(@selected_folders, folder.uuid) &&
                          "ring-2 ring-primary"
                      ]}
                      style={folder_bg_style(folder.color)}
                      phx-click={if @select_mode, do: "toggle_select_folder"}
                      phx-target={@myself}
                      phx-value-folder-uuid={if @select_mode, do: folder.uuid}
                    >
                      <%= if @select_mode do %>
                        <label class="absolute top-1 left-1 z-10 cursor-pointer">
                          <input
                            type="checkbox"
                            class="checkbox checkbox-primary checkbox-sm"
                            checked={MapSet.member?(@selected_folders, folder.uuid)}
                            phx-click="toggle_select_folder"
                            phx-target={@myself}
                            phx-value-folder-uuid={folder.uuid}
                          />
                        </label>
                      <% end %>
                      <%= if @renaming_folder == folder.uuid && @renaming_source == "content" do %>
                        <%!-- Inline rename --%>
                        <span style={folder_icon_style(folder.color)}>
                          <.icon name="hero-folder" class="w-12 h-12 mb-2" />
                        </span>
                        <form
                          phx-submit="rename_folder"
                          phx-target={@myself}
                          phx-change="rename_folder_input"
                          class="flex items-center gap-1 px-2 w-full"
                        >
                          <input type="hidden" name="folder_uuid" value={folder.uuid} />
                          <input
                            type="text"
                            name="name"
                            value={@renaming_text}
                            class="input input-bordered input-xs w-full text-center"
                            phx-mounted={JS.focus()}
                            required
                            phx-keydown="cancel_rename_folder"
                            phx-target={@myself}
                            phx-key="Escape"
                            phx-debounce="50"
                          />
                        </form>
                      <% else %>
                        <button
                          phx-click="navigate_folder"
                          phx-target={@myself}
                          phx-value-folder-uuid={folder.uuid}
                          class="flex flex-col items-center overflow-hidden w-full"
                        >
                          <span style={folder_icon_style(folder.color)}>
                            <.icon name="hero-folder" class="w-12 h-12 mb-1" />
                          </span>
                          <p class={[
                            "text-xs font-semibold text-center px-2 truncate w-full",
                            @renaming_folder == folder.uuid && @renaming_source != "content" &&
                              "renaming-preview"
                          ]}>
                            <%= if @renaming_folder == folder.uuid && @renaming_text != "" do %>
                              {@renaming_text}
                            <% else %>
                              {folder.name}
                            <% end %>
                          </p>
                        </button>
                        <div class="dropdown dropdown-end absolute top-1 right-1 opacity-0 group-hover:opacity-100">
                          <label tabindex="0" class="btn btn-ghost btn-xs p-0 min-h-0 h-5 w-5">
                            <.icon name="hero-ellipsis-vertical" class="w-4 h-4" />
                          </label>
                          <ul
                            tabindex="0"
                            class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-20 w-36 p-1"
                          >
                            <li>
                              <button
                                phx-click="start_rename_folder"
                                phx-target={@myself}
                                phx-value-folder-uuid={folder.uuid}
                              >
                                <.icon name="hero-pencil" class="w-4 h-4" /> Rename
                              </button>
                            </li>
                            <li>
                              <div class="px-3 py-1.5">
                                <span class="text-xs font-semibold text-base-content/50 mb-1 block">
                                  Color
                                </span>
                                <div class="flex flex-wrap gap-1">
                                  <%= for color <- PhoenixKit.Modules.Storage.Folder.colors() do %>
                                    <button
                                      phx-click="change_folder_color"
                                      phx-target={@myself}
                                      phx-value-folder-uuid={folder.uuid}
                                      phx-value-color={color}
                                      class={[
                                        "w-4 h-4 rounded-full border-2 transition-transform hover:scale-125",
                                        if(
                                          folder.color == color ||
                                            (folder.color == nil && color == "default"),
                                          do: "border-base-content scale-110",
                                          else: "border-transparent"
                                        )
                                      ]}
                                      style={"background-color: #{folder_color_hex(color) || "oklch(var(--wa))"}"}
                                      title={color}
                                    >
                                    </button>
                                  <% end %>
                                </div>
                              </div>
                            </li>
                            <li>
                              <button
                                phx-click="delete_folder"
                                phx-target={@myself}
                                phx-value-id={folder.uuid}
                                data-confirm={"Delete '#{folder.name}'? Files move to parent."}
                                class="text-error"
                              >
                                <.icon name="hero-trash" class="w-4 h-4" /> Delete
                              </button>
                            </li>
                          </ul>
                        </div>
                      <% end %>
                    </div>
                  <% end %>
                  <%!-- Files --%>
                  <%= for file <- @uploaded_files do %>
                    <div
                      data-draggable-file={file.file_uuid}
                      class={[
                        "group relative aspect-square bg-base-300 rounded-lg overflow-hidden hover:shadow-lg transition-shadow",
                        @select_mode && MapSet.member?(@selected_files, file.file_uuid) &&
                          "ring-2 ring-primary"
                      ]}
                    >
                      <%= if @select_mode do %>
                        <label class="absolute top-1 left-1 z-10 cursor-pointer">
                          <input
                            type="checkbox"
                            class="checkbox checkbox-primary checkbox-sm"
                            checked={MapSet.member?(@selected_files, file.file_uuid)}
                            phx-click="toggle_select"
                            phx-target={@myself}
                            phx-value-file-uuid={file.file_uuid}
                          />
                        </label>
                      <% end %>

                      <div
                        phx-click="click_file"
                        phx-target={@myself}
                        phx-value-file-uuid={file.file_uuid}
                        class="block w-full h-full cursor-pointer"
                      >
                        <.thumbnail_url :let={url} file={file} size={:small}>
                          <%= if url do %>
                            <img
                              src={url}
                              alt={file.filename}
                              class="w-full h-full object-cover pointer-events-none group-hover:opacity-75 transition-opacity"
                              onerror="this.parentElement.querySelector('.image-error-placeholder').style.display='grid';"
                            />
                            <div class="image-error-placeholder hidden absolute inset-0 bg-base-300 grid place-items-center text-base-content/50">
                              <div class="flex flex-col items-center justify-center">
                                <.icon name="hero-photo" class="w-12 h-12 mb-2 text-error" />
                                <p class="text-xs font-semibold">Image Missing</p>
                              </div>
                            </div>
                          <% else %>
                            <div class="grid place-items-center w-full aspect-square text-base-content/50 group-hover:bg-base-200 transition-colors">
                              <div class="flex flex-col items-center">
                                <.icon
                                  name={file_icon(file.file_type)}
                                  class="w-12 h-12 mb-2"
                                />
                                <p class="text-sm font-semibold">
                                  {String.upcase(file.file_type)}
                                </p>
                              </div>
                            </div>
                          <% end %>
                        </.thumbnail_url>

                        <%= if file.file_type == "video" do %>
                          <div class="absolute top-2 left-2 bg-black/60 text-white p-1.5 rounded pointer-events-none flex items-center justify-center">
                            <.icon name="hero-play-solid" class="w-4 h-4" />
                          </div>
                        <% end %>

                        <%= if file.mime_type == "application/pdf" do %>
                          <div class="absolute top-2 left-2 bg-error/80 text-white px-2 py-0.5 rounded text-xs font-bold pointer-events-none">
                            PDF
                          </div>
                        <% end %>

                        <div class="absolute bottom-2 right-2 bg-black/60 text-white text-xs px-2 py-1 rounded pointer-events-none">
                          {format_file_size(file.size)}
                        </div>
                      </div>
                    </div>
                  <% end %>
                </div>
              <% end %>
              <%= if @view_mode == "list" do %>
                <%!-- List View --%>
                <div data-media-list class="overflow-x-auto">
                  <table class="table table-sm">
                    <thead>
                      <tr>
                        <%= if @select_mode do %>
                          <th class="w-8"></th>
                        <% end %>
                        <th class="w-12"></th>
                        <th>Name</th>
                        <th>Path</th>
                        <th>Type</th>
                        <th>Size</th>
                        <th>Date</th>
                        <th class="w-10"></th>
                      </tr>
                    </thead>
                    <tbody>
                      <%!-- New Folder Input (List) --%>
                      <%= if @show_new_folder and @file_view != "all" and not @filter_trash do %>
                        <tr class="bg-base-200">
                          <%= if @select_mode do %>
                            <td></td>
                          <% end %>
                          <td>
                            <div class="w-10 h-10 grid place-items-center">
                              <span class="text-warning">
                                <.icon name="hero-folder-plus" class="w-6 h-6" />
                              </span>
                            </div>
                          </td>
                          <td colspan="5">
                            <form
                              phx-submit="create_folder"
                              phx-target={@myself}
                              class="flex items-center gap-2"
                            >
                              <input
                                type="text"
                                name="name"
                                placeholder="Folder name"
                                class="input input-bordered input-sm flex-1"
                                phx-mounted={JS.focus()}
                                required
                                phx-keydown="toggle_new_folder"
                                phx-target={@myself}
                                phx-key="Escape"
                              />
                              <button type="submit" class="btn btn-sm btn-primary">
                                <.icon name="hero-check" class="w-4 h-4" />
                              </button>
                              <button
                                type="button"
                                phx-click="toggle_new_folder"
                                phx-target={@myself}
                                class="btn btn-sm btn-ghost"
                              >
                                <.icon name="hero-x-mark" class="w-4 h-4" />
                              </button>
                            </form>
                          </td>
                          <td></td>
                        </tr>
                      <% end %>
                      <%!-- Folders --%>
                      <%= for folder <- if(@file_view == "all", do: [], else: @folders) do %>
                        <%= if @renaming_folder == folder.uuid && @renaming_source == "content" do %>
                          <tr style={
                            folder_bg_style(folder.color) || "background-color: oklch(var(--b2))"
                          }>
                            <%= if @select_mode do %>
                              <td></td>
                            <% end %>
                            <td>
                              <div class="w-10 h-10 grid place-items-center">
                                <span style={folder_icon_style(folder.color)}>
                                  <.icon name="hero-folder" class="w-6 h-6" />
                                </span>
                              </div>
                            </td>
                            <td colspan="5">
                              <form
                                phx-submit="rename_folder"
                                phx-target={@myself}
                                phx-change="rename_folder_input"
                                class="flex items-center gap-2"
                              >
                                <input type="hidden" name="folder_uuid" value={folder.uuid} />
                                <input
                                  type="text"
                                  name="name"
                                  value={@renaming_text}
                                  class="input input-bordered input-sm flex-1"
                                  phx-mounted={JS.focus()}
                                  required
                                  phx-keydown="cancel_rename_folder"
                                  phx-target={@myself}
                                  phx-key="Escape"
                                  phx-debounce="50"
                                />
                                <button type="submit" class="btn btn-sm btn-ghost">
                                  <.icon name="hero-check" class="w-4 h-4 text-success" />
                                </button>
                                <button
                                  type="button"
                                  phx-click="cancel_rename_folder"
                                  phx-target={@myself}
                                  class="btn btn-sm btn-ghost"
                                >
                                  <.icon name="hero-x-mark" class="w-4 h-4" />
                                </button>
                              </form>
                            </td>
                            <td></td>
                          </tr>
                        <% else %>
                          <tr
                            phx-click={
                              if @select_mode, do: "toggle_select_folder", else: "navigate_folder"
                            }
                            phx-target={@myself}
                            phx-value-folder-uuid={folder.uuid}
                            data-drop-folder={folder.uuid}
                            class={[
                              "hover cursor-pointer",
                              @select_mode && MapSet.member?(@selected_folders, folder.uuid) &&
                                "bg-primary/10"
                            ]}
                            style={folder_bg_style(folder.color)}
                          >
                            <%= if @select_mode do %>
                              <td>
                                <input
                                  type="checkbox"
                                  class="checkbox checkbox-primary checkbox-xs"
                                  checked={MapSet.member?(@selected_folders, folder.uuid)}
                                  phx-click="toggle_select_folder"
                                  phx-target={@myself}
                                  phx-value-folder-uuid={folder.uuid}
                                />
                              </td>
                            <% end %>
                            <td>
                              <div class="w-10 h-10 grid place-items-center">
                                <span style={folder_icon_style(folder.color)}>
                                  <.icon name="hero-folder" class="w-6 h-6" />
                                </span>
                              </div>
                            </td>
                            <td colspan="5">
                              <span class={[
                                "font-medium text-sm",
                                @renaming_folder == folder.uuid && @renaming_source != "content" &&
                                  "renaming-preview"
                              ]}>
                                <%= if @renaming_folder == folder.uuid && @renaming_text != "" do %>
                                  {@renaming_text}
                                <% else %>
                                  {folder.name}
                                <% end %>
                              </span>
                            </td>
                            <td></td>
                            <td>
                              <div
                                class="dropdown dropdown-end"
                                phx-click="noop"
                                phx-target={@myself}
                              >
                                <label tabindex="0" class="btn btn-ghost btn-xs">
                                  <.icon name="hero-ellipsis-vertical" class="w-4 h-4" />
                                </label>
                                <ul
                                  tabindex="0"
                                  class="dropdown-content menu bg-base-100 rounded-box shadow-lg z-20 w-36 p-1"
                                >
                                  <li>
                                    <button
                                      phx-click="start_rename_folder"
                                      phx-target={@myself}
                                      phx-value-folder-uuid={folder.uuid}
                                    >
                                      <.icon name="hero-pencil" class="w-4 h-4" /> Rename
                                    </button>
                                  </li>
                                  <li>
                                    <div class="px-3 py-1.5">
                                      <span class="text-xs font-semibold text-base-content/50 mb-1 block">
                                        Color
                                      </span>
                                      <div class="flex flex-wrap gap-1">
                                        <%= for color <- PhoenixKit.Modules.Storage.Folder.colors() do %>
                                          <button
                                            phx-click="change_folder_color"
                                            phx-target={@myself}
                                            phx-value-folder-uuid={folder.uuid}
                                            phx-value-color={color}
                                            class={[
                                              "w-4 h-4 rounded-full border-2 transition-transform hover:scale-125",
                                              if(
                                                folder.color == color ||
                                                  (folder.color == nil && color == "default"),
                                                do: "border-base-content scale-110",
                                                else: "border-transparent"
                                              )
                                            ]}
                                            style={"background-color: #{folder_color_hex(color) || "oklch(var(--wa))"}"}
                                            title={color}
                                          >
                                          </button>
                                        <% end %>
                                      </div>
                                    </div>
                                  </li>
                                  <li>
                                    <button
                                      phx-click="delete_folder"
                                      phx-target={@myself}
                                      phx-value-id={folder.uuid}
                                      data-confirm={"Delete '#{folder.name}'? Files move to parent."}
                                      class="text-error"
                                    >
                                      <.icon name="hero-trash" class="w-4 h-4" /> Delete
                                    </button>
                                  </li>
                                </ul>
                              </div>
                            </td>
                          </tr>
                        <% end %>
                      <% end %>
                      <%!-- Files --%>
                      <%= for file <- @uploaded_files do %>
                        <tr
                          data-draggable-file={file.file_uuid}
                          phx-click="click_file"
                          phx-target={@myself}
                          phx-value-file-uuid={file.file_uuid}
                          class={[
                            "hover cursor-pointer",
                            @select_mode &&
                              MapSet.member?(@selected_files, file.file_uuid) && "bg-primary/10"
                          ]}
                        >
                          <%= if @select_mode do %>
                            <td>
                              <input
                                type="checkbox"
                                class="checkbox checkbox-primary checkbox-xs"
                                checked={MapSet.member?(@selected_files, file.file_uuid)}
                                phx-click="toggle_select"
                                phx-target={@myself}
                                phx-value-file-uuid={file.file_uuid}
                              />
                            </td>
                          <% end %>
                          <td>
                            <div class="w-10 h-10 rounded overflow-hidden bg-base-300 shrink-0">
                              <.thumbnail_url :let={url} file={file} size={:small}>
                                <%= if url do %>
                                  <img
                                    src={url}
                                    class="w-full h-full object-cover"
                                    alt={file.filename}
                                  />
                                <% else %>
                                  <div class="grid place-items-center w-full h-full text-base-content/40">
                                    <.icon name={file_icon(file.file_type)} class="w-5 h-5" />
                                  </div>
                                <% end %>
                              </.thumbnail_url>
                            </div>
                          </td>
                          <td>
                            <span class="font-medium text-sm">{file.filename}</span>
                          </td>
                          <td>
                            <%= if file.folder_path do %>
                              <span class="text-xs text-base-content/50">{file.folder_path}</span>
                            <% else %>
                              <span class="text-xs text-base-content/30">/</span>
                            <% end %>
                          </td>
                          <td>
                            <span class="badge badge-ghost badge-sm h-auto">
                              {String.upcase(file.file_type)}
                            </span>
                          </td>
                          <td class="text-sm text-base-content/70">
                            {format_file_size(file.size)}
                          </td>
                          <td class="text-sm text-base-content/70">
                            {Calendar.strftime(file.inserted_at, "%b %d, %Y")}
                          </td>
                        </tr>
                      <% end %>
                    </tbody>
                  </table>
                </div>
              <% end %>
            <% end %>

            <%!-- Pagination (event-based; URL sync deferred to Task 3) --%>
            <%= if @total_count > @per_page do %>
              <div class="flex justify-center items-center gap-2 mt-4">
                <%= if @current_page > 1 do %>
                  <button
                    phx-click="set_page"
                    phx-target={@myself}
                    phx-value-page={@current_page - 1}
                    class="btn btn-sm btn-ghost gap-1"
                  >
                    <.icon name="hero-chevron-left" class="w-4 h-4" /> Prev
                  </button>
                <% end %>
                <span class="text-sm text-base-content/70">
                  {@current_page} / {@total_pages}
                </span>
                <%= if @current_page < @total_pages do %>
                  <button
                    phx-click="set_page"
                    phx-target={@myself}
                    phx-value-page={@current_page + 1}
                    class="btn btn-sm btn-ghost gap-1"
                  >
                    Next <.icon name="hero-chevron-right" class="w-4 h-4" />
                  </button>
                <% end %>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <%!-- Move to Folder Modal --%>
    <%= if @show_move_modal do %>
      <div class="modal modal-open">
        <div class="modal-box">
          <h3 class="font-bold text-lg mb-4">
            Move {MapSet.size(@selected_files)} file(s) to folder
          </h3>
          <ul class="menu bg-base-200 rounded-lg max-h-64 overflow-y-auto">
            <li>
              <button
                phx-click="move_selected_to_folder"
                phx-target={@myself}
                phx-value-folder_uuid=""
                class={if @current_folder == nil, do: "active", else: ""}
              >
                <.icon name="hero-home" class="w-4 h-4" /> Root (no folder)
              </button>
            </li>
            <%= for node <- @folder_tree do %>
              <.move_folder_option node={node} depth={0} myself={@myself} />
            <% end %>
          </ul>
          <div class="modal-action">
            <button phx-click="close_move_modal" phx-target={@myself} class="btn btn-ghost">
              Cancel
            </button>
          </div>
        </div>
        <div class="modal-backdrop" phx-click="close_move_modal" phx-target={@myself}></div>
      </div>
    <% end %>
  <% end %>
</div>
