@memberjunction/ng-file-storage 6.1.0-edge.2 → 6.1.0-edge.3

package/dist/lib/file-browser/file-grid.component.js

@@ -2,567 +2,816 @@ import { Component, Input, Output, EventEmitter, ChangeDetectorRef, inject } fro
 import { GraphQLDataProvider, GraphQLFileStorageClient } from '@memberjunction/graphql-dataprovider';
 import { FileStorageEngineBase } from '@memberjunction/core-entities';
 import { UUIDsEqual } from '@memberjunction/global';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/forms";
-import * as i2 from "@memberjunction/ng-shared-generic";
-import * as i3 from "@memberjunction/ng-ui-components";
-function FileGridComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-ui-components";
+const _forTrack0 = ($index, $item) => $item.path;
+const _forTrack1 = ($index, $item) => $item.account.ID;
+const _forTrack2 = ($index, $item) => $item.accountID;
+const _forTrack3 = ($index, $item) => $item.key;
+function FileGridComponent_Conditional_1_For_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵtext(1, "/");
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_Conditional_1_For_10_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 29);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
-    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_For_10_Template_button_click_0_listener() { const crumb_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.navigateToBreadcrumb(crumb_r4.path)); });
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(2, FileGridComponent_Conditional_1_For_10_Conditional_2_Template, 2, 0, "span", 43);
+} if (rf & 2) {
+    const crumb_r4 = ctx.$implicit;
+    const ɵ$index_22_r5 = ctx.$index;
+    const ɵ$count_22_r6 = ctx.$count;
+    i0.ɵɵclassProp("current", ɵ$index_22_r5 === ɵ$count_22_r6 - 1);
+    i0.ɵɵproperty("title", crumb_r4.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", crumb_r4.name, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!(ɵ$index_22_r5 === ɵ$count_22_r6 - 1) ? 2 : -1);
+} }
+function FileGridComponent_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 44);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵelementEnd();
 } }
 function FileGridComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 1)(1, "div", 12)(2, "button", 13);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateUp()); });
-    i0.ɵɵelement(3, "i", 14);
+    i0.ɵɵelementStart(0, "div", 1)(1, "div", 14)(2, "div", 15)(3, "button", 16);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.navigateUp()); });
+    i0.ɵɵelement(4, "i", 17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 15);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
-    i0.ɵɵelement(5, "i", 16);
+    i0.ɵɵelementStart(5, "button", 18);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
+    i0.ɵɵelement(6, "i", 19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 17);
-    i0.ɵɵelement(7, "i", 18);
-    i0.ɵɵelementStart(8, "span", 19);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(7, "nav", 20);
+    i0.ɵɵelement(8, "i", 21);
+    i0.ɵɵrepeaterCreate(9, FileGridComponent_Conditional_1_For_10_Template, 3, 5, null, null, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 20)(11, "input", 21);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_1_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchQuery, $event) || (ctx_r1.searchQuery = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function FileGridComponent_Conditional_1_Template_input_ngModelChange_11_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(12, FileGridComponent_Conditional_1_Conditional_12_Template, 2, 0, "button", 22);
-    i0.ɵɵelementStart(13, "select", 23);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_1_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.fileTypeFilter, $event) || (ctx_r1.fileTypeFilter = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function FileGridComponent_Conditional_1_Template_select_ngModelChange_13_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFileTypeFilterChange($event)); });
-    i0.ɵɵelementStart(14, "option", 24);
-    i0.ɵɵtext(15, "All");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "option", 25);
-    i0.ɵɵtext(17, "Files");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "option", 26);
-    i0.ɵɵtext(19, "Folders");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "button", 27);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMultiAccountSearchMode()); });
-    i0.ɵɵelement(21, "i", 28);
+    i0.ɵɵelementStart(11, "div", 22)(12, "div", 23);
+    i0.ɵɵelement(13, "i", 24);
+    i0.ɵɵelementStart(14, "input", 25);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_1_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.searchQuery, $event) || (ctx_r1.searchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function FileGridComponent_Conditional_1_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_1_Conditional_15_Template, 2, 0, "button", 26);
+    i0.ɵɵelementStart(16, "select", 27);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_1_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.fileTypeFilter, $event) || (ctx_r1.fileTypeFilter = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function FileGridComponent_Conditional_1_Template_select_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onFileTypeFilterChange($event)); });
+    i0.ɵɵelementStart(17, "option", 28);
+    i0.ɵɵtext(18, "All Items");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "option", 29);
+    i0.ɵɵtext(20, "Files only");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(21, "option", 30);
+    i0.ɵɵtext(22, "Folders only");
     i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(23, "button", 31);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMultiAccountSearchMode()); });
+    i0.ɵɵelement(24, "i", 32);
+    i0.ɵɵelementStart(25, "span");
+    i0.ɵɵtext(26, "All Accounts");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(27, "div", 33)(28, "button", 34);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "list"); });
+    i0.ɵɵelement(29, "i", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "button", 36);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "grid"); });
+    i0.ɵɵelement(31, "i", 37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(32, "button", 38);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNewFolderClick()); });
+    i0.ɵɵelement(33, "i", 39);
+    i0.ɵɵelementStart(34, "span");
+    i0.ɵɵtext(35, "New Folder");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(36, "button", 40);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_1_Template_button_click_36_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
+    i0.ɵɵelement(37, "i", 41);
+    i0.ɵɵelementStart(38, "span");
+    i0.ɵɵtext(39, "Upload");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", !ctx_r1.canNavigateUp());
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate1("", ctx_r1.folderPath || "Root", " /");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r1.getPathBreadcrumbs());
+    i0.ɵɵadvance(5);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.searchQuery);
     i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isMultiProviderSearchMode);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.searchQuery && !ctx_r1.isMultiProviderSearchMode ? 12 : -1);
+    i0.ɵɵconditional(ctx_r1.searchQuery && !ctx_r1.isMultiProviderSearchMode ? 15 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.fileTypeFilter);
     i0.ɵɵproperty("disabled", ctx_r1.isLoading || ctx_r1.isMultiProviderSearchMode);
     i0.ɵɵadvance(7);
     i0.ɵɵclassProp("active", ctx_r1.isMultiProviderSearchMode);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("active", ctx_r1.viewMode === "list");
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassProp("active", ctx_r1.viewMode === "grid");
 } }
-function FileGridComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openPreview(ctx_r1.getSelectedItem())); });
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Preview");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "button", 56);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_7_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onDownloadClick()); });
+    i0.ɵɵelement(5, "i", 57);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Download");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "button", 58);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_7_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCopyToAccountClick()); });
+    i0.ɵɵelement(9, "i", 41);
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11, "Copy to...");
+    i0.ɵɵelementEnd()();
 } }
-function FileGridComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 39);
+function FileGridComponent_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onRenameClick()); });
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Rename");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(4, "button", 61);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_8_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCopyClick()); });
+    i0.ɵɵelement(5, "i", 62);
+    i0.ɵɵelementStart(6, "span");
+    i0.ɵɵtext(7, "Copy");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "button", 63);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_8_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onMoveClick()); });
+    i0.ɵɵelement(9, "i", 64);
+    i0.ɵɵelementStart(10, "span");
+    i0.ɵɵtext(11, "Move");
+    i0.ɵɵelementEnd()();
 } }
-function FileGridComponent_Conditional_2_For_19_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
+function FileGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 46)(2, "label", 47);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Template_label_click_2_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(3, "input", 48);
+    i0.ɵɵlistener("change", function FileGridComponent_Conditional_2_Template_input_change_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.areAllSelected() ? ctx_r1.deselectAll() : ctx_r1.selectAll()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 49);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(6, "div", 50);
+    i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_2_Conditional_7_Template, 12, 0);
+    i0.ɵɵconditionalCreate(8, FileGridComponent_Conditional_2_Conditional_8_Template, 12, 0);
+    i0.ɵɵelementStart(9, "button", 51);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeleteClick()); });
+    i0.ɵɵelement(10, "i", 52);
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12, "Delete");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "button", 53);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deselectAll()); });
+    i0.ɵɵelement(14, "i", 45);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    let tmp_3_0;
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("checked", ctx_r1.areAllSelected());
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2("", ctx_r1.selectedItems.length, " item", ctx_r1.selectedItems.length === 1 ? "" : "s", " selected");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.selectedItems.length === 1 && ((tmp_3_0 = ctx_r1.getSelectedItem()) == null ? null : tmp_3_0.type) === "file" ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedItems.length === 1 ? 8 : -1);
+} }
+function FileGridComponent_Conditional_3_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
+} }
+function FileGridComponent_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 73);
+} }
+function FileGridComponent_Conditional_3_For_21_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
     i0.ɵɵtext(1, "(no search)");
     i0.ɵɵelementEnd();
 } }
-function FileGridComponent_Conditional_2_For_19_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 46)(1, "input", 47);
-    i0.ɵɵlistener("change", function FileGridComponent_Conditional_2_For_19_Template_input_change_1_listener() { const a_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSearchAccount(a_r6.account.ID)); });
+function FileGridComponent_Conditional_3_For_21_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 79)(1, "input", 80);
+    i0.ɵɵlistener("change", function FileGridComponent_Conditional_3_For_21_Template_input_change_1_listener() { const a_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSearchAccount(a_r13.account.ID)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 48);
+    i0.ɵɵelementStart(2, "span", 81);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 49);
+    i0.ɵɵelementStart(4, "span", 82);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_2_For_19_Conditional_6_Template, 2, 0, "span", 50);
+    i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_3_For_21_Conditional_6_Template, 2, 0, "span", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const a_r6 = ctx.$implicit;
+    const a_r13 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("disabled", !ctx_r1.accountSupportsSearch(a_r6));
-    i0.ɵɵproperty("title", ctx_r1.accountSupportsSearch(a_r6) ? "" : "This account does not support search");
+    i0.ɵɵclassProp("disabled", !ctx_r1.accountSupportsSearch(a_r13))("checked", ctx_r1.isAccountSelectedForSearch(a_r13.account.ID));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r1.isAccountSelectedForSearch(a_r6.account.ID))("disabled", !ctx_r1.accountSupportsSearch(a_r6));
+    i0.ɵɵproperty("checked", ctx_r1.isAccountSelectedForSearch(a_r13.account.ID))("disabled", !ctx_r1.accountSupportsSearch(a_r13));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(a_r6.account.Name);
+    i0.ɵɵtextInterpolate(a_r13.account.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("(", a_r6.provider.Name, ")");
+    i0.ɵɵtextInterpolate(a_r13.provider.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.accountSupportsSearch(a_r6) ? 6 : -1);
+    i0.ɵɵconditional(!ctx_r1.accountSupportsSearch(a_r13) ? 6 : -1);
 } }
-function FileGridComponent_Conditional_2_Conditional_20_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 54);
+function FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 94);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(3);
+    const accountResult_r15 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" , ", ctx_r1.multiProviderSearchResults.failedAccounts, " failed ");
+    i0.ɵɵtextInterpolate(accountResult_r15.results.length);
 } }
-function FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 52);
+function FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 95);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const accountResult_r8 = i0.ɵɵnextContext().$implicit;
+    const accountResult_r15 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" (", accountResult_r8.results.length, " result(s)) ");
+    i0.ɵɵtextInterpolate(accountResult_r15.errorMessage);
 } }
-function FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 64);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const accountResult_r8 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", accountResult_r8.errorMessage, " ");
-} }
-function FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵelement(1, "i", 66);
-    i0.ɵɵelementStart(2, "div", 67)(3, "span", 68);
+function FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 98);
+    i0.ɵɵelement(1, "i", 99);
+    i0.ɵɵelementStart(2, "div", 100)(3, "span", 101);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 69);
+    i0.ɵɵelementStart(5, "span", 102);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "span", 70);
+    i0.ɵɵelementStart(7, "span", 103);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 71);
+    i0.ɵɵelementStart(9, "span", 104);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const file_r9 = ctx.$implicit;
+    const file_r16 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r1.getSearchResultIcon(file_r9));
+    i0.ɵɵclassMap(ctx_r1.getSearchResultIcon(file_r16));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(file_r9.name);
+    i0.ɵɵtextInterpolate(file_r16.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(file_r9.path);
+    i0.ɵɵtextInterpolate(file_r16.path);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatSearchResultSize(file_r9.size));
+    i0.ɵɵtextInterpolate(ctx_r1.formatSearchResultSize(file_r16.size));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(ctx_r1.formatSearchResultDate(file_r9.lastModified));
+    i0.ɵɵtextInterpolate(ctx_r1.formatSearchResultDate(file_r16.lastModified));
 } }
-function FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 62);
-    i0.ɵɵrepeaterCreate(1, FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_7_For_2_Template, 11, 6, "div", 65, i0.ɵɵrepeaterTrackByIdentity);
+function FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵrepeaterCreate(1, FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_7_For_2_Template, 11, 6, "div", 98, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const accountResult_r8 = i0.ɵɵnextContext().$implicit;
+    const accountResult_r15 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(accountResult_r8.results);
+    i0.ɵɵrepeater(accountResult_r15.results);
 } }
-function FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 63);
-    i0.ɵɵtext(1, " No matching files found ");
+function FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵtext(1, "No matching files found in this account");
     i0.ɵɵelementEnd();
 } }
-function FileGridComponent_Conditional_2_Conditional_20_For_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
-    i0.ɵɵelement(2, "i", 60);
-    i0.ɵɵelementStart(3, "span", 48);
+function FileGridComponent_Conditional_3_Conditional_22_For_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90)(1, "div", 91);
+    i0.ɵɵelement(2, "i", 92);
+    i0.ɵɵelementStart(3, "span", 93);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_5_Template, 2, 1, "span", 52);
-    i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_6_Template, 3, 1, "span", 61);
+    i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_5_Template, 2, 1, "span", 94)(6, FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_6_Template, 2, 1, "span", 95);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_7_Template, 3, 0, "div", 62);
-    i0.ɵɵconditionalCreate(8, FileGridComponent_Conditional_2_Conditional_20_For_13_Conditional_8_Template, 2, 0, "div", 63);
+    i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_7_Template, 3, 0, "div", 96);
+    i0.ɵɵconditionalCreate(8, FileGridComponent_Conditional_3_Conditional_22_For_13_Conditional_8_Template, 2, 0, "div", 97);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const accountResult_r8 = ctx.$implicit;
-    i0.ɵɵclassProp("failed", !accountResult_r8.success);
+    const accountResult_r15 = ctx.$implicit;
+    i0.ɵɵclassProp("failed", !accountResult_r15.success);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(accountResult_r8.accountName);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(accountResult_r8.success ? 5 : -1);
+    i0.ɵɵtextInterpolate(accountResult_r15.accountName);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!accountResult_r8.success ? 6 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(accountResult_r8.success && accountResult_r8.results.length > 0 ? 7 : -1);
+    i0.ɵɵconditional(accountResult_r15.success ? 5 : 6);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(accountResult_r15.success && accountResult_r15.results.length > 0 ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(accountResult_r8.success && accountResult_r8.results.length === 0 ? 8 : -1);
+    i0.ɵɵconditional(accountResult_r15.success && accountResult_r15.results.length === 0 ? 8 : -1);
 } }
-function FileGridComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 44)(1, "div", 51)(2, "span", 52);
-    i0.ɵɵtext(3);
+function FileGridComponent_Conditional_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 78)(1, "div", 84)(2, "span", 85)(3, "strong");
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 53);
     i0.ɵɵtext(5);
-    i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_2_Conditional_20_Conditional_6_Template, 2, 1, "span", 54);
-    i0.ɵɵtext(7, ") ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 55);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Conditional_20_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearMultiProviderSearch()); });
-    i0.ɵɵelement(9, "i", 30);
-    i0.ɵɵtext(10, " Clear ");
+    i0.ɵɵelementStart(6, "span", 86);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "button", 87);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_3_Conditional_22_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearMultiProviderSearch()); });
+    i0.ɵɵelement(9, "i", 45);
+    i0.ɵɵtext(10, " Clear Results ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 56);
-    i0.ɵɵrepeaterCreate(12, FileGridComponent_Conditional_2_Conditional_20_For_13_Template, 9, 7, "div", 57, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(11, "div", 88);
+    i0.ɵɵrepeaterCreate(12, FileGridComponent_Conditional_3_Conditional_22_For_13_Template, 9, 6, "div", 89, _forTrack2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r1.multiProviderSearchResults.totalResultsReturned, " result(s) found");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" (", ctx_r1.multiProviderSearchResults.successfulAccounts, " account(s) searched ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r1.multiProviderSearchResults.totalResultsReturned);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.multiProviderSearchResults.failedAccounts > 0 ? 6 : -1);
-    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1(" result", ctx_r1.multiProviderSearchResults.totalResultsReturned === 1 ? "" : "s", " found ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate2(" (", ctx_r1.multiProviderSearchResults.successfulAccounts, " account", ctx_r1.multiProviderSearchResults.successfulAccounts === 1 ? "" : "s", " searched) ");
+    i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r1.multiProviderSearchResults.accountResults);
 } }
-function FileGridComponent_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵelement(1, "mj-loading", 72);
-    i0.ɵɵelementEnd();
-} }
-function FileGridComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 2)(1, "div", 31)(2, "h3");
+function FileGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 65)(2, "div", 66);
     i0.ɵɵelement(3, "i", 32);
-    i0.ɵɵtext(4, " Search Across Providers");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 33);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMultiAccountSearchMode()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(4, "h3");
+    i0.ɵɵtext(5, "Search Across Storage Accounts");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 34)(8, "div", 35)(9, "input", 36);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_2_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.multiProviderSearchQuery, $event) || (ctx_r1.multiProviderSearchQuery = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_2_Template_input_keydown_enter_9_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeMultiAccountSearch()); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 37);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeMultiAccountSearch()); });
-    i0.ɵɵconditionalCreate(11, FileGridComponent_Conditional_2_Conditional_11_Template, 1, 0, "i", 38);
-    i0.ɵɵconditionalCreate(12, FileGridComponent_Conditional_2_Conditional_12_Template, 1, 0, "i", 39);
-    i0.ɵɵtext(13);
+    i0.ɵɵelementStart(6, "button", 67);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleMultiAccountSearchMode()); });
+    i0.ɵɵelement(7, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 40)(15, "label", 41);
-    i0.ɵɵtext(16, "Select accounts to search:");
+    i0.ɵɵelementStart(8, "div", 68)(9, "div", 69)(10, "input", 70);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_3_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.multiProviderSearchQuery, $event) || (ctx_r1.multiProviderSearchQuery = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_3_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeMultiAccountSearch()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 71);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.executeMultiAccountSearch()); });
+    i0.ɵɵconditionalCreate(12, FileGridComponent_Conditional_3_Conditional_12_Template, 1, 0, "i", 72)(13, FileGridComponent_Conditional_3_Conditional_13_Template, 1, 0, "i", 73);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(16, "div", 74)(17, "span", 75);
+    i0.ɵɵtext(18, "Target Accounts:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 42);
-    i0.ɵɵrepeaterCreate(18, FileGridComponent_Conditional_2_For_19_Template, 7, 8, "label", 43, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(19, "div", 76);
+    i0.ɵɵrepeaterCreate(20, FileGridComponent_Conditional_3_For_21_Template, 7, 9, "label", 77, _forTrack1);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(20, FileGridComponent_Conditional_2_Conditional_20_Template, 14, 3, "div", 44);
-    i0.ɵɵconditionalCreate(21, FileGridComponent_Conditional_2_Conditional_21_Template, 2, 0, "div", 45);
+    i0.ɵɵconditionalCreate(22, FileGridComponent_Conditional_3_Conditional_22_Template, 14, 4, "div", 78);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(9);
+    i0.ɵɵadvance(10);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.multiProviderSearchQuery);
     i0.ɵɵproperty("disabled", ctx_r1.isSearching);
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r1.isSearching || !ctx_r1.multiProviderSearchQuery.trim() || ctx_r1.selectedSearchProviders.size === 0);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSearching ? 11 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r1.isSearching ? 12 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isSearching ? "Searching..." : "Search", " ");
+    i0.ɵɵconditional(ctx_r1.isSearching ? 12 : 13);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.isSearching ? "Searching..." : "Search Accounts");
     i0.ɵɵadvance(5);
     i0.ɵɵrepeater(ctx_r1.availableAccounts);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.multiProviderSearchResults ? 20 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isSearching ? 21 : -1);
+    i0.ɵɵconditional(ctx_r1.multiProviderSearchResults ? 22 : -1);
 } }
-function FileGridComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 3);
-    i0.ɵɵelement(1, "mj-loading", 73);
+function FileGridComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 4);
+    i0.ɵɵelement(1, "mj-loading", 105);
     i0.ɵɵelementEnd();
 } }
-function FileGridComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 74);
-    i0.ɵɵlistener("Action", function FileGridComponent_Conditional_4_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
+function FileGridComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 106);
+    i0.ɵɵlistener("Action", function FileGridComponent_Conditional_5_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refresh()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("Message", ctx_r1.errorMessage);
 } }
-function FileGridComponent_Conditional_5_For_20_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 82);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_For_20_Template_tr_click_0_listener($event) { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTileClick(item_r13, $event)); })("dblclick", function FileGridComponent_Conditional_5_For_20_Template_tr_dblclick_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemDoubleClick(item_r13)); });
-    i0.ɵɵelementStart(1, "td", 83);
-    i0.ɵɵelement(2, "i", 84);
-    i0.ɵɵelementStart(3, "span", 85);
-    i0.ɵɵtext(4);
+function FileGridComponent_Conditional_6_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 118);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_2_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const item_r19 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openPreview(item_r19)); });
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 119);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_2_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r20); const item_r19 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.downloadFile(item_r19)); });
+    i0.ɵɵelement(3, "i", 57);
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 108);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_2_Template_div_click_0_listener($event) { const item_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTileClick(item_r19, $event)); })("dblclick", function FileGridComponent_Conditional_6_For_2_Template_div_dblclick_0_listener() { const item_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemDoubleClick(item_r19)); });
+    i0.ɵɵelementStart(1, "div", 109)(2, "label", 110);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_2_Template_label_click_2_listener($event) { i0.ɵɵrestoreView(_r18); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(3, "input", 48);
+    i0.ɵɵlistener("change", function FileGridComponent_Conditional_6_For_2_Template_input_change_3_listener($event) { const item_r19 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleItemSelection(item_r19, $event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "td", 78)(6, "span", 86);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(4, "div", 111);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_2_Template_div_click_4_listener($event) { i0.ɵɵrestoreView(_r18); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_6_For_2_Conditional_5_Template, 4, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "td", 87)(9, "span", 88);
+    i0.ɵɵelementStart(6, "div", 112);
+    i0.ɵɵelement(7, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 113)(9, "span", 114);
     i0.ɵɵtext(10);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "td", 89)(12, "span", 90);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "div", 115)(12, "span", 116);
     i0.ɵɵtext(13);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 117);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    const item_r13 = ctx.$implicit;
+    const item_r19 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r13.key));
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r19.key));
+    i0.ɵɵproperty("title", item_r19.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("checked", ctx_r1.selectedItems.includes(item_r19.key));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getItemIcon(item_r13));
+    i0.ɵɵconditional(item_r19.type === "file" ? 5 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getItemColorClass(item_r19));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getItemIcon(item_r19));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r19.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(item_r19.type === "folder" ? "Folder" : ctx_r1.formatFileSize(item_r19.size));
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r13.name);
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r19.lastModified));
+} }
+function FileGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 6);
+    i0.ɵɵrepeaterCreate(1, FileGridComponent_Conditional_6_For_2_Template, 16, 12, "div", 107, _forTrack3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.filteredItems);
+} }
+function FileGridComponent_Conditional_7_For_24_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 144);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_For_24_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r24); const item_r23 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openPreview(item_r23)); });
+    i0.ɵɵelement(1, "i", 55);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 145);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_For_24_Conditional_20_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r24); const item_r23 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.downloadFile(item_r23)); });
+    i0.ɵɵelement(3, "i", 57);
+    i0.ɵɵelementEnd();
+} }
+function FileGridComponent_Conditional_7_For_24_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr", 129);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_For_24_Template_tr_click_0_listener($event) { const item_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTileClick(item_r23, $event)); })("dblclick", function FileGridComponent_Conditional_7_For_24_Template_tr_dblclick_0_listener() { const item_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemDoubleClick(item_r23)); });
+    i0.ɵɵelementStart(1, "td", 130);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_For_24_Template_td_click_1_listener($event) { i0.ɵɵrestoreView(_r22); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "input", 48);
+    i0.ɵɵlistener("change", function FileGridComponent_Conditional_7_For_24_Template_input_change_2_listener($event) { const item_r23 = i0.ɵɵrestoreView(_r22).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleItemSelection(item_r23, $event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(3, "td", 131)(4, "div", 132)(5, "div", 133);
+    i0.ɵɵelement(6, "i", 134);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 135);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "td", 136)(10, "span", 137);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(12, "td", 138)(13, "span", 139);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(15, "td", 140)(16, "span", 141);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "td", 142);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_For_24_Template_td_click_18_listener($event) { i0.ɵɵrestoreView(_r22); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(19, "div", 143);
+    i0.ɵɵconditionalCreate(20, FileGridComponent_Conditional_7_For_24_Conditional_20_Template, 4, 0);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const item_r23 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r23.key));
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("checked", ctx_r1.selectedItems.includes(item_r23.key));
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(ctx_r1.getItemColorClass(item_r23));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getItemIcon(item_r23));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", item_r23.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(item_r23.name);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.getFileType(item_r23));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.getFileType(item_r13));
+    i0.ɵɵtextInterpolate(item_r23.type === "folder" ? "\u2014" : ctx_r1.formatFileSize(item_r23.size));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r13.type === "folder" ? "\u2014" : ctx_r1.formatFileSize(item_r13.size));
+    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r23.lastModified));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(ctx_r1.formatDate(item_r13.lastModified));
+    i0.ɵɵconditional(item_r23.type === "file" ? 20 : -1);
 } }
-function FileGridComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 5)(1, "table", 75)(2, "thead")(3, "tr")(4, "th", 76);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_Template_th_click_4_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "name", dir: ctx_r1.sort[0].field === "name" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
-    i0.ɵɵelementStart(5, "span");
-    i0.ɵɵtext(6, "Name");
+function FileGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 7)(1, "table", 120)(2, "thead")(3, "tr")(4, "th", 121)(5, "input", 48);
+    i0.ɵɵlistener("change", function FileGridComponent_Conditional_7_Template_input_change_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.areAllSelected() ? ctx_r1.deselectAll() : ctx_r1.selectAll()); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "th", 122);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_Template_th_click_6_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "name", dir: ctx_r1.sort[0].field === "name" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
+    i0.ɵɵelementStart(7, "span");
+    i0.ɵɵtext(8, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "i", 77);
+    i0.ɵɵelement(9, "i", 123);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "th", 78);
-    i0.ɵɵtext(9, "Type");
+    i0.ɵɵelementStart(10, "th", 124);
+    i0.ɵɵtext(11, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 79);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_Template_th_click_10_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "size", dir: ctx_r1.sort[0].field === "size" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
-    i0.ɵɵelementStart(11, "span");
-    i0.ɵɵtext(12, "Size");
+    i0.ɵɵelementStart(12, "th", 125);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_Template_th_click_12_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "size", dir: ctx_r1.sort[0].field === "size" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
+    i0.ɵɵelementStart(13, "span");
+    i0.ɵɵtext(14, "Size");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(15, "i", 123);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(13, "i", 77);
+    i0.ɵɵelementStart(16, "th", 126);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_7_Template_th_click_16_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "lastModified", dir: ctx_r1.sort[0].field === "lastModified" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
+    i0.ɵɵelementStart(17, "span");
+    i0.ɵɵtext(18, "Modified");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "th", 80);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_5_Template_th_click_14_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSortChange([{ field: "lastModified", dir: ctx_r1.sort[0].field === "lastModified" && ctx_r1.sort[0].dir === "asc" ? "desc" : "asc" }])); });
-    i0.ɵɵelementStart(15, "span");
-    i0.ɵɵtext(16, "Modified");
+    i0.ɵɵelement(19, "i", 123);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(17, "i", 77);
+    i0.ɵɵelementStart(20, "th", 127);
+    i0.ɵɵtext(21, "Actions");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "tbody");
-    i0.ɵɵrepeaterCreate(19, FileGridComponent_Conditional_5_For_20_Template, 14, 8, "tr", 81, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(22, "tbody");
+    i0.ɵɵrepeaterCreate(23, FileGridComponent_Conditional_7_For_24_Template, 21, 13, "tr", 128, _forTrack3);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(7);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("checked", ctx_r1.areAllSelected());
+    i0.ɵɵadvance(4);
     i0.ɵɵclassProp("fa-caret-up", ctx_r1.sort[0].field === "name" && ctx_r1.sort[0].dir === "asc")("fa-caret-down", ctx_r1.sort[0].field === "name" && ctx_r1.sort[0].dir === "desc")("fa-sort", ctx_r1.sort[0].field !== "name");
     i0.ɵɵadvance(6);
     i0.ɵɵclassProp("fa-caret-up", ctx_r1.sort[0].field === "size" && ctx_r1.sort[0].dir === "asc")("fa-caret-down", ctx_r1.sort[0].field === "size" && ctx_r1.sort[0].dir === "desc")("fa-sort", ctx_r1.sort[0].field !== "size");
     i0.ɵɵadvance(4);
     i0.ɵɵclassProp("fa-caret-up", ctx_r1.sort[0].field === "lastModified" && ctx_r1.sort[0].dir === "asc")("fa-caret-down", ctx_r1.sort[0].field === "lastModified" && ctx_r1.sort[0].dir === "desc")("fa-sort", ctx_r1.sort[0].field !== "lastModified");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r1.filteredItems);
 } }
-function FileGridComponent_Conditional_6_For_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵtext(1);
+function FileGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-empty-state", 146);
+    i0.ɵɵlistener("Action", function FileGridComponent_Conditional_8_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
     i0.ɵɵelementEnd();
+} }
+function FileGridComponent_Conditional_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtext(0, " (filtered) ");
+} }
+function FileGridComponent_Conditional_9_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 149);
+    i0.ɵɵelement(1, "i", 150);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const item_r15 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(ctx_r1.formatFileSize(item_r15.size));
-} }
-function FileGridComponent_Conditional_6_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 96);
-    i0.ɵɵtext(1, "Folder");
-    i0.ɵɵelementEnd();
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ctx_r1.account.account.Name, " (", ctx_r1.account.provider.Name, ")");
 } }
-function FileGridComponent_Conditional_6_For_3_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 93);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_6_For_3_Template_div_click_0_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTileClick(item_r15, $event)); })("dblclick", function FileGridComponent_Conditional_6_For_3_Template_div_dblclick_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onItemDoubleClick(item_r15)); });
-    i0.ɵɵelementStart(1, "div", 94);
-    i0.ɵɵelement(2, "i");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 95);
-    i0.ɵɵtext(4);
+function FileGridComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 9)(1, "span", 147);
+    i0.ɵɵtext(2);
+    i0.ɵɵconditionalCreate(3, FileGridComponent_Conditional_9_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_6_For_3_Conditional_5_Template, 2, 1, "div", 96);
-    i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_6_For_3_Conditional_6_Template, 2, 0, "div", 96);
+    i0.ɵɵtemplate(4, FileGridComponent_Conditional_9_div_4_Template, 4, 2, "div", 148);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const item_r15 = ctx.$implicit;
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.includes(item_r15.key));
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassMap(ctx_r1.getItemIcon(item_r15));
+    const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r15.name);
+    i0.ɵɵtextInterpolate2(" ", ctx_r1.filteredItems.length, " item", ctx_r1.filteredItems.length === 1 ? "" : "s", " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.type === "file" ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.searchQuery ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(item_r15.type === "folder" ? 6 : -1);
+    i0.ɵɵproperty("ngIf", ctx_r1.account);
 } }
-function FileGridComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 6)(1, "div", 91);
-    i0.ɵɵrepeaterCreate(2, FileGridComponent_Conditional_6_For_3_Template, 7, 7, "div", 92, i0.ɵɵrepeaterTrackByIdentity);
+function FileGridComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 151);
+    i0.ɵɵelement(2, "i", 152);
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4, "Drop files here to upload");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "p");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate1("Files will be stored in ", ctx_r1.folderPath || "Root");
+} }
+function FileGridComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11)(1, "div", 153)(2, "div", 154);
+    i0.ɵɵelement(3, "i", 155);
+    i0.ɵɵelementStart(4, "span", 156);
+    i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 157);
+    i0.ɵɵelement(7, "div", 158);
+    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1("Uploading ", ctx_r1.uploadingFileName, "...");
     i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.filteredItems);
+    i0.ɵɵstyleProp("width", ctx_r1.uploadProgress, "%");
 } }
-function FileGridComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 97);
-    i0.ɵɵlistener("Action", function FileGridComponent_Conditional_7_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
+function FileGridComponent_Conditional_12_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵelement(1, "mj-loading", 171);
     i0.ɵɵelementEnd();
 } }
-function FileGridComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 98)(2, "button", 99);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadClick()); });
-    i0.ɵɵelement(3, "i", 100);
-    i0.ɵɵtext(4, " Upload ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 99);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNewFolderClick()); });
-    i0.ɵɵelement(6, "i", 101);
-    i0.ɵɵtext(7, " New Folder ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "button", 102);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDownloadClick()); });
-    i0.ɵɵelement(9, "i", 103);
-    i0.ɵɵtext(10, " Download ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 102);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onRenameClick()); });
-    i0.ɵɵelement(12, "i", 104);
-    i0.ɵɵtext(13, " Rename ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 102);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopyClick()); });
-    i0.ɵɵelement(15, "i", 105);
-    i0.ɵɵtext(16, " Copy ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 106);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCopyToAccountClick()); });
-    i0.ɵɵelement(18, "i", 107);
-    i0.ɵɵtext(19, " Copy to... ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 102);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onMoveClick()); });
-    i0.ɵɵelement(21, "i", 108);
-    i0.ɵɵtext(22, " Move ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "button", 102);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onDeleteClick()); });
-    i0.ɵɵelement(24, "i", 109);
-    i0.ɵɵtext(25, " Delete ");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(26, "div", 110)(27, "div", 111)(28, "button", 112);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "list"); });
-    i0.ɵɵelement(29, "i", 113);
+function FileGridComponent_Conditional_12_Conditional_20_Case_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 172);
+    i0.ɵɵelement(1, "img", 176);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "button", 114);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_8_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r17); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.viewMode = "grid"); });
-    i0.ɵɵelement(31, "i", 115);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "span", 116);
-    i0.ɵɵtext(33);
-    i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    let tmp_4_0;
-    const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1 || ((tmp_4_0 = ctx_r1.getSelectedItem()) == null ? null : tmp_4_0.type) === "folder");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length !== 1);
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("disabled", ctx_r1.selectedItems.length === 0);
-    i0.ɵɵadvance(5);
-    i0.ɵɵclassProp("active", ctx_r1.viewMode === "list");
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r1.previewUrl, i0.ɵɵsanitizeUrl)("alt", ctx_r1.previewItem.name);
+} }
+function FileGridComponent_Conditional_12_Conditional_20_Case_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 173);
+    i0.ɵɵelement(1, "iframe", 177);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r1.previewUrl, i0.ɵɵsanitizeResourceUrl);
+} }
+function FileGridComponent_Conditional_12_Conditional_20_Case_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 174);
+    i0.ɵɵelement(1, "video", 178);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("src", ctx_r1.previewUrl, i0.ɵɵsanitizeUrl);
+} }
+function FileGridComponent_Conditional_12_Conditional_20_Case_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 175);
+    i0.ɵɵelement(1, "i", 179)(2, "audio", 180);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r1.viewMode === "grid");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2(" ", ctx_r1.filteredItems.length, " ", ctx_r1.filteredItems.length === 1 ? "item" : "filteredItems", " ");
+    i0.ɵɵproperty("src", ctx_r1.previewUrl);
 } }
-function FileGridComponent_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 117)(2, "div", 118);
-    i0.ɵɵelement(3, "i", 107);
+function FileGridComponent_Conditional_12_Conditional_20_Case_4_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 170);
+    i0.ɵɵelement(1, "i", 181);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Preview is not supported for this file type.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "h2", 119);
-    i0.ɵɵtext(5, "Drop files to upload");
+    i0.ɵɵelementStart(6, "button", 182);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Conditional_20_Case_4_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.downloadFile(ctx_r1.previewItem)); });
+    i0.ɵɵelement(7, "i", 57);
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9, "Download File");
     i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getItemIcon(ctx_r1.previewItem));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.previewItem.name);
 } }
-function FileGridComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "div", 120)(2, "div", 121);
-    i0.ɵɵelement(3, "i", 38);
-    i0.ɵɵelementStart(4, "span");
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 122);
-    i0.ɵɵelement(7, "div", 123);
+function FileGridComponent_Conditional_12_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, FileGridComponent_Conditional_12_Conditional_20_Case_0_Template, 2, 2, "div", 172)(1, FileGridComponent_Conditional_12_Conditional_20_Case_1_Template, 2, 1, "div", 173)(2, FileGridComponent_Conditional_12_Conditional_20_Case_2_Template, 2, 1, "div", 174)(3, FileGridComponent_Conditional_12_Conditional_20_Case_3_Template, 3, 1, "div", 175)(4, FileGridComponent_Conditional_12_Conditional_20_Case_4_Template, 10, 3, "div", 170);
+} if (rf & 2) {
+    let tmp_2_0;
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵconditional((tmp_2_0 = ctx_r1.previewMediaType) === "image" ? 0 : tmp_2_0 === "pdf" ? 1 : tmp_2_0 === "video" ? 2 : tmp_2_0 === "audio" ? 3 : 4);
+} }
+function FileGridComponent_Conditional_12_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 170);
+    i0.ɵɵelement(1, "i", 183);
+    i0.ɵɵelementStart(2, "h4");
+    i0.ɵɵtext(3, "Preview unavailable");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Could not generate a preview link for this file.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "button", 182);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Conditional_21_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.downloadFile(ctx_r1.previewItem)); });
+    i0.ɵɵelement(7, "i", 57);
+    i0.ɵɵelementStart(8, "span");
+    i0.ɵɵtext(9, "Download File");
+    i0.ɵɵelementEnd()()();
+} }
+function FileGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 159);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePreview()); });
+    i0.ɵɵelementStart(1, "div", 160);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 161)(3, "div", 162)(4, "div", 133);
+    i0.ɵɵelement(5, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div")(7, "h3", 163);
+    i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 124);
-    i0.ɵɵtext(9);
+    i0.ɵɵelementStart(9, "span", 164);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(11, "div", 165)(12, "button", 166);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.downloadFile(ctx_r1.previewItem)); });
+    i0.ɵɵelement(13, "i", 57);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15, "Download");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "button", 167);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r26); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePreview()); });
+    i0.ɵɵelement(17, "i", 45);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(18, "div", 168);
+    i0.ɵɵconditionalCreate(19, FileGridComponent_Conditional_12_Conditional_19_Template, 2, 0, "div", 169)(20, FileGridComponent_Conditional_12_Conditional_20_Template, 5, 1)(21, FileGridComponent_Conditional_12_Conditional_21_Template, 10, 0, "div", 170);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(5);
-    i0.ɵɵtextInterpolate1("Uploading ", ctx_r1.uploadingFileName, "...");
-    i0.ɵɵadvance(2);
-    i0.ɵɵstyleProp("width", ctx_r1.uploadProgress, "%");
+    i0.ɵɵadvance(4);
+    i0.ɵɵclassMap(ctx_r1.getItemColorClass(ctx_r1.previewItem));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getItemIcon(ctx_r1.previewItem));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.previewItem.name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", ctx_r1.uploadProgress, "%");
+    i0.ɵɵtextInterpolate2("", ctx_r1.formatFileSize(ctx_r1.previewItem.size), " \u2022 ", ctx_r1.formatDate(ctx_r1.previewItem.lastModified));
+    i0.ɵɵadvance(9);
+    i0.ɵɵconditional(ctx_r1.isLoadingPreview ? 19 : ctx_r1.previewUrl ? 20 : 21);
 } }
-function FileGridComponent_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_13_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
 } }
-function FileGridComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
-    i0.ɵɵelementStart(1, "div", 126);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r18); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 127)(3, "h3");
+function FileGridComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r29 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 184);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
+    i0.ɵɵelementStart(1, "div", 185);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r29); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 186)(3, "h3", 163);
     i0.ɵɵtext(4, "Create New Folder");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 128);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(5, "button", 187);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
+    i0.ɵɵelement(6, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 129)(8, "label");
+    i0.ɵɵelementStart(7, "div", 188)(8, "label", 189);
     i0.ɵɵtext(9, "Folder name:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "input", 130);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_11_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newFolderName, $event) || (ctx_r1.newFolderName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_11_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
+    i0.ɵɵelementStart(10, "input", 190);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_13_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newFolderName, $event) || (ctx_r1.newFolderName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_13_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 131)(12, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
-    i0.ɵɵtext(13, "Cancel");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_11_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r18); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
-    i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_11_Conditional_15_Template, 1, 0, "i", 38);
-    i0.ɵɵtext(16);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(11, "div", 191)(12, "button", 192);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelNewFolder()); });
+    i0.ɵɵtext(13, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 193);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r29); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCreateFolder()); });
+    i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_13_Conditional_15_Template, 1, 0, "i", 72);
+    i0.ɵɵelementStart(16, "span");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(10);
@@ -574,48 +823,51 @@ function FileGridComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("disabled", !ctx_r1.newFolderName.trim() || ctx_r1.isCreatingFolder);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isCreatingFolder ? 15 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isCreatingFolder ? "Creating..." : "Create", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isCreatingFolder ? "Creating..." : "Create");
 } }
-function FileGridComponent_Conditional_12_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 133);
-    i0.ɵɵtext(1, "This will delete the folder and all its contents.");
-    i0.ɵɵelementEnd();
+function FileGridComponent_Conditional_14_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 195);
+    i0.ɵɵelement(1, "i", 197);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "This will delete the folder and all its contents.");
+    i0.ɵɵelementEnd()();
 } }
-function FileGridComponent_Conditional_12_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_14_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
 } }
-function FileGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
-    i0.ɵɵelementStart(1, "div", 126);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r19); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 127)(3, "h3");
+function FileGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 184);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
+    i0.ɵɵelementStart(1, "div", 185);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r30); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 186)(3, "h3", 163);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 128);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(5, "button", 187);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
+    i0.ɵɵelement(6, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 129)(8, "p");
-    i0.ɵɵtext(9, "Are you sure you want to delete ");
+    i0.ɵɵelementStart(7, "div", 188)(8, "p", 194);
+    i0.ɵɵtext(9, " Are you sure you want to delete ");
     i0.ɵɵelementStart(10, "strong");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵtext(12, "?");
+    i0.ɵɵtext(12, "? ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, FileGridComponent_Conditional_12_Conditional_13_Template, 2, 0, "p", 133);
+    i0.ɵɵconditionalCreate(13, FileGridComponent_Conditional_14_Conditional_13_Template, 4, 0, "div", 195);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 131)(15, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
-    i0.ɵɵtext(16, "Cancel");
+    i0.ɵɵelementStart(14, "div", 191)(15, "button", 192);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelDelete()); });
+    i0.ɵɵtext(16, " Cancel ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "button", 134);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_12_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmDelete()); });
-    i0.ɵɵconditionalCreate(18, FileGridComponent_Conditional_12_Conditional_18_Template, 1, 0, "i", 38);
-    i0.ɵɵtext(19);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(17, "button", 196);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmDelete()); });
+    i0.ɵɵconditionalCreate(18, FileGridComponent_Conditional_14_Conditional_18_Template, 1, 0, "i", 72);
+    i0.ɵɵelementStart(19, "span");
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
@@ -630,41 +882,42 @@ function FileGridComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("disabled", ctx_r1.isDeleting);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isDeleting ? 18 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isDeleting ? "Deleting..." : "Delete", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isDeleting ? "Deleting..." : "Delete");
 } }
-function FileGridComponent_Conditional_13_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_15_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
 } }
-function FileGridComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
-    i0.ɵɵelementStart(1, "div", 126);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r20); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 127)(3, "h3");
+function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    const _r31 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 184);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
+    i0.ɵɵelementStart(1, "div", 185);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r31); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 186)(3, "h3", 163);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 128);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(5, "button", 187);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
+    i0.ɵɵelement(6, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 129)(8, "label");
+    i0.ɵɵelementStart(7, "div", 188)(8, "label", 189);
     i0.ɵɵtext(9, "New name:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "input", 135);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_13_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newItemName, $event) || (ctx_r1.newItemName = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_13_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
+    i0.ɵɵelementStart(10, "input", 198);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_15_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.newItemName, $event) || (ctx_r1.newItemName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_15_Template_input_keydown_enter_10_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 131)(12, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
-    i0.ɵɵtext(13, "Cancel");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_13_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
-    i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_13_Conditional_15_Template, 1, 0, "i", 38);
-    i0.ɵɵtext(16);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(11, "div", 191)(12, "button", 192);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelRename()); });
+    i0.ɵɵtext(13, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 193);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmRename()); });
+    i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_15_Conditional_15_Template, 1, 0, "i", 72);
+    i0.ɵɵelementStart(16, "span");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
@@ -678,46 +931,47 @@ function FileGridComponent_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("disabled", ctx_r1.isRenaming || !ctx_r1.newItemName.trim());
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isRenaming ? 15 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isRenaming ? "Renaming..." : "Rename", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isRenaming ? "Renaming..." : "Rename");
 } }
-function FileGridComponent_Conditional_14_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_16_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
 } }
-function FileGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
-    i0.ɵɵelementStart(1, "div", 126);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r21); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 127)(3, "h3");
+function FileGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r32 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 159);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
+    i0.ɵɵelementStart(1, "div", 199);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r32); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 161)(3, "h3", 163);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 128);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(5, "button", 200);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
+    i0.ɵɵelement(6, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 129)(8, "p");
-    i0.ɵɵtext(9, "Copying: ");
+    i0.ɵɵelementStart(7, "div", 201)(8, "p", 194);
+    i0.ɵɵtext(9, "Copying ");
     i0.ɵɵelementStart(10, "strong");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "label");
-    i0.ɵɵtext(13, "Destination path:");
+    i0.ɵɵelementStart(12, "label", 189);
+    i0.ɵɵtext(13, "Destination Path");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "input", 136);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_14_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyDestinationPath, $event) || (ctx_r1.copyDestinationPath = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_14_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
+    i0.ɵɵelementStart(14, "input", 202);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_16_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyDestinationPath, $event) || (ctx_r1.copyDestinationPath = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_16_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 131)(16, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
-    i0.ɵɵtext(17, "Cancel");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_14_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
-    i0.ɵɵconditionalCreate(19, FileGridComponent_Conditional_14_Conditional_19_Template, 1, 0, "i", 38);
-    i0.ɵɵtext(20);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(15, "div", 203)(16, "button", 192);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopy()); });
+    i0.ɵɵtext(17, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 193);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopy()); });
+    i0.ɵɵconditionalCreate(19, FileGridComponent_Conditional_16_Conditional_19_Template, 1, 0, "i", 72);
+    i0.ɵɵelementStart(20, "span");
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
@@ -733,49 +987,47 @@ function FileGridComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("disabled", ctx_r1.isCopying || !ctx_r1.copyDestinationPath.trim());
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.isCopying ? 19 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isCopying ? "Copying..." : "Copy", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isCopying ? "Copying..." : "Copy");
 } }
-function FileGridComponent_Conditional_15_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_17_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
 } }
-function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
-    i0.ɵɵelementStart(1, "div", 126);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r22); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 127)(3, "h3");
+function FileGridComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    const _r33 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 159);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
+    i0.ɵɵelementStart(1, "div", 199);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_17_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r33); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 161)(3, "h3", 163);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 128);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(5, "button", 200);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_17_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
+    i0.ɵɵelement(6, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 129)(8, "p");
-    i0.ɵɵtext(9, "Moving: ");
+    i0.ɵɵelementStart(7, "div", 201)(8, "p", 194);
+    i0.ɵɵtext(9, "Moving ");
     i0.ɵɵelementStart(10, "strong");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "label");
-    i0.ɵɵtext(13, "Destination folder path:");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "input", 137);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_15_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.moveDestinationPath, $event) || (ctx_r1.moveDestinationPath = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_15_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
+    i0.ɵɵelementStart(12, "label", 189);
+    i0.ɵɵtext(13, "Destination Folder");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "p", 138);
-    i0.ɵɵtext(16);
+    i0.ɵɵelementStart(14, "input", 204);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_17_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.moveDestinationPath, $event) || (ctx_r1.moveDestinationPath = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_17_Template_input_keydown_enter_14_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 131)(18, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
-    i0.ɵɵtext(19, "Cancel");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_15_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
-    i0.ɵɵconditionalCreate(21, FileGridComponent_Conditional_15_Conditional_21_Template, 1, 0, "i", 38);
-    i0.ɵɵtext(22);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(15, "div", 203)(16, "button", 192);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_17_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelMove()); });
+    i0.ɵɵtext(17, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(18, "button", 193);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_17_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmMove()); });
+    i0.ɵɵconditionalCreate(19, FileGridComponent_Conditional_17_Conditional_19_Template, 1, 0, "i", 72);
+    i0.ɵɵelementStart(20, "span");
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
@@ -786,103 +1038,102 @@ function FileGridComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.moveDestinationPath);
     i0.ɵɵproperty("disabled", ctx_r1.isMoving);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate2(" File will be moved to: ", ctx_r1.moveDestinationPath, "", ctx_r1.itemToMove.name, " ");
-    i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isMoving);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isMoving || !ctx_r1.moveDestinationPath.trim());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isMoving ? 21 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isMoving ? "Moving..." : "Move", " ");
+    i0.ɵɵconditional(ctx_r1.isMoving ? 19 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isMoving ? "Moving..." : "Move");
 } }
-function FileGridComponent_Conditional_16_For_20_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 141)(1, "input", 145);
-    i0.ɵɵlistener("change", function FileGridComponent_Conditional_16_For_20_Template_input_change_1_listener() { const a_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDestinationAccount(a_r25.account.ID)); });
+function FileGridComponent_Conditional_18_For_19_Template(rf, ctx) { if (rf & 1) {
+    const _r35 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 207)(1, "input", 211);
+    i0.ɵɵlistener("change", function FileGridComponent_Conditional_18_For_19_Template_input_change_1_listener() { const a_r36 = i0.ɵɵrestoreView(_r35).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleDestinationAccount(a_r36.account.ID)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "label", 146);
+    i0.ɵɵelementStart(2, "span", 212);
     i0.ɵɵtext(3);
-    i0.ɵɵelementStart(4, "span", 147);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 213);
     i0.ɵɵtext(5);
-    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const a_r25 = ctx.$implicit;
+    const a_r36 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("for", "dest-acc-" + a_r36.account.ID);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("id", "dest-account-" + a_r25.account.ID)("checked", ctx_r1.isDestinationAccountSelected(a_r25.account.ID))("disabled", ctx_r1.isCopyingToAccount);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("for", "dest-account-" + a_r25.account.ID);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", a_r25.account.Name, " ");
+    i0.ɵɵproperty("id", "dest-acc-" + a_r36.account.ID)("checked", ctx_r1.isDestinationAccountSelected(a_r36.account.ID))("disabled", ctx_r1.isCopyingToAccount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(a_r36.account.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(a_r25.provider.Name);
+    i0.ɵɵtextInterpolate(a_r36.provider.Name);
 } }
-function FileGridComponent_Conditional_16_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 144);
-    i0.ɵɵelement(1, "i", 38);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
+function FileGridComponent_Conditional_18_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 210);
+    i0.ɵɵelement(1, "i", 72);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate3(" Copying to ", ctx_r1.copyToAccountProgress.currentAccount, " (", ctx_r1.copyToAccountProgress.current, "/", ctx_r1.copyToAccountProgress.total, ")... ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate3("Copying to ", ctx_r1.copyToAccountProgress.currentAccount, " (", ctx_r1.copyToAccountProgress.current, "/", ctx_r1.copyToAccountProgress.total, ")...");
 } }
-function FileGridComponent_Conditional_16_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 38);
+function FileGridComponent_Conditional_18_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
 } }
-function FileGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
-    i0.ɵɵelementStart(1, "div", 126);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r23); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 127)(3, "h3");
+function FileGridComponent_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r34 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 159);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_18_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
+    i0.ɵɵelementStart(1, "div", 205);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_18_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r34); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 161)(3, "h3", 163);
     i0.ɵɵtext(4, "Copy to Another Account");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 128);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
-    i0.ɵɵelement(6, "i", 30);
+    i0.ɵɵelementStart(5, "button", 200);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_18_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
+    i0.ɵɵelement(6, "i", 45);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 129)(8, "p");
-    i0.ɵɵtext(9, "Copying: ");
+    i0.ɵɵelementStart(7, "div", 201)(8, "p", 194);
+    i0.ɵɵtext(9, " Copying ");
     i0.ɵɵelementStart(10, "strong");
     i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtext(12, " from ");
+    i0.ɵɵelementStart(13, "strong");
+    i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "p", 139);
-    i0.ɵɵtext(13, " From: ");
-    i0.ɵɵelementStart(14, "strong");
-    i0.ɵɵtext(15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "label");
-    i0.ɵɵtext(17, "Select destination account(s):");
+    i0.ɵɵelementStart(15, "label", 189);
+    i0.ɵɵtext(16, "Select Destination Storage Accounts");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 140);
-    i0.ɵɵrepeaterCreate(19, FileGridComponent_Conditional_16_For_20_Template, 6, 6, "div", 141, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(17, "div", 206);
+    i0.ɵɵrepeaterCreate(18, FileGridComponent_Conditional_18_For_19_Template, 6, 6, "label", 207, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "label", 142);
-    i0.ɵɵtext(22, "Destination filename:");
+    i0.ɵɵelementStart(20, "label", 208);
+    i0.ɵɵtext(21, "Destination Filename");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "input", 143);
-    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_16_Template_input_ngModelChange_23_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyToAccountDestinationPath, $event) || (ctx_r1.copyToAccountDestinationPath = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_16_Template_input_keydown_enter_23_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
+    i0.ɵɵelementStart(22, "input", 209);
+    i0.ɵɵtwoWayListener("ngModelChange", function FileGridComponent_Conditional_18_Template_input_ngModelChange_22_listener($event) { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.copyToAccountDestinationPath, $event) || (ctx_r1.copyToAccountDestinationPath = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.enter", function FileGridComponent_Conditional_18_Template_input_keydown_enter_22_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(24, FileGridComponent_Conditional_16_Conditional_24_Template, 3, 3, "div", 144);
+    i0.ɵɵconditionalCreate(23, FileGridComponent_Conditional_18_Conditional_23_Template, 4, 3, "div", 210);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 131)(26, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
-    i0.ɵɵtext(27, "Cancel");
+    i0.ɵɵelementStart(24, "div", 203)(25, "button", 192);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_18_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancelCopyToAccount()); });
+    i0.ɵɵtext(26, " Cancel ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "button", 132);
-    i0.ɵɵlistener("click", function FileGridComponent_Conditional_16_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
-    i0.ɵɵconditionalCreate(29, FileGridComponent_Conditional_16_Conditional_29_Template, 1, 0, "i", 38);
+    i0.ɵɵelementStart(27, "button", 193);
+    i0.ɵɵlistener("click", function FileGridComponent_Conditional_18_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r34); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onConfirmCopyToAccount()); });
+    i0.ɵɵconditionalCreate(28, FileGridComponent_Conditional_18_Conditional_28_Template, 1, 0, "i", 72);
+    i0.ɵɵelementStart(29, "span");
     i0.ɵɵtext(30);
-    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(11);
     i0.ɵɵtextInterpolate(ctx_r1.itemToCopyToProvider.name);
-    i0.ɵɵadvance(4);
+    i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.account == null ? null : ctx_r1.account.account == null ? null : ctx_r1.account.account.Name);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r1.availableAccounts);
@@ -890,15 +1141,15 @@ function FileGridComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.copyToAccountDestinationPath);
     i0.ɵɵproperty("disabled", ctx_r1.isCopyingToAccount);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.copyToAccountProgress ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.copyToAccountProgress ? 23 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isCopyingToAccount);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.isCopyingToAccount || ctx_r1.selectedDestinationAccounts.size === 0 || !ctx_r1.copyToAccountDestinationPath.trim());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isCopyingToAccount ? 29 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r1.isCopyingToAccount ? "Copying..." : "Copy to " + ctx_r1.selectedDestinationAccounts.size + " account" + (ctx_r1.selectedDestinationAccounts.size !== 1 ? "s" : ""), " ");
+    i0.ɵɵconditional(ctx_r1.isCopyingToAccount ? 28 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isCopyingToAccount ? "Copying..." : "Copy to " + ctx_r1.selectedDestinationAccounts.size + " Account" + (ctx_r1.selectedDestinationAccounts.size !== 1 ? "s" : ""));
 } }
 /**
  * Displays files and folders in a grid/list view.
@@ -1023,10 +1274,22 @@ export class FileGridComponent {
     selectedSearchProviders = new Set();
     isSearching = false;
     multiProviderSearchResults = null;
+    /**
+     * Preview modal state
+     */
+    showPreviewModal = false;
+    previewItem = null;
+    previewUrl = null;
+    isLoadingPreview = false;
+    previewMediaType = 'unknown';
     /**
      * GraphQL client for file storage operations
      */
     storageClient;
+    /**
+     * Global notifications service for user toast feedback
+     */
+    notifications = inject(MJNotificationService);
     constructor() {
         this.storageClient = new GraphQLFileStorageClient(GraphQLDataProvider.Instance);
     }
@@ -1250,7 +1513,7 @@ export class FileGridComponent {
     }
     /**
      * Handles double-click on an item
-     * For folders, navigate into them. For files, open/download them.
+     * For folders, navigate into them. For files, open in-browser preview.
      */
     onItemDoubleClick(item) {
         if (item.type === 'folder') {
@@ -1259,8 +1522,8 @@ export class FileGridComponent {
             this.folderNavigate.emit(item.key);
         }
         else {
-            // Download file
-            this.downloadFile(item);
+            // Open in-browser preview
+            this.openPreview(item);
         }
     }
     /**
@@ -1275,31 +1538,18 @@ export class FileGridComponent {
             const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, item.key);
             console.log('[FileGrid] Download URL created:', downloadUrl ? 'success' : 'failed');
             if (downloadUrl) {
-                // Trigger browser download
-                const link = document.createElement('a');
-                link.href = downloadUrl;
-                link.download = item.name;
-                link.target = '_blank'; // Open in new tab as fallback
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
-                console.log('[FileGrid] File download initiated:', item.name);
+                // Open file in new browser tab for viewing/download
+                window.open(downloadUrl, '_blank', 'noopener,noreferrer');
+                this.notifications.CreateSimpleNotification(`Opening ${item.name}...`, 'info');
             }
             else {
-                console.error('[FileGrid] Failed to get download URL');
-                this.errorMessage = 'Failed to generate download URL';
+                this.notifications.CreateSimpleNotification('Failed to generate download URL', 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error downloading file:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to download file: ${errorMessage}`;
-            // Clear error after 5 seconds
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to download')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to download ${item.name}: ${errorMessage}`, 'error');
         }
     }
     /**
@@ -1464,7 +1714,7 @@ export class FileGridComponent {
         this.loadItems();
     }
     /**
-     * Uploads a single file
+     * Uploads a single file using server-side MJ Storage (supports all providers)
      */
     async uploadSingleFile(file, current, total) {
         if (!this.account) {
@@ -1474,39 +1724,35 @@ export class FileGridComponent {
         this.uploadingFileName = `${file.name} (${current}/${total})`;
         this.uploadProgress = 0;
         try {
-            // Construct the full object name with folder path
-            // Remove trailing slash from folderPath to avoid double slashes
-            let objectName;
-            if (this.folderPath) {
-                const cleanPath = this.folderPath.endsWith('/')
-                    ? this.folderPath.slice(0, -1)
-                    : this.folderPath;
-                objectName = `${cleanPath}/${file.name}`;
+            let cleanPath = '';
+            if (this.folderPath && this.folderPath !== '/') {
+                cleanPath = this.folderPath.endsWith('/') ? this.folderPath.slice(0, -1) : this.folderPath;
+                if (cleanPath.startsWith('/')) {
+                    cleanPath = cleanPath.substring(1);
+                }
             }
-            else {
-                objectName = file.name;
+            console.log('[FileGrid] Uploading file via MJ Storage:', { name: file.name, path: cleanPath });
+            const base64Data = await this.readFileAsBase64(file);
+            const result = await this.storageClient.UploadFile({
+                FileName: file.name,
+                Base64Data: base64Data,
+                MimeType: file.type || 'application/octet-stream',
+                AccountID: this.account.account.ID,
+                PathPrefix: cleanPath || undefined,
+            });
+            if (!result.Success) {
+                throw new Error(result.ErrorMessage || 'Upload failed');
             }
-            console.log('[FileGrid] Getting upload URL for:', objectName);
-            // Get pre-authenticated upload URL
-            const uploadData = await this.storageClient.CreatePreAuthUploadUrl(this.account.account.ID, objectName, file.type || 'application/octet-stream');
-            console.log('[FileGrid] Got upload URL:', uploadData.uploadUrl);
-            // Upload the file using XMLHttpRequest to track progress
-            await this.uploadFileToUrl(file, uploadData.uploadUrl, this.account?.provider?.ServerDriverKey);
-            console.log('[FileGrid] File uploaded successfully:', file.name);
+            this.uploadProgress = 100;
+            console.log('[FileGrid] File uploaded successfully via MJ Storage:', file.name);
         }
         catch (error) {
             console.error('[FileGrid] Error uploading file:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            // Check if this is an unsupported operation error (e.g., Google Drive doesn't support pre-auth uploads)
-            if (errorMessage.includes('not supported')) {
-                this.errorMessage = `Upload not supported for ${this.account?.account.Name || 'this account'}. Try using a different storage account.`;
-            }
-            else {
-                this.errorMessage = `Failed to upload ${file.name}: ${errorMessage}`;
-            }
+            this.errorMessage = `Failed to upload ${file.name}: ${errorMessage}`;
             // Clear error after 5 seconds
             setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to upload') || this.errorMessage?.startsWith('Upload not supported')) {
+                if (this.errorMessage?.startsWith('Failed to upload')) {
                     this.errorMessage = null;
                 }
             }, 5000);
@@ -1517,6 +1763,26 @@ export class FileGridComponent {
             this.uploadingFileName = '';
         }
     }
+    /**
+     * Reads a browser File object as a base64 encoded string
+     */
+    readFileAsBase64(file) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = () => {
+                const result = reader.result;
+                if (typeof result === 'string') {
+                    const base64 = result.substring(result.indexOf(',') + 1);
+                    resolve(base64);
+                }
+                else {
+                    reject(new Error('Failed to read file as base64 string'));
+                }
+            };
+            reader.onerror = (err) => reject(err);
+            reader.readAsDataURL(file);
+        });
+    }
     /**
      * Uploads file to the pre-authenticated URL with progress tracking
      */
@@ -1596,28 +1862,24 @@ export class FileGridComponent {
             const success = await this.storageClient.CreateDirectory(this.account.account.ID, folderPath);
             if (success) {
                 console.log('[FileGrid] Folder created successfully:', folderPath);
+                const createdName = this.newFolderName.trim();
                 // Close dialog and refresh
                 this.showNewFolderDialog = false;
                 this.newFolderName = '';
+                this.notifications.CreateSimpleNotification(`Created folder "${createdName}"`, 'success');
                 // Notify parent that folder structure changed
                 this.folderStructureChanged.emit();
                 // Refresh the file grid
                 this.loadItems();
             }
             else {
-                this.errorMessage = 'Failed to create folder';
+                this.notifications.CreateSimpleNotification('Failed to create folder', 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error creating folder:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to create folder: ${errorMessage}`;
-            // Clear error after 5 seconds
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to create')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to create folder: ${errorMessage}`, 'error');
         }
         finally {
             this.isCreatingFolder = false;
@@ -1666,17 +1928,13 @@ export class FileGridComponent {
                 console.log('[FileGrid] Item deleted successfully:', itemPath);
                 // Check if we deleted a folder (before clearing itemToDelete)
                 const wasFolder = this.itemToDelete.type === 'folder';
-                console.log('[FileGrid] Item details:', {
-                    type: this.itemToDelete.type,
-                    name: this.itemToDelete.name,
-                    key: this.itemToDelete.key,
-                    wasFolder
-                });
+                const deletedName = this.itemToDelete.name;
                 // Close dialog
                 this.showDeleteDialog = false;
                 this.itemToDelete = null;
                 // Clear selection
                 this.selectedItems = [];
+                this.notifications.CreateSimpleNotification(`Deleted "${deletedName}"`, 'info');
                 // If we deleted a folder, notify parent that folder structure changed
                 if (wasFolder) {
                     console.log('[FileGrid] Emitting folderStructureChanged event');
@@ -1688,19 +1946,13 @@ export class FileGridComponent {
             }
             else {
                 console.error('[FileGrid] Delete operation returned false');
-                this.errorMessage = `Failed to delete ${this.itemToDelete.type}`;
+                this.notifications.CreateSimpleNotification(`Failed to delete ${this.itemToDelete.type}`, 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error deleting item:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to delete: ${errorMessage}`;
-            // Clear error after 5 seconds
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to delete')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to delete: ${errorMessage}`, 'error');
         }
         finally {
             this.isDeleting = false;
@@ -1760,12 +2012,15 @@ export class FileGridComponent {
                 console.log('[FileGrid] Item renamed successfully:', { oldPath, newPath });
                 // Check if we renamed a folder (before clearing itemToRename)
                 const wasFolder = this.itemToRename.type === 'folder';
+                const oldName = this.itemToRename.name;
+                const newName = this.newItemName.trim();
                 // Close dialog
                 this.showRenameDialog = false;
                 this.itemToRename = null;
                 this.newItemName = '';
                 // Clear selection
                 this.selectedItems = [];
+                this.notifications.CreateSimpleNotification(`Renamed "${oldName}" to "${newName}"`, 'success');
                 // If we renamed a folder, notify parent that folder structure changed
                 if (wasFolder) {
                     console.log('[FileGrid] Emitting folderStructureChanged event');
@@ -1777,19 +2032,13 @@ export class FileGridComponent {
             }
             else {
                 console.error('[FileGrid] Rename operation returned false');
-                this.errorMessage = `Failed to rename ${this.itemToRename.type}`;
+                this.notifications.CreateSimpleNotification(`Failed to rename ${this.itemToRename.type}`, 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error renaming item:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to rename: ${errorMessage}`;
-            // Clear error after 5 seconds
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to rename')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to rename: ${errorMessage}`, 'error');
         }
         finally {
             this.isRenaming = false;
@@ -1811,12 +2060,7 @@ export class FileGridComponent {
         }
         // Can only download files, not folders
         if (item.type === 'folder') {
-            this.errorMessage = 'Cannot download folders. Please select a file.';
-            setTimeout(() => {
-                if (this.errorMessage?.includes('Cannot download folders')) {
-                    this.errorMessage = null;
-                }
-            }, 3000);
+            this.notifications.CreateSimpleNotification('Cannot download folders. Please select a file.', 'warning');
             return;
         }
         if (!this.account) {
@@ -1827,30 +2071,18 @@ export class FileGridComponent {
             console.log('[FileGrid] Creating download URL for:', itemPath);
             const downloadUrl = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, itemPath);
             if (downloadUrl) {
-                console.log('[FileGrid] Download URL created, initiating download');
-                // Create a temporary anchor element to trigger download
-                const link = document.createElement('a');
-                link.href = downloadUrl;
-                link.download = item.name;
-                link.style.display = 'none';
-                document.body.appendChild(link);
-                link.click();
-                document.body.removeChild(link);
+                console.log('[FileGrid] Download URL created, opening in new tab');
+                window.open(downloadUrl, '_blank', 'noopener,noreferrer');
+                this.notifications.CreateSimpleNotification(`Opening ${item.name}...`, 'info');
             }
             else {
-                this.errorMessage = 'Failed to create download URL';
+                this.notifications.CreateSimpleNotification('Failed to create download URL', 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error downloading file:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to download: ${errorMessage}`;
-            // Clear error after 5 seconds
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to download')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to download: ${errorMessage}`, 'error');
         }
     }
     /**
@@ -1896,22 +2128,18 @@ export class FileGridComponent {
                 this.copyDestinationPath = '';
                 // Clear selection
                 this.selectedItems = [];
+                this.notifications.CreateSimpleNotification('Item copied successfully', 'success');
                 // Refresh the file grid
                 this.loadItems();
             }
             else {
-                this.errorMessage = 'Failed to copy item';
+                this.notifications.CreateSimpleNotification('Failed to copy item', 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error copying item:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to copy: ${errorMessage}`;
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to copy')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to copy: ${errorMessage}`, 'error');
         }
         finally {
             this.isCopying = false;
@@ -1965,6 +2193,7 @@ export class FileGridComponent {
                 this.moveDestinationPath = '';
                 // Clear selection
                 this.selectedItems = [];
+                this.notifications.CreateSimpleNotification('Item moved successfully', 'success');
                 // If we moved a folder, notify parent that folder structure changed
                 if (wasFolder) {
                     this.folderStructureChanged.emit();
@@ -1973,18 +2202,13 @@ export class FileGridComponent {
                 this.loadItems();
             }
             else {
-                this.errorMessage = 'Failed to move item';
+                this.notifications.CreateSimpleNotification('Failed to move item', 'error');
             }
         }
         catch (error) {
             console.error('[FileGrid] Error moving item:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Failed to move: ${errorMessage}`;
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Failed to move')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Failed to move: ${errorMessage}`, 'error');
         }
         finally {
             this.isMoving = false;
@@ -2043,12 +2267,7 @@ export class FileGridComponent {
             this.availableAccounts = engine.AccountsWithProviders
                 .filter(a => !UUIDsEqual(a.account.ID, this.account?.account.ID));
             if (this.availableAccounts.length === 0) {
-                this.errorMessage = 'No other storage accounts available';
-                setTimeout(() => {
-                    if (this.errorMessage?.includes('No other storage accounts')) {
-                        this.errorMessage = null;
-                    }
-                }, 3000);
+                this.notifications.CreateSimpleNotification('No other storage accounts available', 'warning');
                 return;
             }
             this.itemToCopyToProvider = item;
@@ -2059,7 +2278,7 @@ export class FileGridComponent {
         }
         catch (error) {
             console.error('[FileGrid] Error loading accounts:', error);
-            this.errorMessage = 'Failed to load storage accounts';
+            this.notifications.CreateSimpleNotification('Failed to load storage accounts', 'error');
         }
     }
     /**
@@ -2131,19 +2350,14 @@ export class FileGridComponent {
             }
             // Show results
             if (failedCopies.length === 0) {
-                this.errorMessage = `Successfully copied to ${successfulCopies.length} account${successfulCopies.length > 1 ? 's' : ''}: ${successfulCopies.join(', ')}`;
+                this.notifications.CreateSimpleNotification(`Successfully copied to ${successfulCopies.length} account${successfulCopies.length > 1 ? 's' : ''}`, 'success');
             }
             else if (successfulCopies.length === 0) {
-                this.errorMessage = `Copy failed for all accounts: ${failedCopies.map(f => `${f.account} (${f.error})`).join(', ')}`;
+                this.notifications.CreateSimpleNotification(`Copy failed for all accounts: ${failedCopies.map(f => f.account).join(', ')}`, 'error');
             }
             else {
-                this.errorMessage = `Copied to ${successfulCopies.length} account(s). Failed: ${failedCopies.map(f => f.account).join(', ')}`;
+                this.notifications.CreateSimpleNotification(`Copied to ${successfulCopies.length} account(s). Failed: ${failedCopies.map(f => f.account).join(', ')}`, 'warning');
             }
-            setTimeout(() => {
-                if (this.errorMessage?.includes('copied') || this.errorMessage?.includes('Copy failed')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
             // Close dialog
             this.showCopyToProviderDialog = false;
             this.itemToCopyToProvider = null;
@@ -2154,12 +2368,7 @@ export class FileGridComponent {
         catch (error) {
             console.error('[FileGrid] Error copying to accounts:', error);
             const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-            this.errorMessage = `Copy failed: ${errorMessage}`;
-            setTimeout(() => {
-                if (this.errorMessage?.startsWith('Copy failed')) {
-                    this.errorMessage = null;
-                }
-            }, 5000);
+            this.notifications.CreateSimpleNotification(`Copy failed: ${errorMessage}`, 'error');
         }
         finally {
             this.isCopyingToAccount = false;
@@ -2334,65 +2543,209 @@ export class FileGridComponent {
     formatSearchResultDate(dateStr) {
         return new Date(dateStr).toLocaleString();
     }
+    /**
+     * Determines media category for a file item
+     */
+    getMediaType(item) {
+        const ext = item.name.split('.').pop()?.toLowerCase() || '';
+        const mime = item.contentType?.toLowerCase() || '';
+        if (mime.startsWith('image/') || ['jpg', 'jpeg', 'png', 'gif', 'webp', 'svg', 'bmp', 'ico'].includes(ext)) {
+            return 'image';
+        }
+        if (mime === 'application/pdf' || ext === 'pdf') {
+            return 'pdf';
+        }
+        if (mime.startsWith('audio/') || ['mp3', 'wav', 'ogg', 'aac', 'flac', 'm4a'].includes(ext)) {
+            return 'audio';
+        }
+        if (mime.startsWith('video/') || ['mp4', 'webm', 'ogg', 'mov', 'avi', 'mkv'].includes(ext)) {
+            return 'video';
+        }
+        if (['json', 'ts', 'js', 'html', 'css', 'scss', 'xml', 'yaml', 'yml', 'md', 'sql', 'py', 'java', 'c', 'cpp'].includes(ext)) {
+            return 'code';
+        }
+        if (mime.startsWith('text/') || ['txt', 'log', 'csv'].includes(ext)) {
+            return 'text';
+        }
+        if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
+            return 'document';
+        }
+        return 'unknown';
+    }
+    /**
+     * Gets specific badge class for media type
+     */
+    getItemColorClass(item) {
+        if (item.type === 'folder') {
+            return 'mj-file-thumb--folder';
+        }
+        const mediaType = this.getMediaType(item);
+        return `mj-file-thumb--${mediaType}`;
+    }
+    /**
+     * Generates clickable path breadcrumbs
+     */
+    getPathBreadcrumbs() {
+        const raw = (this.folderPath || '').trim();
+        if (!raw || raw === '/') {
+            return [{ name: 'Root', path: '/' }];
+        }
+        const clean = raw.startsWith('/') ? raw.substring(1) : raw;
+        const parts = clean.split('/').filter((p) => p.trim().length > 0);
+        const crumbs = [
+            { name: 'Root', path: '/' },
+        ];
+        let currentPath = '';
+        for (const part of parts) {
+            currentPath += '/' + part;
+            crumbs.push({ name: part, path: currentPath });
+        }
+        return crumbs;
+    }
+    /**
+     * Navigates to a specific breadcrumb path
+     */
+    navigateToBreadcrumb(path) {
+        this.folderNavigate.emit(path);
+    }
+    /**
+     * Toggles selection of a file/folder item
+     */
+    toggleItemSelection(item, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        const idx = this.selectedItems.indexOf(item.key);
+        if (idx >= 0) {
+            this.selectedItems = this.selectedItems.filter((k) => k !== item.key);
+        }
+        else {
+            this.selectedItems = [...this.selectedItems, item.key];
+        }
+        this.cdr.markForCheck();
+    }
+    /**
+     * Selects all current filtered items
+     */
+    selectAll() {
+        this.selectedItems = this.filteredItems.map((i) => i.key);
+        this.cdr.markForCheck();
+    }
+    /**
+     * Clears selection
+     */
+    deselectAll() {
+        this.selectedItems = [];
+        this.cdr.markForCheck();
+    }
+    /**
+     * Checks if all items are selected
+     */
+    areAllSelected() {
+        return (this.filteredItems.length > 0 &&
+            this.selectedItems.length === this.filteredItems.length);
+    }
+    /**
+     * Opens in-browser preview modal
+     */
+    async openPreview(item) {
+        if (item.type === 'folder' || !this.account) {
+            return;
+        }
+        this.previewItem = item;
+        this.previewMediaType = this.getMediaType(item);
+        this.showPreviewModal = true;
+        this.isLoadingPreview = true;
+        this.previewUrl = null;
+        this.cdr.markForCheck();
+        try {
+            const itemPath = this.constructItemPath(item);
+            const url = await this.storageClient.CreatePreAuthDownloadUrl(this.account.account.ID, itemPath);
+            this.previewUrl = url;
+        }
+        catch (err) {
+            console.error('[FileGrid] Preview error:', err);
+        }
+        finally {
+            this.isLoadingPreview = false;
+            this.cdr.markForCheck();
+        }
+    }
+    /**
+     * Closes the preview modal
+     */
+    closePreview() {
+        this.showPreviewModal = false;
+        this.previewItem = null;
+        this.previewUrl = null;
+        this.isLoadingPreview = false;
+        this.cdr.markForCheck();
+    }
     static ɵfac = function FileGridComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FileGridComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 17, vars: 16, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "breadcrumb-bar"], [1, "multi-provider-search-panel"], [1, "loading-state"], ["Variant", "error", "Icon", "fa-solid fa-circle-exclamation", "Title", "Couldn't load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Message"], [1, "file-table-wrapper"], [1, "file-grid-wrapper"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-upload", 1, "file-grid-empty-fill"], [1, "bottom-toolbar"], [1, "drag-overlay"], [1, "upload-progress"], [1, "modal-overlay"], [1, "nav-buttons"], ["title", "Go up to parent folder", 1, "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["title", "Refresh", 1, "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], [1, "breadcrumb-path"], [1, "fa-solid", "fa-folder"], [1, "path-text"], [1, "search-bar"], ["type", "text", "placeholder", "Search files and folders...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["title", "Clear search", 1, "search-clear-btn"], [1, "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["title", "Search across all storage providers", 1, "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-magnifying-glass-plus"], ["title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "search-panel-header"], [1, "fa-solid", "fa-magnifying-glass"], [1, "close-panel-btn", 3, "click"], [1, "search-panel-body"], [1, "search-input-row"], ["type", "text", "placeholder", "Enter search term...", 1, "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-search"], [1, "provider-selection"], [1, "provider-selection-label"], [1, "provider-checkboxes"], [1, "provider-checkbox", 3, "disabled", "title"], [1, "search-results-container"], [1, "searching-state"], [1, "provider-checkbox", 3, "title"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "provider-name"], [1, "provider-type"], [1, "no-search-badge"], [1, "search-results-summary"], [1, "result-count"], [1, "provider-stats"], [1, "failed-count"], [1, "clear-results-btn", 3, "click"], [1, "provider-results-list"], [1, "provider-result-group", 3, "failed"], [1, "provider-result-group"], [1, "provider-result-header"], [1, "fa-solid", "fa-cloud"], [1, "error-badge"], [1, "provider-result-files"], [1, "no-results-message"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "search-result-item"], [1, "file-icon"], [1, "file-info"], [1, "file-name"], [1, "file-path"], [1, "file-size"], [1, "file-date"], ["text", "Searching across providers..."], ["text", "Loading files..."], ["Variant", "error", "Icon", "fa-solid fa-circle-exclamation", "Title", "Couldn't load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Action", "Message"], [1, "file-table"], [1, "col-name", 3, "click"], [1, "fa-solid", "sort-icon"], [1, "col-type"], [1, "col-size", 3, "click"], [1, "col-modified", 3, "click"], [1, "file-row", 3, "selected"], [1, "file-row", 3, "click", "dblclick"], [1, "col-name"], [1, "item-icon"], [1, "item-name"], [1, "item-type"], [1, "col-size"], [1, "item-size"], [1, "col-modified"], [1, "item-date"], [1, "file-grid"], [1, "grid-item", 3, "selected"], [1, "grid-item", 3, "click", "dblclick"], [1, "grid-icon"], [1, "grid-name"], [1, "grid-meta"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-upload", 1, "file-grid-empty-fill", 3, "Action"], [1, "toolbar-left"], [1, "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-upload"], [1, "fa-solid", "fa-folder-plus"], [1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-download"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], ["title", "Copy file to another storage account", 1, "toolbar-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-cloud-arrow-up"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "fa-solid", "fa-trash"], [1, "toolbar-right"], [1, "view-toggle"], ["title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-th"], [1, "item-count"], [1, "drag-content"], [1, "drag-icon"], [1, "drag-title"], [1, "progress-content"], [1, "progress-info"], [1, "progress-bar-wrap"], [1, "progress-bar"], [1, "progress-percent"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], ["type", "text", "placeholder", "Enter folder name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "modal-footer"], [3, "click", "disabled"], [1, "warning"], [1, "danger", 3, "click", "disabled"], ["type", "text", "placeholder", "Enter new name", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination path", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "text", "placeholder", "Enter destination folder (e.g., folder1/folder2/)", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [2, "font-size", "11px", "color", "var(--mj-text-secondary)", "margin-top", "8px"], [2, "font-size", "12px", "color", "var(--mj-text-secondary)", "margin-bottom", "16px"], [1, "account-checkbox-list"], [1, "account-checkbox-item"], [2, "margin-top", "16px"], ["type", "text", "placeholder", "Enter destination filename", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [3, "for"], [1, "provider-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FileGridComponent, selectors: [["mj-file-grid"]], inputs: { account: "account", folderPath: "folderPath" }, outputs: { folderNavigate: "folderNavigate", folderStructureChanged: "folderStructureChanged" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 19, vars: 18, consts: [[1, "file-grid-container", 3, "dragenter", "dragover", "dragleave", "drop"], [1, "command-bar", "breadcrumb-bar"], [1, "selection-bar"], [1, "multi-search-card", "multi-provider-search-panel"], [1, "grid-loading-container", "loading-state"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Unable to load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Message"], [1, "file-cards-grid", "file-grid", "file-grid-wrapper"], [1, "file-table-container", "file-table-wrapper"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Drop files here to upload or create a new folder", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-cloud-arrow-up"], [1, "status-bar"], [1, "drag-drop-overlay"], [1, "upload-progress-bar-wrap"], [1, "mj-modal-backdrop"], [1, "mj-modal-backdrop", "modal-overlay"], [1, "command-bar-left"], [1, "nav-btn-group", "nav-buttons"], ["type", "button", "title", "Go up to parent folder", 1, "mj-tool-btn", "nav-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-arrow-up"], ["type", "button", "title", "Refresh current folder", 1, "mj-tool-btn", "nav-btn", 3, "click"], [1, "fa-solid", "fa-arrows-rotate"], ["aria-label", "Folder Path", 1, "breadcrumb-trail", "breadcrumb-path"], [1, "fa-solid", "fa-folder-open", "trail-root-icon"], [1, "command-bar-right"], [1, "search-pill", "search-bar"], [1, "fa-solid", "fa-magnifying-glass", "search-icon"], ["type", "text", "placeholder", "Search files...", 1, "search-input", 3, "ngModelChange", "ngModel", "disabled"], ["type", "button", "title", "Clear search", 1, "search-clear-btn"], [1, "type-filter-select", "file-type-filter", 3, "ngModelChange", "ngModel", "disabled"], ["value", "all"], ["value", "files"], ["value", "folders"], ["type", "button", "title", "Search across all storage accounts", 1, "mj-btn-search-toggle", "multi-search-btn", 3, "click"], [1, "fa-solid", "fa-layer-group"], [1, "view-mode-toggle", "view-toggle"], ["type", "button", "title", "List View", 1, "view-mode-btn", "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["type", "button", "title", "Grid View", 1, "view-mode-btn", "view-btn", 3, "click"], [1, "fa-solid", "fa-table-cells-large"], ["type", "button", "title", "Create New Folder", 1, "mj-action-btn", "mj-action-btn--secondary", "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-folder-plus"], ["type", "button", "title", "Upload Files", 1, "mj-action-btn", "mj-action-btn--primary", "toolbar-btn", 3, "click"], [1, "fa-solid", "fa-cloud-arrow-up"], ["type", "button", 1, "crumb-btn", 3, "click", "title"], [1, "crumb-separator"], ["type", "button", "title", "Clear search", 1, "search-clear-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "selection-bar-left"], [1, "selection-checkbox-wrap", 3, "click"], ["type", "checkbox", 3, "change", "checked"], [1, "selection-count"], [1, "selection-bar-right"], ["type", "button", "title", "Delete selected item(s)", 1, "sel-action-btn", "sel-action-btn--danger", 3, "click"], [1, "fa-solid", "fa-trash"], ["type", "button", "title", "Deselect all", 1, "sel-action-btn", "sel-action-btn--ghost", 3, "click"], ["type", "button", "title", "Preview file", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-eye"], ["type", "button", "title", "Download file", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-download"], ["type", "button", "title", "Copy to another storage account", 1, "sel-action-btn", 3, "click"], ["type", "button", "title", "Rename item", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "button", "title", "Copy to path", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-copy"], ["type", "button", "title", "Move item", 1, "sel-action-btn", 3, "click"], [1, "fa-solid", "fa-arrows-up-down-left-right"], [1, "multi-search-header", "search-panel-header"], [1, "multi-search-title"], ["type", "button", "title", "Close search", 1, "modal-close-btn", "close-panel-btn", 3, "click"], [1, "multi-search-body", "search-panel-body"], [1, "multi-search-bar", "search-input-row"], ["type", "text", "placeholder", "Type query to search across connected accounts...", 1, "multi-search-text", "multi-search-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", "search-execute-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-magnifying-glass"], [1, "multi-search-accounts", "provider-selection"], [1, "account-select-label", "provider-selection-label"], [1, "account-pill-list", "provider-checkboxes"], [1, "account-select-pill", "provider-checkbox", 3, "disabled", "checked"], [1, "multi-search-results", "search-results-container"], [1, "account-select-pill", "provider-checkbox"], ["type", "checkbox", 3, "change", "checked", "disabled"], [1, "pill-account-name", "provider-name"], [1, "pill-provider-tag", "provider-type"], [1, "pill-no-search", "no-search-badge"], [1, "results-meta-bar", "search-results-summary"], [1, "meta-count", "result-count"], [1, "meta-stats", "provider-stats"], ["type", "button", 1, "clear-results-btn", 3, "click"], [1, "results-groups", "provider-results-list"], [1, "result-group", "provider-result-group", 3, "failed"], [1, "result-group", "provider-result-group"], [1, "result-group-head", "provider-result-header"], [1, "fa-solid", "fa-cloud-bolt", "group-icon"], [1, "group-account-name", "provider-name"], [1, "group-count-badge", "result-count"], [1, "group-error-badge", "error-badge"], [1, "result-items-grid", "provider-result-files"], [1, "group-empty-text", "no-results-message"], [1, "search-item-row", "search-result-item"], [1, "search-item-icon", "file-icon"], [1, "search-item-info", "file-info"], [1, "search-item-name", "file-name"], [1, "search-item-path", "file-path"], [1, "search-item-size", "file-size"], [1, "search-item-date", "file-date"], ["text", "Loading files..."], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Unable to load files", "ActionText", "Retry", "ActionIcon", "fa-solid fa-arrows-rotate", 1, "file-grid-empty-fill", 3, "Action", "Message"], [1, "file-card", "grid-item", 3, "selected", "title"], [1, "file-card", "grid-item", 3, "click", "dblclick", "title"], [1, "file-card-header"], [1, "file-card-checkbox", 3, "click"], [1, "file-card-quick-actions", 3, "click"], [1, "file-card-icon-container", "grid-icon"], [1, "file-card-body"], [1, "file-card-name", "grid-name"], [1, "file-card-meta", "grid-meta"], [1, "meta-size"], [1, "meta-date"], ["type", "button", "title", "Preview", 1, "quick-action-btn", 3, "click"], ["type", "button", "title", "Download", 1, "quick-action-btn", 3, "click"], [1, "file-table"], [1, "th-check"], [1, "th-name", "col-name", 3, "click"], [1, "fa-solid", "sort-arrow", "sort-icon"], [1, "th-type", "col-type"], [1, "th-size", "col-size", 3, "click"], [1, "th-date", "col-modified", 3, "click"], [1, "th-actions"], [1, "file-table-row", "file-row", 3, "selected"], [1, "file-table-row", "file-row", 3, "click", "dblclick"], [1, "td-check", 3, "click"], [1, "td-name", "col-name"], [1, "row-name-wrap"], [1, "row-icon-badge"], [1, "item-icon"], [1, "row-file-name", "item-name", 3, "title"], [1, "td-type", "col-type"], [1, "type-badge", "item-type"], [1, "td-size", "col-size"], [1, "size-text", "item-size"], [1, "td-date", "col-modified"], [1, "date-text", "item-date"], [1, "td-actions", 3, "click"], [1, "row-action-buttons"], ["type", "button", "title", "Preview", 1, "row-act-btn", 3, "click"], ["type", "button", "title", "Download", 1, "row-act-btn", 3, "click"], ["Icon", "fa-solid fa-folder-open", "Title", "This folder is empty", "Message", "Drop files here to upload or create a new folder", "ActionText", "Upload Files", "ActionIcon", "fa-solid fa-cloud-arrow-up", 3, "Action"], [1, "status-count"], ["class", "status-account-badge", 4, "ngIf"], [1, "status-account-badge"], [1, "fa-solid", "fa-cloud"], [1, "drag-drop-content"], [1, "fa-solid", "fa-cloud-arrow-up", "drag-icon"], [1, "upload-progress-card"], [1, "upload-info"], [1, "fa-solid", "fa-spinner", "fa-spin", "upload-spinner"], [1, "upload-text"], [1, "progress-track"], [1, "progress-fill"], [1, "mj-modal-backdrop", 3, "click"], [1, "mj-modal-window", "preview-modal-window", 3, "click"], [1, "mj-modal-header"], [1, "modal-title-wrap"], [1, "modal-title"], [1, "modal-subtitle"], [1, "modal-header-actions"], ["type", "button", "title", "Download file", 1, "mj-action-btn", "mj-action-btn--secondary", 3, "click"], ["type", "button", "title", "Close preview", 1, "modal-close-btn", 3, "click"], [1, "preview-modal-body"], [1, "preview-loading"], [1, "preview-fallback"], ["text", "Loading preview..."], [1, "preview-media-wrap", "image-preview-wrap"], [1, "preview-media-wrap", "pdf-preview-wrap"], [1, "preview-media-wrap", "video-preview-wrap"], [1, "preview-media-wrap", "audio-preview-wrap"], [1, "preview-img", 3, "src", "alt"], ["title", "PDF Preview", 1, "preview-iframe", 3, "src"], ["controls", "", "autoplay", "", 1, "preview-video", 3, "src"], [1, "fa-solid", "fa-music", "preview-audio-icon"], ["controls", "", 1, "preview-audio", 3, "src"], [1, "preview-fallback-icon"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", 3, "click"], [1, "fa-solid", "fa-triangle-exclamation", "preview-fallback-icon"], [1, "mj-modal-backdrop", "modal-overlay", 3, "click"], [1, "mj-modal-window", "modal-compact", "modal-dialog", 3, "click"], [1, "mj-modal-header", "modal-header"], ["type", "button", 1, "modal-close-btn", "modal-close", 3, "click"], [1, "mj-modal-body", "modal-body"], [1, "form-label"], ["type", "text", "placeholder", "Enter folder name", "autofocus", "", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-footer", "modal-footer"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--secondary", 3, "click", "disabled"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--primary", 3, "click", "disabled"], [1, "modal-body-text"], [1, "modal-warning-banner", "warning"], ["type", "button", 1, "mj-action-btn", "mj-action-btn--danger", "danger", 3, "click", "disabled"], [1, "fa-solid", "fa-triangle-exclamation"], ["type", "text", "placeholder", "Enter new name", "autofocus", "", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-window", "modal-compact", 3, "click"], ["type", "button", 1, "modal-close-btn", 3, "click"], [1, "mj-modal-body"], ["type", "text", "placeholder", "path/to/destination", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-footer"], ["type", "text", "placeholder", "destination/folder/", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "mj-modal-window", 3, "click"], [1, "account-picker-list"], [1, "account-picker-item", 3, "for"], [1, "form-label", 2, "margin-top", "14px"], ["type", "text", "placeholder", "Filename", 1, "form-input", 3, "ngModelChange", "keydown.enter", "ngModel", "disabled"], [1, "copy-progress-indicator"], ["type", "checkbox", 3, "change", "id", "checked", "disabled"], [1, "picker-name"], [1, "picker-badge"]], template: function FileGridComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0);
             i0.ɵɵlistener("dragenter", function FileGridComponent_Template_div_dragenter_0_listener($event) { return ctx.onDragEnter($event); })("dragover", function FileGridComponent_Template_div_dragover_0_listener($event) { return ctx.onDragOver($event); })("dragleave", function FileGridComponent_Template_div_dragleave_0_listener($event) { return ctx.onDragLeave($event); })("drop", function FileGridComponent_Template_div_drop_0_listener($event) { return ctx.onDrop($event); });
-            i0.ɵɵconditionalCreate(1, FileGridComponent_Conditional_1_Template, 22, 9, "div", 1);
-            i0.ɵɵconditionalCreate(2, FileGridComponent_Conditional_2_Template, 22, 8, "div", 2);
-            i0.ɵɵconditionalCreate(3, FileGridComponent_Conditional_3_Template, 2, 0, "div", 3);
-            i0.ɵɵconditionalCreate(4, FileGridComponent_Conditional_4_Template, 1, 1, "mj-empty-state", 4);
-            i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_5_Template, 21, 18, "div", 5);
-            i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_6_Template, 4, 0, "div", 6);
-            i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_7_Template, 1, 0, "mj-empty-state", 7);
-            i0.ɵɵconditionalCreate(8, FileGridComponent_Conditional_8_Template, 34, 12, "div", 8);
-            i0.ɵɵconditionalCreate(9, FileGridComponent_Conditional_9_Template, 6, 0, "div", 9);
-            i0.ɵɵconditionalCreate(10, FileGridComponent_Conditional_10_Template, 10, 4, "div", 10);
+            i0.ɵɵconditionalCreate(1, FileGridComponent_Conditional_1_Template, 40, 12, "div", 1);
+            i0.ɵɵconditionalCreate(2, FileGridComponent_Conditional_2_Template, 15, 5, "div", 2);
+            i0.ɵɵconditionalCreate(3, FileGridComponent_Conditional_3_Template, 23, 6, "div", 3);
+            i0.ɵɵconditionalCreate(4, FileGridComponent_Conditional_4_Template, 2, 0, "div", 4);
+            i0.ɵɵconditionalCreate(5, FileGridComponent_Conditional_5_Template, 1, 1, "mj-empty-state", 5);
+            i0.ɵɵconditionalCreate(6, FileGridComponent_Conditional_6_Template, 3, 0, "div", 6);
+            i0.ɵɵconditionalCreate(7, FileGridComponent_Conditional_7_Template, 25, 19, "div", 7);
+            i0.ɵɵconditionalCreate(8, FileGridComponent_Conditional_8_Template, 1, 0, "mj-empty-state", 8);
+            i0.ɵɵconditionalCreate(9, FileGridComponent_Conditional_9_Template, 5, 4, "div", 9);
+            i0.ɵɵconditionalCreate(10, FileGridComponent_Conditional_10_Template, 7, 1, "div", 10);
+            i0.ɵɵconditionalCreate(11, FileGridComponent_Conditional_11_Template, 8, 3, "div", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(11, FileGridComponent_Conditional_11_Template, 17, 6, "div", 11);
-            i0.ɵɵconditionalCreate(12, FileGridComponent_Conditional_12_Template, 20, 7, "div", 11);
-            i0.ɵɵconditionalCreate(13, FileGridComponent_Conditional_13_Template, 17, 7, "div", 11);
-            i0.ɵɵconditionalCreate(14, FileGridComponent_Conditional_14_Template, 21, 8, "div", 11);
-            i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_15_Template, 23, 10, "div", 11);
-            i0.ɵɵconditionalCreate(16, FileGridComponent_Conditional_16_Template, 31, 9, "div", 11);
+            i0.ɵɵconditionalCreate(12, FileGridComponent_Conditional_12_Template, 22, 8, "div", 12);
+            i0.ɵɵconditionalCreate(13, FileGridComponent_Conditional_13_Template, 18, 6, "div", 13);
+            i0.ɵɵconditionalCreate(14, FileGridComponent_Conditional_14_Template, 21, 7, "div", 13);
+            i0.ɵɵconditionalCreate(15, FileGridComponent_Conditional_15_Template, 18, 7, "div", 13);
+            i0.ɵɵconditionalCreate(16, FileGridComponent_Conditional_16_Template, 22, 8, "div", 12);
+            i0.ɵɵconditionalCreate(17, FileGridComponent_Conditional_17_Template, 22, 8, "div", 12);
+            i0.ɵɵconditionalCreate(18, FileGridComponent_Conditional_18_Template, 31, 9, "div", 12);
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isMultiProviderSearchMode ? 2 : -1);
+            i0.ɵɵconditional(ctx.selectedItems.length > 0 && !ctx.isMultiProviderSearchMode ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading && !ctx.isMultiProviderSearchMode ? 3 : -1);
+            i0.ɵɵconditional(ctx.isMultiProviderSearchMode ? 3 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.errorMessage && !ctx.isLoading ? 4 : -1);
+            i0.ɵɵconditional(ctx.isLoading && !ctx.isMultiProviderSearchMode ? 4 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length > 0 && ctx.viewMode === "list" ? 5 : -1);
+            i0.ɵɵconditional(ctx.errorMessage && !ctx.isLoading ? 5 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length > 0 && ctx.viewMode === "grid" ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length === 0 ? 7 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length > 0 && ctx.viewMode === "list" ? 7 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage && ctx.filteredItems.length === 0 && !ctx.isMultiProviderSearchMode ? 8 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage ? 9 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.errorMessage ? 8 : -1);
+            i0.ɵɵconditional(ctx.isDragging ? 10 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isDragging ? 9 : -1);
+            i0.ɵɵconditional(ctx.isUploading ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isUploading ? 10 : -1);
+            i0.ɵɵconditional(ctx.showPreviewModal && ctx.previewItem ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showNewFolderDialog ? 11 : -1);
+            i0.ɵɵconditional(ctx.showNewFolderDialog ? 13 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showDeleteDialog && ctx.itemToDelete ? 12 : -1);
+            i0.ɵɵconditional(ctx.showDeleteDialog && ctx.itemToDelete ? 14 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showRenameDialog && ctx.itemToRename ? 13 : -1);
+            i0.ɵɵconditional(ctx.showRenameDialog && ctx.itemToRename ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCopyDialog && ctx.itemToCopy ? 14 : -1);
+            i0.ɵɵconditional(ctx.showCopyDialog && ctx.itemToCopy ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showMoveDialog && ctx.itemToMove ? 15 : -1);
+            i0.ɵɵconditional(ctx.showMoveDialog && ctx.itemToMove ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showCopyToProviderDialog && ctx.itemToCopyToProvider ? 16 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.MJEmptyStateComponent], styles: ["\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.nav-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.nav-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.nav-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.breadcrumb-path[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n}\n\n.breadcrumb-path[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.path-text[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.search-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  position: relative;\n}\n\n.search-input[_ngcontent-%COMP%] {\n  padding: 4px 30px 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  min-width: 200px;\n}\n\n.search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.file-type-filter[_ngcontent-%COMP%] {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.file-type-filter[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.file-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n  position: sticky;\n  top: 0;\n  background-color: var(--mj-bg-surface-sunken);\n  z-index: 10;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  margin-right: 4px;\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 6px 10px;\n  color: var(--mj-text-primary);\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n  width: 50%;\n}\n\n.col-type[_ngcontent-%COMP%] {\n  width: 15%;\n}\n\n.col-size[_ngcontent-%COMP%] {\n  width: 15%;\n}\n\n.col-modified[_ngcontent-%COMP%] {\n  width: 20%;\n}\n\n\n\n.col-name[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.item-name[_ngcontent-%COMP%] {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n\n\n.fa-folder[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n\n\n.fa-file-pdf[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.fa-file-word[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-excel[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.fa-file-image[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-video[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.fa-file-audio[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.fa-file-archive[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.fa-file-code[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n\n\n\n\n\n.file-grid-wrapper[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.grid-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: var(--mj-bg-surface);\n}\n\n.grid-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-icon[_ngcontent-%COMP%] {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.grid-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  display: block;\n}\n\n.grid-name[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-align: center;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n}\n\n.grid-meta[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n}\n\n\n\n\n\n\n.bottom-toolbar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n  min-height: 36px;\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 6px;\n}\n\n.toolbar-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: none;\n  border-right: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.view-btn[_ngcontent-%COMP%]:last-child {\n  border-right: none;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n\n\n.file-grid-empty-fill[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n\n\n\n\n\n.drag-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n  font-size: 64px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 16px;\n}\n\n.drag-title[_ngcontent-%COMP%] {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  margin: 0;\n}\n\n\n\n\n\n\n.upload-progress[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 40px;\n  right: 20px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 12px 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  min-width: 300px;\n  z-index: 100;\n}\n\n.progress-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.progress-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 6px;\n  background-color: var(--mj-border-default);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar[_ngcontent-%COMP%] {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.3s ease;\n}\n\n.progress-percent[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n\n\n\n\n\n.modal-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-text-disabled);\n  border-radius: 4px;\n  min-width: 400px;\n  max-width: 90%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.modal-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.modal-body[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.modal-body[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled, \n.modal-body[_ngcontent-%COMP%]   .provider-select[_ngcontent-%COMP%]:disabled {\n  background-color: var(--mj-bg-surface-card);\n  cursor: not-allowed;\n}\n\n.modal-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.modal-body[_ngcontent-%COMP%]   .warning[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-size: 12px;\n}\n\n\n\n.account-checkbox-list[_ngcontent-%COMP%] {\n  max-height: 200px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: normal;\n  margin: 0;\n}\n\n.provider-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-border-default);\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-error);\n}\n\n.modal-footer[_ngcontent-%COMP%]   button.danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n\n\n\n\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 12px;\n  height: 12px;\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n\n\n\n\n\n@media screen and (max-width: 768px) {\n  .file-table[_ngcontent-%COMP%] {\n    font-size: 11px;\n  }\n\n  .file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n   .file-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 4px 6px;\n  }\n\n  .col-type[_ngcontent-%COMP%], \n   .col-size[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .col-name[_ngcontent-%COMP%] {\n    width: 60%;\n  }\n\n  .col-modified[_ngcontent-%COMP%] {\n    width: 40%;\n  }\n\n  .toolbar-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    display: none;\n  }\n\n  .modal-dialog[_ngcontent-%COMP%] {\n    min-width: 90%;\n  }\n}\n\n\n\n\n\n\n.multi-search-btn[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.multi-search-btn[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-strong);\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.search-panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.close-panel-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.search-panel-body[_ngcontent-%COMP%] {\n  padding: 16px;\n}\n\n.search-input-row[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.multi-search-input[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.multi-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.provider-selection[_ngcontent-%COMP%] {\n  margin-bottom: 8px;\n}\n\n.provider-selection-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n\n.provider-checkboxes[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.provider-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface-card);\n  transition: all 0.15s;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.provider-checkbox[_ngcontent-%COMP%]   .provider-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n}\n\n.no-search-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n\n\n.search-results-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .provider-stats[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.search-results-summary[_ngcontent-%COMP%]   .failed-count[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: none;\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.provider-results-list[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.provider-result-group[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n}\n\n.provider-result-group[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.provider-result-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.provider-result-header[_ngcontent-%COMP%]   .result-count[_ngcontent-%COMP%] {\n  font-weight: normal;\n  color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed[_ngcontent-%COMP%]   .provider-result-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n.error-badge[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n  font-weight: normal;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.provider-result-files[_ngcontent-%COMP%] {\n  padding: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 40px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-icon[_ngcontent-%COMP%] {\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-path[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-size[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 60px;\n  text-align: right;\n}\n\n.search-result-item[_ngcontent-%COMP%]   .file-date[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 140px;\n  text-align: right;\n}\n\n.no-results-message[_ngcontent-%COMP%] {\n  padding: 16px 40px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n.searching-state[_ngcontent-%COMP%] {\n  padding: 40px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}"] });
+            i0.ɵɵconditional(ctx.showCopyToProviderDialog && ctx.itemToCopyToProvider ? 18 : -1);
+        } }, dependencies: [i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.MJEmptyStateComponent], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.file-grid-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  position: relative;\n  overflow: hidden;\n}\n\n\n\n\n\n\n.command-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n.command-bar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.nav-btn-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.mj-tool-btn[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-tool-btn[_ngcontent-%COMP%]:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-tool-btn[disabled][_ngcontent-%COMP%] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background-color: transparent;\n}\n\n\n\n.breadcrumb-trail[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  min-width: 0;\n  padding: 2px 4px;\n}\n\n.breadcrumb-trail[_ngcontent-%COMP%]::-webkit-scrollbar {\n  display: none;\n}\n\n.trail-root-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning, #f59e0b);\n  font-size: 0.95rem;\n  margin-right: 2px;\n  flex-shrink: 0;\n}\n\n.crumb-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.82rem;\n  font-weight: 500;\n  padding: 4px 8px;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all 0.12s ease;\n}\n\n.crumb-btn[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.crumb-btn.current[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.crumb-separator[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 0.75rem;\n}\n\n\n\n.command-bar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n\n\n.search-pill[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  padding: 2px 10px;\n  gap: 6px;\n  transition: border-color 0.15s ease;\n}\n\n.search-pill[_ngcontent-%COMP%]:focus-within {\n  border-color: var(--mj-brand-primary);\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n}\n\n.search-input[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 0.82rem;\n  color: var(--mj-text-primary);\n  width: 150px;\n  padding: 4px 0;\n}\n\n.search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.search-clear-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0.75rem;\n}\n\n.search-clear-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.type-filter-select[_ngcontent-%COMP%] {\n  border: none;\n  background: transparent;\n  font-size: 0.76rem;\n  color: var(--mj-text-secondary);\n  outline: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n\n\n.mj-btn-search-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 0.8rem;\n  font-weight: 500;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-btn-search-toggle[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.mj-btn-search-toggle.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n  display: flex;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 2px;\n  gap: 2px;\n}\n\n.view-mode-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  padding: 5px 8px;\n  font-size: 0.8rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.view-mode-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.view-mode-btn.active[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.mj-action-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: 0.82rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n\n.mj-action-btn--primary[_ngcontent-%COMP%] {\n  background-color: var(--mj-brand-primary, #3b82f6);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-action-btn--primary[_ngcontent-%COMP%]:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn--secondary[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.mj-action-btn--secondary[_ngcontent-%COMP%]:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n}\n\n.mj-action-btn--danger[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-error, #ef4444);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-status-error, #ef4444);\n}\n\n.mj-action-btn--danger[_ngcontent-%COMP%]:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn[disabled][_ngcontent-%COMP%] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n\n\n\n\n\n.selection-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  gap: 12px;\n  flex-shrink: 0;\n  animation: _ngcontent-%COMP%_slideDown 0.18s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from { transform: translateY(-100%); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n.selection-bar-left[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.selection-checkbox-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n  font-size: 0.82rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.selection-bar-right[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.sel-action-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: 0.76rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.sel-action-btn[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.sel-action-btn--danger[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.sel-action-btn--ghost[_ngcontent-%COMP%] {\n  background: transparent;\n  border-color: transparent;\n}\n\n\n\n\n\n\n.multi-search-card[_ngcontent-%COMP%] {\n  margin: 12px 16px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  overflow: hidden;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from { opacity: 0; transform: translateY(-6px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.multi-search-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.multi-search-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-brand-primary);\n}\n\n.multi-search-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.multi-search-body[_ngcontent-%COMP%] {\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.multi-search-bar[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n}\n\n.multi-search-text[_ngcontent-%COMP%] {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.multi-search-text[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-search-accounts[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.account-select-label[_ngcontent-%COMP%] {\n  font-size: 0.74rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n}\n\n.account-pill-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.account-select-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.76rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.account-select-pill.checked[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.account-select-pill.disabled[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.pill-account-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.pill-provider-tag[_ngcontent-%COMP%] {\n  font-size: 0.68rem;\n  color: var(--mj-text-muted);\n}\n\n.pill-no-search[_ngcontent-%COMP%] {\n  font-size: 0.68rem;\n  color: var(--mj-status-warning);\n}\n\n\n\n.multi-search-results[_ngcontent-%COMP%] {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.results-meta-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 12px;\n  font-size: 0.8rem;\n}\n\n.meta-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n}\n\n.meta-stats[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.clear-results-btn[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  cursor: pointer;\n}\n\n.clear-results-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n}\n\n.results-groups[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.result-group[_ngcontent-%COMP%] {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  overflow: hidden;\n}\n\n.result-group-head[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.8rem;\n}\n\n.group-account-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.group-count-badge[_ngcontent-%COMP%] {\n  margin-left: auto;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  font-size: 0.7rem;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 9999px;\n}\n\n.group-error-badge[_ngcontent-%COMP%] {\n  margin-left: auto;\n  color: var(--mj-status-error);\n  font-size: 0.72rem;\n}\n\n.result-items-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n}\n\n.search-item-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 0.8rem;\n}\n\n.search-item-row[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.search-item-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.search-item-info[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n.search-item-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.search-item-path[_ngcontent-%COMP%] {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.search-item-size[_ngcontent-%COMP%], .search-item-date[_ngcontent-%COMP%] {\n  font-size: 0.74rem;\n  color: var(--mj-text-secondary);\n}\n\n.group-empty-text[_ngcontent-%COMP%] {\n  padding: 12px;\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n\n\n\n\n\n.file-cards-grid[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n  gap: 14px;\n  align-content: start;\n}\n\n.file-card[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  padding: 10px;\n  cursor: pointer;\n  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  user-select: none;\n}\n\n.file-card[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  transform: translateY(-2px);\n}\n\n.file-card.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n.file-card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 22px;\n  margin-bottom: 6px;\n}\n\n.file-card-checkbox[_ngcontent-%COMP%] {\n  cursor: pointer;\n}\n\n.file-card-quick-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.file-card[_ngcontent-%COMP%]:hover   .file-card-quick-actions[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.quick-action-btn[_ngcontent-%COMP%] {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.68rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.quick-action-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n.file-card-icon-container[_ngcontent-%COMP%] {\n  height: 74px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-md, 8px);\n  margin-bottom: 8px;\n  font-size: 2rem;\n  transition: transform 0.15s ease;\n}\n\n.file-card[_ngcontent-%COMP%]:hover   .file-card-icon-container[_ngcontent-%COMP%] {\n  transform: scale(1.04);\n}\n\n\n\n.file-card-body[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.file-card-name[_ngcontent-%COMP%] {\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-height: 1.25;\n  min-height: 2em;\n}\n\n.file-card-meta[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n\n\n\n\n\n.file-table-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 16px;\n}\n\n.file-table[_ngcontent-%COMP%] {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.82rem;\n}\n\n.file-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n  text-align: left;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  user-select: none;\n  cursor: pointer;\n}\n\n.file-table[_ngcontent-%COMP%]   th.th-check[_ngcontent-%COMP%] {\n  width: 32px;\n  cursor: default;\n}\n\n.file-table[_ngcontent-%COMP%]   th.th-actions[_ngcontent-%COMP%] {\n  width: 70px;\n  text-align: right;\n  cursor: default;\n}\n\n.sort-arrow[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  font-size: 0.65rem;\n}\n\n.file-table-row[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.12s ease;\n}\n\n.file-table-row[_ngcontent-%COMP%]:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n}\n\n.file-table-row.selected[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.file-table-row[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n  padding: 8px 10px;\n  vertical-align: middle;\n}\n\n.row-name-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.row-icon-badge[_ngcontent-%COMP%] {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.9rem;\n}\n\n.row-file-name[_ngcontent-%COMP%] {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n}\n\n.size-text[_ngcontent-%COMP%], .date-text[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  white-space: nowrap;\n}\n\n.row-action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n\n.file-table-row[_ngcontent-%COMP%]:hover   .row-action-buttons[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.row-act-btn[_ngcontent-%COMP%] {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n  cursor: pointer;\n}\n\n.row-act-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n.mj-file-thumb--folder[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--pdf[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 14%, transparent);\n  color: var(--mj-status-error, #ef4444);\n}\n\n.mj-file-thumb--image[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-media-image, #8b5cf6) 14%, transparent);\n  color: var(--mj-media-image, #8b5cf6);\n}\n\n.mj-file-thumb--video[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3b82f6) 14%, transparent);\n  color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-file-thumb--audio[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--code[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-status-success, #10b981) 14%, transparent);\n  color: var(--mj-status-success, #10b981);\n}\n\n.mj-file-thumb--text[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-text-muted, #6b7280) 14%, transparent);\n  color: var(--mj-text-muted, #6b7280);\n}\n\n.mj-file-thumb--document[_ngcontent-%COMP%] {\n  background-color: color-mix(in srgb, var(--mj-brand-primary-hover, #2563eb) 14%, transparent);\n  color: var(--mj-brand-primary-hover, #2563eb);\n}\n\n\n\n\n\n\n.status-bar[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 16px;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 3%, var(--mj-bg-surface)));\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 0.72rem;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.status-account-badge[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n\n\n\n\n\n.drag-drop-overlay[_ngcontent-%COMP%] {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, rgba(255, 255, 255, 0.9));\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drag-drop-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 48px;\n  background-color: var(--mj-bg-surface);\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));\n}\n\n.drag-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n  margin-bottom: 12px;\n}\n\n.drag-drop-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.drag-drop-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\n}\n\n.upload-progress-bar-wrap[_ngcontent-%COMP%] {\n  position: absolute;\n  bottom: 36px;\n  right: 20px;\n  z-index: 90;\n}\n\n.upload-progress-card[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.15));\n  width: 260px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.upload-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.upload-spinner[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.upload-text[_ngcontent-%COMP%] {\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.progress-track[_ngcontent-%COMP%] {\n  height: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n.progress-fill[_ngcontent-%COMP%] {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.15s ease;\n}\n\n.grid-loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n\n\n\n\n\n.mj-modal-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1050;\n  padding: 20px;\n  animation: _ngcontent-%COMP%_modalFadeIn 0.18s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_modalFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-modal-window[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 35px rgba(0, 0, 0, 0.25));\n  width: 100%;\n  max-width: 500px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mj-modal-window.modal-compact[_ngcontent-%COMP%] {\n  max-width: 420px;\n}\n\n.mj-modal-window.preview-modal-window[_ngcontent-%COMP%] {\n  max-width: 850px;\n  max-height: 85vh;\n  height: 80vh;\n}\n\n.mj-modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n}\n\n.modal-title-wrap[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.modal-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-subtitle[_ngcontent-%COMP%] {\n  font-size: 0.72rem;\n  color: var(--mj-text-muted);\n}\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%] {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.modal-close-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-modal-body[_ngcontent-%COMP%] {\n  padding: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n  font-size: 0.78rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.form-input[_ngcontent-%COMP%] {\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.form-input[_ngcontent-%COMP%]:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body-text[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--mj-text-primary);\n}\n\n.modal-warning-banner[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.76rem;\n  color: var(--mj-text-primary);\n}\n\n.mj-modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n\n\n.preview-modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  overflow: hidden;\n}\n\n.preview-media-wrap[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.preview-img[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-iframe[_ngcontent-%COMP%] {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-video[_ngcontent-%COMP%] {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.audio-preview-wrap[_ngcontent-%COMP%] {\n  flex-direction: column;\n  gap: 16px;\n}\n\n.preview-audio-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n}\n\n.preview-audio[_ngcontent-%COMP%] {\n  width: 320px;\n}\n\n.preview-fallback[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.preview-fallback-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.preview-fallback[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.95rem;\n  color: var(--mj-text-primary);\n}\n\n.preview-fallback[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.8rem;\n}\n\n.account-picker-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 180px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 6px;\n}\n\n.account-picker-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.account-picker-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.picker-name[_ngcontent-%COMP%] {\n  font-size: 0.82rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.picker-badge[_ngcontent-%COMP%] {\n  margin-left: auto;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.copy-progress-indicator[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.78rem;\n  color: var(--mj-brand-primary);\n  margin-top: 8px;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FileGridComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n  <!-- Breadcrumb Navigation Bar -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"breadcrumb-bar\">\n      <div class=\"nav-buttons\">\n        <button class=\"nav-btn\"\n          [disabled]=\"!canNavigateUp()\"\n          (click)=\"navigateUp()\"\n          title=\"Go up to parent folder\">\n          <i class=\"fa-solid fa-arrow-up\"></i>\n        </button>\n        <button class=\"nav-btn\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-arrows-rotate\"></i>\n        </button>\n      </div>\n      <div class=\"breadcrumb-path\">\n        <i class=\"fa-solid fa-folder\"></i>\n        <span class=\"path-text\">{{ folderPath || 'Root' }} /</span>\n      </div>\n      <div class=\"search-bar\">\n        <input type=\"text\"\n          class=\"search-input\"\n          [(ngModel)]=\"searchQuery\"\n          (ngModelChange)=\"onSearchChange($event)\"\n          placeholder=\"Search files and folders...\"\n          [disabled]=\"isLoading || isMultiProviderSearchMode\">\n        @if (searchQuery && !isMultiProviderSearchMode) {\n          <button class=\"search-clear-btn\"\n            (click)=\"clearSearch()\"\n            title=\"Clear search\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        }\n        <select class=\"file-type-filter\"\n          [(ngModel)]=\"fileTypeFilter\"\n          (ngModelChange)=\"onFileTypeFilterChange($event)\"\n          [disabled]=\"isLoading || isMultiProviderSearchMode\">\n          <option value=\"all\">All</option>\n          <option value=\"files\">Files</option>\n          <option value=\"folders\">Folders</option>\n        </select>\n        <button class=\"multi-search-btn\"\n          [class.active]=\"isMultiProviderSearchMode\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Search across all storage providers\">\n          <i class=\"fa-solid fa-magnifying-glass-plus\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Multi-Provider Search Panel -->\n  @if (isMultiProviderSearchMode) {\n    <div class=\"multi-provider-search-panel\">\n      <div class=\"search-panel-header\">\n        <h3><i class=\"fa-solid fa-magnifying-glass\"></i> Search Across Providers</h3>\n        <button class=\"close-panel-btn\" (click)=\"toggleMultiAccountSearchMode()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"search-panel-body\">\n        <div class=\"search-input-row\">\n          <input type=\"text\"\n            class=\"multi-search-input\"\n            [(ngModel)]=\"multiProviderSearchQuery\"\n            placeholder=\"Enter search term...\"\n            (keydown.enter)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching\">\n          <button class=\"search-execute-btn\"\n            (click)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n            @if (isSearching) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            @if (!isSearching) {\n              <i class=\"fa-solid fa-search\"></i>\n            }\n            {{ isSearching ? 'Searching...' : 'Search' }}\n          </button>\n        </div>\n        <div class=\"provider-selection\">\n          <label class=\"provider-selection-label\">Select accounts to search:</label>\n          <div class=\"provider-checkboxes\">\n            @for (a of availableAccounts; track a) {\n              <label\n                class=\"provider-checkbox\"\n                [class.disabled]=\"!accountSupportsSearch(a)\"\n                [title]=\"accountSupportsSearch(a) ? '' : 'This account does not support search'\">\n                <input type=\"checkbox\"\n                  [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n                  (change)=\"toggleSearchAccount(a.account.ID)\"\n                  [disabled]=\"!accountSupportsSearch(a)\">\n                <span class=\"provider-name\">{{ a.account.Name }}</span>\n                <span class=\"provider-type\">({{ a.provider.Name }})</span>\n                @if (!accountSupportsSearch(a)) {\n                  <span class=\"no-search-badge\">(no search)</span>\n                }\n              </label>\n            }\n          </div>\n        </div>\n      </div>\n      <!-- Search Results -->\n      @if (multiProviderSearchResults) {\n        <div class=\"search-results-container\">\n          <div class=\"search-results-summary\">\n            <span class=\"result-count\">{{ multiProviderSearchResults.totalResultsReturned }} result(s) found</span>\n            <span class=\"provider-stats\">\n              ({{ multiProviderSearchResults.successfulAccounts }} account(s) searched\n              @if (multiProviderSearchResults.failedAccounts > 0) {\n                <span class=\"failed-count\">\n                  , {{ multiProviderSearchResults.failedAccounts }} failed\n                </span>\n                })\n              </span>\n              <button class=\"clear-results-btn\" (click)=\"clearMultiProviderSearch()\">\n                <i class=\"fa-solid fa-xmark\"></i> Clear\n              </button>\n            </div>\n            <div class=\"provider-results-list\">\n              @for (accountResult of multiProviderSearchResults.accountResults; track accountResult) {\n                <div\n                  class=\"provider-result-group\"\n                  [class.failed]=\"!accountResult.success\">\n                  <div class=\"provider-result-header\">\n                    <i class=\"fa-solid fa-cloud\"></i>\n                    <span class=\"provider-name\">{{ accountResult.accountName }}</span>\n                    @if (accountResult.success) {\n                      <span class=\"result-count\">\n                        ({{ accountResult.results.length }} result(s))\n                      </span>\n                    }\n                    @if (!accountResult.success) {\n                      <span class=\"error-badge\">\n                        <i class=\"fa-solid fa-exclamation-triangle\"></i>\n                        {{ accountResult.errorMessage }}\n                      </span>\n                    }\n                  </div>\n                  @if (accountResult.success && accountResult.results.length > 0) {\n                    <div class=\"provider-result-files\">\n                      @for (file of accountResult.results; track file) {\n                        <div class=\"search-result-item\">\n                          <i [class]=\"getSearchResultIcon(file)\" class=\"file-icon\"></i>\n                          <div class=\"file-info\">\n                            <span class=\"file-name\">{{ file.name }}</span>\n                            <span class=\"file-path\">{{ file.path }}</span>\n                          </div>\n                          <span class=\"file-size\">{{ formatSearchResultSize(file.size) }}</span>\n                          <span class=\"file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n                        </div>\n                      }\n                    </div>\n                  }\n                  @if (accountResult.success && accountResult.results.length === 0) {\n                    <div class=\"no-results-message\">\n                      No matching files found\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        }\n        <!-- Searching State -->\n        @if (isSearching) {\n          <div class=\"searching-state\">\n            <mj-loading text=\"Searching across providers...\"></mj-loading>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Loading State -->\n    @if (isLoading && !isMultiProviderSearchMode) {\n      <div class=\"loading-state\">\n        <mj-loading text=\"Loading files...\"></mj-loading>\n      </div>\n    }\n\n    <!-- Error State -->\n    @if (errorMessage && !isLoading) {\n      <mj-empty-state\n        class=\"file-grid-empty-fill\"\n        Variant=\"error\"\n        Icon=\"fa-solid fa-circle-exclamation\"\n        Title=\"Couldn't load files\"\n        [Message]=\"errorMessage\"\n        ActionText=\"Retry\"\n        ActionIcon=\"fa-solid fa-arrows-rotate\"\n        (Action)=\"refresh()\" />\n    }\n\n    <!-- List View -->\n    @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n      <div class=\"file-table-wrapper\">\n        <table class=\"file-table\">\n          <thead>\n            <tr>\n              <th class=\"col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Name</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n              </th>\n              <th class=\"col-type\">Type</th>\n              <th class=\"col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Size</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n              </th>\n              <th class=\"col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n                <span>Modified</span>\n                <i class=\"fa-solid sort-icon\"\n                  [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n                  [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n              </th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (item of filteredItems; track item) {\n              <tr\n                class=\"file-row\"\n                [class.selected]=\"selectedItems.includes(item.key)\"\n                (click)=\"onTileClick(item, $event)\"\n                (dblclick)=\"onItemDoubleClick(item)\">\n                <td class=\"col-name\">\n                  <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n                  <span class=\"item-name\">{{ item.name }}</span>\n                </td>\n                <td class=\"col-type\">\n                  <span class=\"item-type\">{{ getFileType(item) }}</span>\n                </td>\n                <td class=\"col-size\">\n                  <span class=\"item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n                </td>\n                <td class=\"col-modified\">\n                  <span class=\"item-date\">{{ formatDate(item.lastModified) }}</span>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n\n    <!-- Grid View -->\n    @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n      <div class=\"file-grid-wrapper\">\n        <div class=\"file-grid\">\n          @for (item of filteredItems; track item) {\n            <div\n              class=\"grid-item\"\n              [class.selected]=\"selectedItems.includes(item.key)\"\n              (click)=\"onTileClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\">\n              <div class=\"grid-icon\">\n                <i [class]=\"getItemIcon(item)\"></i>\n              </div>\n              <div class=\"grid-name\">{{ item.name }}</div>\n              @if (item.type === 'file') {\n                <div class=\"grid-meta\">{{ formatFileSize(item.size) }}</div>\n              }\n              @if (item.type === 'folder') {\n                <div class=\"grid-meta\">Folder</div>\n              }\n            </div>\n          }\n        </div>\n      </div>\n    }\n\n    <!-- Empty State -->\n    @if (!isLoading && !errorMessage && filteredItems.length === 0) {\n      <mj-empty-state\n        class=\"file-grid-empty-fill\"\n        Icon=\"fa-solid fa-folder-open\"\n        Title=\"This folder is empty\"\n        ActionText=\"Upload Files\"\n        ActionIcon=\"fa-solid fa-upload\"\n        (Action)=\"onUploadClick()\" />\n    }\n\n    <!-- Bottom Toolbar -->\n    @if (!isLoading && !errorMessage) {\n      <div class=\"bottom-toolbar\">\n        <div class=\"toolbar-left\">\n          <button class=\"toolbar-btn\" (click)=\"onUploadClick()\">\n            <i class=\"fa-solid fa-upload\"></i>\n            Upload\n          </button>\n          <button class=\"toolbar-btn\" (click)=\"onNewFolderClick()\">\n            <i class=\"fa-solid fa-folder-plus\"></i>\n            New Folder\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onDownloadClick()\">\n            <i class=\"fa-solid fa-download\"></i>\n            Download\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onRenameClick()\">\n            <i class=\"fa-solid fa-pen\"></i>\n            Rename\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onCopyClick()\">\n            <i class=\"fa-solid fa-copy\"></i>\n            Copy\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1 || getSelectedItem()?.type === 'folder'\"\n            (click)=\"onCopyToAccountClick()\"\n            title=\"Copy file to another storage account\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n            Copy to...\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length !== 1\"\n            (click)=\"onMoveClick()\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            Move\n          </button>\n          <button class=\"toolbar-btn\"\n            [disabled]=\"selectedItems.length === 0\"\n            (click)=\"onDeleteClick()\">\n            <i class=\"fa-solid fa-trash\"></i>\n            Delete\n          </button>\n        </div>\n        <div class=\"toolbar-right\">\n          <!-- View Toggle -->\n          <div class=\"view-toggle\">\n            <button class=\"view-btn\"\n              [class.active]=\"viewMode === 'list'\"\n              (click)=\"viewMode = 'list'\"\n              title=\"List View\">\n              <i class=\"fa-solid fa-list\"></i>\n            </button>\n            <button class=\"view-btn\"\n              [class.active]=\"viewMode === 'grid'\"\n              (click)=\"viewMode = 'grid'\"\n              title=\"Grid View\">\n              <i class=\"fa-solid fa-th\"></i>\n            </button>\n          </div>\n          <span class=\"item-count\">\n            {{ filteredItems.length }} {{ filteredItems.length === 1 ? 'item' : 'filteredItems' }}\n          </span>\n        </div>\n      </div>\n    }\n\n    <!-- Drag & Drop Overlay -->\n    @if (isDragging) {\n      <div class=\"drag-overlay\">\n        <div class=\"drag-content\">\n          <div class=\"drag-icon\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n          </div>\n          <h2 class=\"drag-title\">Drop files to upload</h2>\n        </div>\n      </div>\n    }\n\n    <!-- Upload Progress -->\n    @if (isUploading) {\n      <div class=\"upload-progress\">\n        <div class=\"progress-content\">\n          <div class=\"progress-info\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            <span>Uploading {{ uploadingFileName }}...</span>\n          </div>\n          <div class=\"progress-bar-wrap\">\n            <div class=\"progress-bar\" [style.width.%]=\"uploadProgress\"></div>\n          </div>\n          <span class=\"progress-percent\">{{ uploadProgress }}%</span>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- New Folder Modal -->\n  @if (showNewFolderDialog) {\n    <div class=\"modal-overlay\" (click)=\"onCancelNewFolder()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Create New Folder</h3>\n          <button class=\"modal-close\" (click)=\"onCancelNewFolder()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <label>Folder name:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"newFolderName\"\n            [disabled]=\"isCreatingFolder\"\n            placeholder=\"Enter folder name\"\n            (keydown.enter)=\"onCreateFolder()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelNewFolder()\" [disabled]=\"isCreatingFolder\">Cancel</button>\n          <button (click)=\"onCreateFolder()\" [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n            @if (isCreatingFolder) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCreatingFolder ? 'Creating...' : 'Create' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Delete Confirmation Modal -->\n  @if (showDeleteDialog && itemToDelete) {\n    <div class=\"modal-overlay\" (click)=\"onCancelDelete()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n          <button class=\"modal-close\" (click)=\"onCancelDelete()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?</p>\n          @if (itemToDelete.type === 'folder') {\n            <p class=\"warning\">This will delete the folder and all its contents.</p>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelDelete()\" [disabled]=\"isDeleting\">Cancel</button>\n          <button (click)=\"onConfirmDelete()\" [disabled]=\"isDeleting\" class=\"danger\">\n            @if (isDeleting) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isDeleting ? 'Deleting...' : 'Delete' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Rename Modal -->\n  @if (showRenameDialog && itemToRename) {\n    <div class=\"modal-overlay\" (click)=\"onCancelRename()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelRename()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <label>New name:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"newItemName\"\n            [disabled]=\"isRenaming\"\n            placeholder=\"Enter new name\"\n            (keydown.enter)=\"onConfirmRename()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelRename()\" [disabled]=\"isRenaming\">Cancel</button>\n          <button (click)=\"onConfirmRename()\" [disabled]=\"isRenaming || !newItemName.trim()\">\n            @if (isRenaming) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isRenaming ? 'Renaming...' : 'Rename' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Copy Modal -->\n  @if (showCopyDialog && itemToCopy) {\n    <div class=\"modal-overlay\" (click)=\"onCancelCopy()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelCopy()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Copying: <strong>{{ itemToCopy.name }}</strong></p>\n          <label>Destination path:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"copyDestinationPath\"\n            [disabled]=\"isCopying\"\n            placeholder=\"Enter destination path\"\n            (keydown.enter)=\"onConfirmCopy()\">\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelCopy()\" [disabled]=\"isCopying\">Cancel</button>\n          <button (click)=\"onConfirmCopy()\" [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n            @if (isCopying) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCopying ? 'Copying...' : 'Copy' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Move Modal -->\n  @if (showMoveDialog && itemToMove) {\n    <div class=\"modal-overlay\" (click)=\"onCancelMove()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n          <button class=\"modal-close\" (click)=\"onCancelMove()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Moving: <strong>{{ itemToMove.name }}</strong></p>\n          <label>Destination folder path:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"moveDestinationPath\"\n            [disabled]=\"isMoving\"\n            placeholder=\"Enter destination folder (e.g., folder1/folder2/)\"\n            (keydown.enter)=\"onConfirmMove()\">\n          <p style=\"font-size: 11px; color: var(--mj-text-secondary); margin-top: 8px;\">\n            File will be moved to: {{ moveDestinationPath }}{{ itemToMove.name }}\n          </p>\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelMove()\" [disabled]=\"isMoving\">Cancel</button>\n          <button (click)=\"onConfirmMove()\" [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n            @if (isMoving) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isMoving ? 'Moving...' : 'Move' }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n\n  <!-- Copy to Account Modal -->\n  @if (showCopyToProviderDialog && itemToCopyToProvider) {\n    <div class=\"modal-overlay\" (click)=\"onCancelCopyToAccount()\">\n      <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n        <div class=\"modal-header\">\n          <h3>Copy to Another Account</h3>\n          <button class=\"modal-close\" (click)=\"onCancelCopyToAccount()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <div class=\"modal-body\">\n          <p>Copying: <strong>{{ itemToCopyToProvider.name }}</strong></p>\n          <p style=\"font-size: 12px; color: var(--mj-text-secondary); margin-bottom: 16px;\">\n            From: <strong>{{ account?.account?.Name }}</strong>\n          </p>\n          <label>Select destination account(s):</label>\n          <div class=\"account-checkbox-list\">\n            @for (a of availableAccounts; track a) {\n              <div class=\"account-checkbox-item\">\n                <input type=\"checkbox\"\n                  [id]=\"'dest-account-' + a.account.ID\"\n                  [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n                  [disabled]=\"isCopyingToAccount\"\n                  (change)=\"toggleDestinationAccount(a.account.ID)\">\n                <label [for]=\"'dest-account-' + a.account.ID\">\n                  {{ a.account.Name }} <span class=\"provider-badge\">{{ a.provider.Name }}</span>\n                </label>\n              </div>\n            }\n          </div>\n          <label style=\"margin-top: 16px;\">Destination filename:</label>\n          <input type=\"text\"\n            [(ngModel)]=\"copyToAccountDestinationPath\"\n            [disabled]=\"isCopyingToAccount\"\n            placeholder=\"Enter destination filename\"\n            (keydown.enter)=\"onConfirmCopyToAccount()\">\n          @if (copyToAccountProgress) {\n            <div class=\"copy-progress\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n              Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...\n            </div>\n          }\n        </div>\n        <div class=\"modal-footer\">\n          <button (click)=\"onCancelCopyToAccount()\" [disabled]=\"isCopyingToAccount\">Cancel</button>\n          <button (click)=\"onConfirmCopyToAccount()\"\n            [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n            @if (isCopyingToAccount) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            }\n            {{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}\n          </button>\n        </div>\n      </div>\n    </div>\n  }\n", styles: ["/* ===========================\n   File Grid - Traditional File Manager Style\n   =========================== */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.file-grid-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  position: relative;\n}\n\n/* ===========================\n   Breadcrumb Navigation Bar\n   =========================== */\n\n.breadcrumb-bar {\n  display: flex;\n  align-items: center;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n  gap: 10px;\n  flex-wrap: wrap;\n}\n\n.nav-buttons {\n  display: flex;\n  gap: 4px;\n}\n\n.nav-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.nav-btn:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.nav-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.breadcrumb-path {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n}\n\n.breadcrumb-path i {\n  color: var(--mj-text-secondary);\n}\n\n.path-text {\n  font-weight: 500;\n}\n\n.search-bar {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-left: auto;\n  position: relative;\n}\n\n.search-input {\n  padding: 4px 30px 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  min-width: 200px;\n}\n\n.search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-clear-btn {\n  position: absolute;\n  right: 142px;\n  background: none;\n  border: none;\n  cursor: pointer;\n  color: var(--mj-text-disabled);\n  padding: 4px;\n  font-size: 12px;\n}\n\n.search-clear-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.file-type-filter {\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 12px;\n  font-family: inherit;\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.file-type-filter:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n/* ===========================\n   File Table\n   =========================== */\n\n.file-table-wrapper {\n  flex: 1;\n  overflow: auto;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 12px;\n}\n\n.file-table thead {\n  position: sticky;\n  top: 0;\n  background-color: var(--mj-bg-surface-sunken);\n  z-index: 10;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 6px 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  user-select: none;\n}\n\n.file-table th:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.file-table th span {\n  margin-right: 4px;\n}\n\n.sort-icon {\n  font-size: 10px;\n  color: var(--mj-text-secondary);\n}\n\n.file-table tbody tr {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.file-table tbody tr:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.file-table tbody tr.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.file-table tbody tr.selected:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface));\n}\n\n.file-table td {\n  padding: 6px 10px;\n  color: var(--mj-text-primary);\n}\n\n/* Column Widths */\n.col-name {\n  width: 50%;\n}\n\n.col-type {\n  width: 15%;\n}\n\n.col-size {\n  width: 15%;\n}\n\n.col-modified {\n  width: 20%;\n}\n\n/* Name Column with Icon */\n.col-name {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.item-icon {\n  font-size: 14px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.item-name {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n/* Folder Icons */\n.fa-folder {\n  color: var(--mj-status-warning);\n}\n\n/* File Type Icons */\n.fa-file-pdf {\n  color: var(--mj-status-error);\n}\n\n.fa-file-word {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-excel {\n  color: var(--mj-status-success);\n}\n\n.fa-file-image {\n  color: var(--mj-brand-primary);\n}\n\n.fa-file-video {\n  color: var(--mj-status-warning);\n}\n\n.fa-file-audio {\n  color: var(--mj-status-error);\n}\n\n.fa-file-archive {\n  color: var(--mj-text-secondary);\n}\n\n.fa-file-code {\n  color: var(--mj-status-success);\n}\n\n/* ===========================\n   Grid View\n   =========================== */\n\n.file-grid-wrapper {\n  flex: 1;\n  overflow: auto;\n  padding: 10px;\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.file-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));\n  gap: 12px;\n}\n\n.grid-item {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 12px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.15s;\n  background: var(--mj-bg-surface);\n}\n\n.grid-item:hover {\n  background-color: var(--mj-bg-surface-card);\n  border-color: var(--mj-border-strong);\n}\n\n.grid-item.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n}\n\n.grid-icon {\n  font-size: 48px;\n  margin-bottom: 8px;\n  color: var(--mj-text-secondary);\n}\n\n.grid-icon i {\n  display: block;\n}\n\n.grid-name {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  text-align: center;\n  word-break: break-word;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  max-width: 100%;\n}\n\n.grid-meta {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  margin-top: 4px;\n}\n\n/* ===========================\n   Bottom Toolbar\n   =========================== */\n\n.bottom-toolbar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 10px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n  min-height: 36px;\n}\n\n.toolbar-left {\n  display: flex;\n  gap: 6px;\n}\n\n.toolbar-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 5px 12px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  transition: background-color 0.15s;\n}\n\n.toolbar-btn:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.toolbar-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.toolbar-btn i {\n  font-size: 12px;\n}\n\n.toolbar-right {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n}\n\n.view-toggle {\n  display: flex;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.view-btn {\n  background: var(--mj-bg-surface);\n  border: none;\n  border-right: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.view-btn:last-child {\n  border-right: none;\n}\n\n.view-btn:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.view-btn.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-count {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n}\n\n/* ===========================\n   Loading / Error / Empty States\n   =========================== */\n\n.loading-state {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n/* Empty/error states fill the file pane vertically (flex-parent gotcha) */\n.file-grid-empty-fill {\n  flex: 1;\n}\n\n/* ===========================\n   Drag & Drop Overlay\n   =========================== */\n\n.drag-overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: color-mix(in srgb, var(--mj-bg-surface) 95%, transparent);\n  z-index: 1000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 3px dashed var(--mj-brand-primary);\n}\n\n.drag-content {\n  text-align: center;\n}\n\n.drag-icon {\n  font-size: 64px;\n  color: var(--mj-brand-primary);\n  margin-bottom: 16px;\n}\n\n.drag-title {\n  font-size: 20px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  margin: 0;\n}\n\n/* ===========================\n   Upload Progress\n   =========================== */\n\n.upload-progress {\n  position: absolute;\n  bottom: 40px;\n  right: 20px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 12px 16px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n  min-width: 300px;\n  z-index: 100;\n}\n\n.progress-content {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.progress-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.progress-bar-wrap {\n  width: 100%;\n  height: 6px;\n  background-color: var(--mj-border-default);\n  border-radius: 3px;\n  overflow: hidden;\n}\n\n.progress-bar {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.3s ease;\n}\n\n.progress-percent {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n/* ===========================\n   Modal Dialogs\n   =========================== */\n\n.modal-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 2000;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.modal-dialog {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-text-disabled);\n  border-radius: 4px;\n  min-width: 400px;\n  max-width: 90%;\n  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);\n}\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-strong);\n}\n\n.modal-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-close {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.modal-close:hover {\n  color: var(--mj-text-primary);\n}\n\n.modal-body {\n  padding: 16px;\n}\n\n.modal-body label {\n  display: block;\n  margin-bottom: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-body input[type=\"text\"] {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.modal-body input[type=\"text\"]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body select,\n.modal-body .provider-select {\n  width: 100%;\n  padding: 6px 10px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 3px;\n  font-size: 13px;\n  font-family: inherit;\n  background-color: var(--mj-bg-surface);\n  cursor: pointer;\n}\n\n.modal-body select:focus,\n.modal-body .provider-select:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body select:disabled,\n.modal-body .provider-select:disabled {\n  background-color: var(--mj-bg-surface-card);\n  cursor: not-allowed;\n}\n\n.modal-body p {\n  margin: 0 0 12px 0;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.modal-body .warning {\n  color: var(--mj-status-error);\n  font-size: 12px;\n}\n\n/* Checkbox list for multi-account selection */\n.account-checkbox-list {\n  max-height: 200px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  padding: 8px;\n  background: var(--mj-bg-surface-card);\n}\n\n.account-checkbox-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 4px;\n  border-radius: 3px;\n  cursor: pointer;\n}\n\n.account-checkbox-item:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.account-checkbox-item input[type=\"checkbox\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n  accent-color: var(--mj-brand-primary);\n}\n\n.account-checkbox-item label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: normal;\n  margin: 0;\n}\n\n.provider-badge {\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  background: var(--mj-border-default);\n  padding: 2px 6px;\n  border-radius: 10px;\n}\n\n.copy-progress {\n  margin-top: 12px;\n  padding: 8px 12px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-radius: 4px;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  background-color: var(--mj-bg-surface-card);\n  border-top: 1px solid var(--mj-border-strong);\n}\n\n.modal-footer button {\n  padding: 6px 16px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface);\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.modal-footer button:hover:not(:disabled) {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.modal-footer button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.modal-footer button.danger {\n  background-color: var(--mj-status-error);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-status-error);\n}\n\n.modal-footer button.danger:hover:not(:disabled) {\n  background-color: var(--mj-status-error-hover, color-mix(in srgb, var(--mj-status-error) 80%, black));\n}\n\n/* ===========================\n   Scrollbars\n   =========================== */\n\n.file-table-wrapper::-webkit-scrollbar {\n  width: 12px;\n  height: 12px;\n}\n\n.file-table-wrapper::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border: 2px solid var(--mj-bg-surface-sunken);\n}\n\n.file-table-wrapper::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-disabled);\n}\n\n/* ===========================\n   Responsive Design\n   =========================== */\n\n@media screen and (max-width: 768px) {\n  .file-table {\n    font-size: 11px;\n  }\n\n  .file-table th,\n  .file-table td {\n    padding: 4px 6px;\n  }\n\n  .col-type,\n  .col-size {\n    display: none;\n  }\n\n  .col-name {\n    width: 60%;\n  }\n\n  .col-modified {\n    width: 40%;\n  }\n\n  .toolbar-btn span {\n    display: none;\n  }\n\n  .modal-dialog {\n    min-width: 90%;\n  }\n}\n\n/* ===========================\n   Multi-Provider Search\n   =========================== */\n\n.multi-search-btn {\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 8px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  transition: all 0.15s;\n}\n\n.multi-search-btn:hover {\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.multi-search-btn.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-provider-search-panel {\n  background: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-strong);\n  display: flex;\n  flex-direction: column;\n  max-height: 70vh;\n  overflow: hidden;\n}\n\n.search-panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.search-panel-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.close-panel-btn {\n  background: none;\n  border: none;\n  cursor: pointer;\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  padding: 4px;\n}\n\n.close-panel-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.search-panel-body {\n  padding: 16px;\n}\n\n.search-input-row {\n  display: flex;\n  gap: 8px;\n  margin-bottom: 16px;\n}\n\n.multi-search-input {\n  flex: 1;\n  padding: 8px 12px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 4px;\n  font-size: 13px;\n  font-family: inherit;\n}\n\n.multi-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n}\n\n.search-execute-btn {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border: none;\n  padding: 8px 16px;\n  cursor: pointer;\n  border-radius: 4px;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background-color 0.15s;\n}\n\n.search-execute-btn:hover:not(:disabled) {\n  background-color: var(--mj-brand-primary-hover);\n}\n\n.search-execute-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.provider-selection {\n  margin-bottom: 8px;\n}\n\n.provider-selection-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 8px;\n}\n\n.provider-checkboxes {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 12px;\n}\n\n.provider-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  padding: 4px 8px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface-card);\n  transition: all 0.15s;\n}\n\n.provider-checkbox:hover:not(.disabled) {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.provider-checkbox.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n  background: var(--mj-bg-surface-card);\n}\n\n.provider-checkbox input[type=\"checkbox\"] {\n  cursor: pointer;\n}\n\n.provider-checkbox .provider-name {\n  font-weight: 500;\n}\n\n.no-search-badge {\n  font-size: 10px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n/* Search Results */\n.search-results-container {\n  flex: 1;\n  overflow: auto;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 10px 16px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-results-summary .result-count {\n  font-weight: 600;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.search-results-summary .provider-stats {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n}\n\n.search-results-summary .failed-count {\n  color: var(--mj-status-error);\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: none;\n  border: 1px solid var(--mj-border-strong);\n  padding: 4px 10px;\n  cursor: pointer;\n  border-radius: 3px;\n  font-size: 11px;\n  color: var(--mj-text-secondary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.clear-results-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-primary);\n}\n\n.provider-results-list {\n  padding: 8px 0;\n}\n\n.provider-result-group {\n  margin-bottom: 16px;\n}\n\n.provider-result-group:last-child {\n  margin-bottom: 0;\n}\n\n.provider-result-header {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 16px;\n  background: var(--mj-bg-surface-card);\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.provider-result-header i {\n  color: var(--mj-brand-primary);\n}\n\n.provider-result-header .result-count {\n  font-weight: normal;\n  color: var(--mj-text-secondary);\n}\n\n.provider-result-group.failed .provider-result-header {\n  background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n}\n\n.provider-result-group.failed .provider-result-header i {\n  color: var(--mj-status-error);\n}\n\n.error-badge {\n  color: var(--mj-status-error);\n  font-weight: normal;\n  font-size: 12px;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.provider-result-files {\n  padding: 0;\n}\n\n.search-result-item {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  padding: 8px 16px 8px 40px;\n  border-bottom: 1px solid var(--mj-bg-surface-sunken);\n  cursor: pointer;\n  transition: background-color 0.1s;\n}\n\n.search-result-item:hover {\n  background-color: var(--mj-bg-surface-card);\n}\n\n.search-result-item:last-child {\n  border-bottom: none;\n}\n\n.search-result-item .file-icon {\n  font-size: 16px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.search-result-item .file-info {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.search-result-item .file-name {\n  font-size: 13px;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item .file-path {\n  font-size: 11px;\n  color: var(--mj-text-disabled);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.search-result-item .file-size {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 60px;\n  text-align: right;\n}\n\n.search-result-item .file-date {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n  min-width: 140px;\n  text-align: right;\n}\n\n.no-results-message {\n  padding: 16px 40px;\n  font-size: 12px;\n  color: var(--mj-text-disabled);\n  font-style: italic;\n}\n\n.searching-state {\n  padding: 40px 20px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-file-grid', template: "<div class=\"file-grid-container\"\n  (dragenter)=\"onDragEnter($event)\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\">\n\n  <!-- Top Command Bar: Breadcrumbs & Primary Actions -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"command-bar breadcrumb-bar\">\n      <!-- Left: Breadcrumb Navigation Trail -->\n      <div class=\"command-bar-left\">\n        <div class=\"nav-btn-group nav-buttons\">\n          <button\n            type=\"button\"\n            class=\"mj-tool-btn nav-btn\"\n            [disabled]=\"!canNavigateUp()\"\n            (click)=\"navigateUp()\"\n            title=\"Go up to parent folder\">\n            <i class=\"fa-solid fa-arrow-up\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"mj-tool-btn nav-btn\"\n            (click)=\"refresh()\"\n            title=\"Refresh current folder\">\n            <i class=\"fa-solid fa-arrows-rotate\"></i>\n          </button>\n        </div>\n\n        <nav class=\"breadcrumb-trail breadcrumb-path\" aria-label=\"Folder Path\">\n          <i class=\"fa-solid fa-folder-open trail-root-icon\"></i>\n          @for (crumb of getPathBreadcrumbs(); track crumb.path; let last = $last) {\n            <button\n              type=\"button\"\n              class=\"crumb-btn\"\n              [class.current]=\"last\"\n              (click)=\"navigateToBreadcrumb(crumb.path)\"\n              [title]=\"crumb.name\">\n              {{ crumb.name }}\n            </button>\n            @if (!last) {\n              <span class=\"crumb-separator\">/</span>\n            }\n          }\n        </nav>\n      </div>\n\n      <!-- Right: Search, Filter, View Mode & Action Buttons -->\n      <div class=\"command-bar-right\">\n        <!-- Search & Filter Bar -->\n        <div class=\"search-pill search-bar\">\n          <i class=\"fa-solid fa-magnifying-glass search-icon\"></i>\n          <input\n            type=\"text\"\n            class=\"search-input\"\n            [(ngModel)]=\"searchQuery\"\n            (ngModelChange)=\"onSearchChange($event)\"\n            placeholder=\"Search files...\"\n            [disabled]=\"isLoading || isMultiProviderSearchMode\" />\n          @if (searchQuery && !isMultiProviderSearchMode) {\n            <button\n              type=\"button\"\n              class=\"search-clear-btn\"\n              (click)=\"clearSearch()\"\n              title=\"Clear search\">\n              <i class=\"fa-solid fa-xmark\"></i>\n            </button>\n          }\n          <select\n            class=\"type-filter-select file-type-filter\"\n            [(ngModel)]=\"fileTypeFilter\"\n            (ngModelChange)=\"onFileTypeFilterChange($event)\"\n            [disabled]=\"isLoading || isMultiProviderSearchMode\">\n            <option value=\"all\">All Items</option>\n            <option value=\"files\">Files only</option>\n            <option value=\"folders\">Folders only</option>\n          </select>\n        </div>\n\n        <!-- Search Across Accounts Toggle -->\n        <button\n          type=\"button\"\n          class=\"mj-btn-search-toggle multi-search-btn\"\n          [class.active]=\"isMultiProviderSearchMode\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Search across all storage accounts\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n          <span>All Accounts</span>\n        </button>\n\n        <!-- View Switcher -->\n        <div class=\"view-mode-toggle view-toggle\">\n          <button\n            type=\"button\"\n            class=\"view-mode-btn view-btn\"\n            [class.active]=\"viewMode === 'list'\"\n            (click)=\"viewMode = 'list'\"\n            title=\"List View\">\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\n          <button\n            type=\"button\"\n            class=\"view-mode-btn view-btn\"\n            [class.active]=\"viewMode === 'grid'\"\n            (click)=\"viewMode = 'grid'\"\n            title=\"Grid View\">\n            <i class=\"fa-solid fa-table-cells-large\"></i>\n          </button>\n        </div>\n\n        <!-- Primary Action CTAs -->\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary toolbar-btn\"\n          (click)=\"onNewFolderClick()\"\n          title=\"Create New Folder\">\n          <i class=\"fa-solid fa-folder-plus\"></i>\n          <span>New Folder</span>\n        </button>\n\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary toolbar-btn\"\n          (click)=\"onUploadClick()\"\n          title=\"Upload Files\">\n          <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n          <span>Upload</span>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Selection Action Bar (Appears when 1+ items selected) -->\n  @if (selectedItems.length > 0 && !isMultiProviderSearchMode) {\n    <div class=\"selection-bar\">\n      <div class=\"selection-bar-left\">\n        <label class=\"selection-checkbox-wrap\" (click)=\"$event.stopPropagation()\">\n          <input\n            type=\"checkbox\"\n            [checked]=\"areAllSelected()\"\n            (change)=\"areAllSelected() ? deselectAll() : selectAll()\" />\n          <span class=\"selection-count\">{{ selectedItems.length }} item{{ selectedItems.length === 1 ? '' : 's' }} selected</span>\n        </label>\n      </div>\n\n      <div class=\"selection-bar-right\">\n        @if (selectedItems.length === 1 && getSelectedItem()?.type === 'file') {\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"openPreview(getSelectedItem()!)\"\n            title=\"Preview file\">\n            <i class=\"fa-solid fa-eye\"></i>\n            <span>Preview</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onDownloadClick()\"\n            title=\"Download file\">\n            <i class=\"fa-solid fa-download\"></i>\n            <span>Download</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onCopyToAccountClick()\"\n            title=\"Copy to another storage account\">\n            <i class=\"fa-solid fa-cloud-arrow-up\"></i>\n            <span>Copy to...</span>\n          </button>\n        }\n        @if (selectedItems.length === 1) {\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onRenameClick()\"\n            title=\"Rename item\">\n            <i class=\"fa-solid fa-pen\"></i>\n            <span>Rename</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onCopyClick()\"\n            title=\"Copy to path\">\n            <i class=\"fa-solid fa-copy\"></i>\n            <span>Copy</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"sel-action-btn\"\n            (click)=\"onMoveClick()\"\n            title=\"Move item\">\n            <i class=\"fa-solid fa-arrows-up-down-left-right\"></i>\n            <span>Move</span>\n          </button>\n        }\n        <button\n          type=\"button\"\n          class=\"sel-action-btn sel-action-btn--danger\"\n          (click)=\"onDeleteClick()\"\n          title=\"Delete selected item(s)\">\n          <i class=\"fa-solid fa-trash\"></i>\n          <span>Delete</span>\n        </button>\n        <button\n          type=\"button\"\n          class=\"sel-action-btn sel-action-btn--ghost\"\n          (click)=\"deselectAll()\"\n          title=\"Deselect all\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Multi-Provider Search Panel -->\n  @if (isMultiProviderSearchMode) {\n    <div class=\"multi-search-card multi-provider-search-panel\">\n      <div class=\"multi-search-header search-panel-header\">\n        <div class=\"multi-search-title\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n          <h3>Search Across Storage Accounts</h3>\n        </div>\n        <button\n          type=\"button\"\n          class=\"modal-close-btn close-panel-btn\"\n          (click)=\"toggleMultiAccountSearchMode()\"\n          title=\"Close search\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <div class=\"multi-search-body search-panel-body\">\n        <div class=\"multi-search-bar search-input-row\">\n          <input\n            type=\"text\"\n            class=\"multi-search-text multi-search-input\"\n            [(ngModel)]=\"multiProviderSearchQuery\"\n            placeholder=\"Type query to search across connected accounts...\"\n            (keydown.enter)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching\" />\n          <button\n            type=\"button\"\n            class=\"mj-action-btn mj-action-btn--primary search-execute-btn\"\n            (click)=\"executeMultiAccountSearch()\"\n            [disabled]=\"isSearching || !multiProviderSearchQuery.trim() || selectedSearchProviders.size === 0\">\n            @if (isSearching) {\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            } @else {\n              <i class=\"fa-solid fa-magnifying-glass\"></i>\n            }\n            <span>{{ isSearching ? 'Searching...' : 'Search Accounts' }}</span>\n          </button>\n        </div>\n\n        <div class=\"multi-search-accounts provider-selection\">\n          <span class=\"account-select-label provider-selection-label\">Target Accounts:</span>\n          <div class=\"account-pill-list provider-checkboxes\">\n            @for (a of availableAccounts; track a.account.ID) {\n              <label\n                class=\"account-select-pill provider-checkbox\"\n                [class.disabled]=\"!accountSupportsSearch(a)\"\n                [class.checked]=\"isAccountSelectedForSearch(a.account.ID)\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"isAccountSelectedForSearch(a.account.ID)\"\n                  (change)=\"toggleSearchAccount(a.account.ID)\"\n                  [disabled]=\"!accountSupportsSearch(a)\" />\n                <span class=\"pill-account-name provider-name\">{{ a.account.Name }}</span>\n                <span class=\"pill-provider-tag provider-type\">{{ a.provider.Name }}</span>\n                @if (!accountSupportsSearch(a)) {\n                  <span class=\"pill-no-search no-search-badge\">(no search)</span>\n                }\n              </label>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Search Results -->\n      @if (multiProviderSearchResults) {\n        <div class=\"multi-search-results search-results-container\">\n          <div class=\"results-meta-bar search-results-summary\">\n            <span class=\"meta-count result-count\">\n              <strong>{{ multiProviderSearchResults.totalResultsReturned }}</strong> result{{ multiProviderSearchResults.totalResultsReturned === 1 ? '' : 's' }} found\n            </span>\n            <span class=\"meta-stats provider-stats\">\n              ({{ multiProviderSearchResults.successfulAccounts }} account{{ multiProviderSearchResults.successfulAccounts === 1 ? '' : 's' }} searched)\n            </span>\n            <button\n              type=\"button\"\n              class=\"clear-results-btn\"\n              (click)=\"clearMultiProviderSearch()\">\n              <i class=\"fa-solid fa-xmark\"></i> Clear Results\n            </button>\n          </div>\n\n          <div class=\"results-groups provider-results-list\">\n            @for (accountResult of multiProviderSearchResults.accountResults; track accountResult.accountID) {\n              <div class=\"result-group provider-result-group\" [class.failed]=\"!accountResult.success\">\n                <div class=\"result-group-head provider-result-header\">\n                  <i class=\"fa-solid fa-cloud-bolt group-icon\"></i>\n                  <span class=\"group-account-name provider-name\">{{ accountResult.accountName }}</span>\n                  @if (accountResult.success) {\n                    <span class=\"group-count-badge result-count\">{{ accountResult.results.length }}</span>\n                  } @else {\n                    <span class=\"group-error-badge error-badge\">{{ accountResult.errorMessage }}</span>\n                  }\n                </div>\n\n                @if (accountResult.success && accountResult.results.length > 0) {\n                  <div class=\"result-items-grid provider-result-files\">\n                    @for (file of accountResult.results; track file.path) {\n                      <div class=\"search-item-row search-result-item\">\n                        <i [class]=\"getSearchResultIcon(file)\" class=\"search-item-icon file-icon\"></i>\n                        <div class=\"search-item-info file-info\">\n                          <span class=\"search-item-name file-name\">{{ file.name }}</span>\n                          <span class=\"search-item-path file-path\">{{ file.path }}</span>\n                        </div>\n                        <span class=\"search-item-size file-size\">{{ formatSearchResultSize(file.size) }}</span>\n                        <span class=\"search-item-date file-date\">{{ formatSearchResultDate(file.lastModified) }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (accountResult.success && accountResult.results.length === 0) {\n                  <div class=\"group-empty-text no-results-message\">No matching files found in this account</div>\n                }\n              </div>\n            }\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Loading State -->\n  @if (isLoading && !isMultiProviderSearchMode) {\n    <div class=\"grid-loading-container loading-state\">\n      <mj-loading text=\"Loading files...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (errorMessage && !isLoading) {\n    <mj-empty-state\n      class=\"file-grid-empty-fill\"\n      Variant=\"error\"\n      Icon=\"fa-solid fa-triangle-exclamation\"\n      Title=\"Unable to load files\"\n      [Message]=\"errorMessage\"\n      ActionText=\"Retry\"\n      ActionIcon=\"fa-solid fa-arrows-rotate\"\n      (Action)=\"refresh()\" />\n  }\n\n  <!-- Grid View -->\n  @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'grid') {\n    <div class=\"file-cards-grid file-grid file-grid-wrapper\">\n      @for (item of filteredItems; track item.key) {\n        <div\n          class=\"file-card grid-item\"\n          [class.selected]=\"selectedItems.includes(item.key)\"\n          (click)=\"onTileClick(item, $event)\"\n          (dblclick)=\"onItemDoubleClick(item)\"\n          [title]=\"item.name\">\n\n          <!-- Card Top Row: Checkbox & Quick Actions -->\n          <div class=\"file-card-header\">\n            <label class=\"file-card-checkbox\" (click)=\"$event.stopPropagation()\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"selectedItems.includes(item.key)\"\n                (change)=\"toggleItemSelection(item, $event)\" />\n            </label>\n            <div class=\"file-card-quick-actions\" (click)=\"$event.stopPropagation()\">\n              @if (item.type === 'file') {\n                <button\n                  type=\"button\"\n                  class=\"quick-action-btn\"\n                  (click)=\"openPreview(item)\"\n                  title=\"Preview\">\n                  <i class=\"fa-solid fa-eye\"></i>\n                </button>\n                <button\n                  type=\"button\"\n                  class=\"quick-action-btn\"\n                  (click)=\"downloadFile(item)\"\n                  title=\"Download\">\n                  <i class=\"fa-solid fa-download\"></i>\n                </button>\n              }\n            </div>\n          </div>\n\n          <!-- Card Thumbnail/Icon -->\n          <div class=\"file-card-icon-container grid-icon\" [class]=\"getItemColorClass(item)\">\n            <i [class]=\"getItemIcon(item)\"></i>\n          </div>\n\n          <!-- Card Body: Name & Meta -->\n          <div class=\"file-card-body\">\n            <span class=\"file-card-name grid-name\">{{ item.name }}</span>\n            <div class=\"file-card-meta grid-meta\">\n              <span class=\"meta-size\">{{ item.type === 'folder' ? 'Folder' : formatFileSize(item.size) }}</span>\n              <span class=\"meta-date\">{{ formatDate(item.lastModified) }}</span>\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- List View Table -->\n  @if (!isLoading && !errorMessage && filteredItems.length > 0 && viewMode === 'list') {\n    <div class=\"file-table-container file-table-wrapper\">\n      <table class=\"file-table\">\n        <thead>\n          <tr>\n            <th class=\"th-check\">\n              <input\n                type=\"checkbox\"\n                [checked]=\"areAllSelected()\"\n                (change)=\"areAllSelected() ? deselectAll() : selectAll()\" />\n            </th>\n            <th class=\"th-name col-name\" (click)=\"onSortChange([{ field: 'name', dir: sort[0].field === 'name' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Name</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'name' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'name' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'name'\"></i>\n            </th>\n            <th class=\"th-type col-type\">Type</th>\n            <th class=\"th-size col-size\" (click)=\"onSortChange([{ field: 'size', dir: sort[0].field === 'size' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Size</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'size' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'size' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'size'\"></i>\n            </th>\n            <th class=\"th-date col-modified\" (click)=\"onSortChange([{ field: 'lastModified', dir: sort[0].field === 'lastModified' && sort[0].dir === 'asc' ? 'desc' : 'asc' }])\">\n              <span>Modified</span>\n              <i class=\"fa-solid sort-arrow sort-icon\"\n                [class.fa-caret-up]=\"sort[0].field === 'lastModified' && sort[0].dir === 'asc'\"\n                [class.fa-caret-down]=\"sort[0].field === 'lastModified' && sort[0].dir === 'desc'\"\n                [class.fa-sort]=\"sort[0].field !== 'lastModified'\"></i>\n            </th>\n            <th class=\"th-actions\">Actions</th>\n          </tr>\n        </thead>\n        <tbody>\n          @for (item of filteredItems; track item.key) {\n            <tr\n              class=\"file-table-row file-row\"\n              [class.selected]=\"selectedItems.includes(item.key)\"\n              (click)=\"onTileClick(item, $event)\"\n              (dblclick)=\"onItemDoubleClick(item)\">\n              <td class=\"td-check\" (click)=\"$event.stopPropagation()\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedItems.includes(item.key)\"\n                  (change)=\"toggleItemSelection(item, $event)\" />\n              </td>\n              <td class=\"td-name col-name\">\n                <div class=\"row-name-wrap\">\n                  <div class=\"row-icon-badge\" [class]=\"getItemColorClass(item)\">\n                    <i [class]=\"getItemIcon(item)\" class=\"item-icon\"></i>\n                  </div>\n                  <span class=\"row-file-name item-name\" [title]=\"item.name\">{{ item.name }}</span>\n                </div>\n              </td>\n              <td class=\"td-type col-type\">\n                <span class=\"type-badge item-type\">{{ getFileType(item) }}</span>\n              </td>\n              <td class=\"td-size col-size\">\n                <span class=\"size-text item-size\">{{ item.type === 'folder' ? '\u2014' : formatFileSize(item.size) }}</span>\n              </td>\n              <td class=\"td-date col-modified\">\n                <span class=\"date-text item-date\">{{ formatDate(item.lastModified) }}</span>\n              </td>\n              <td class=\"td-actions\" (click)=\"$event.stopPropagation()\">\n                <div class=\"row-action-buttons\">\n                  @if (item.type === 'file') {\n                    <button\n                      type=\"button\"\n                      class=\"row-act-btn\"\n                      (click)=\"openPreview(item)\"\n                      title=\"Preview\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                    </button>\n                    <button\n                      type=\"button\"\n                      class=\"row-act-btn\"\n                      (click)=\"downloadFile(item)\"\n                      title=\"Download\">\n                      <i class=\"fa-solid fa-download\"></i>\n                    </button>\n                  }\n                </div>\n              </td>\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n\n  <!-- Empty State -->\n  @if (!isLoading && !errorMessage && filteredItems.length === 0 && !isMultiProviderSearchMode) {\n    <mj-empty-state\n      Icon=\"fa-solid fa-folder-open\"\n      Title=\"This folder is empty\"\n      Message=\"Drop files here to upload or create a new folder\"\n      ActionText=\"Upload Files\"\n      ActionIcon=\"fa-solid fa-cloud-arrow-up\"\n      (Action)=\"onUploadClick()\" />\n  }\n\n  <!-- Bottom Status Bar -->\n  @if (!isLoading && !errorMessage) {\n    <div class=\"status-bar\">\n      <span class=\"status-count\">\n        {{ filteredItems.length }} item{{ filteredItems.length === 1 ? '' : 's' }}\n        @if (searchQuery) {\n          (filtered)\n        }\n      </span>\n      <div class=\"status-account-badge\" *ngIf=\"account\">\n        <i class=\"fa-solid fa-cloud\"></i>\n        <span>{{ account.account.Name }} ({{ account.provider.Name }})</span>\n      </div>\n    </div>\n  }\n\n  <!-- Drag & Drop Upload Overlay -->\n  @if (isDragging) {\n    <div class=\"drag-drop-overlay\">\n      <div class=\"drag-drop-content\">\n        <i class=\"fa-solid fa-cloud-arrow-up drag-icon\"></i>\n        <h3>Drop files here to upload</h3>\n        <p>Files will be stored in {{ folderPath || 'Root' }}</p>\n      </div>\n    </div>\n  }\n\n  <!-- Upload Progress Bar -->\n  @if (isUploading) {\n    <div class=\"upload-progress-bar-wrap\">\n      <div class=\"upload-progress-card\">\n        <div class=\"upload-info\">\n          <i class=\"fa-solid fa-spinner fa-spin upload-spinner\"></i>\n          <span class=\"upload-text\">Uploading {{ uploadingFileName }}...</span>\n        </div>\n        <div class=\"progress-track\">\n          <div class=\"progress-fill\" [style.width.%]=\"uploadProgress\"></div>\n        </div>\n      </div>\n    </div>\n  }\n</div>\n\n<!-- ==========================================================================\n     MODAL DIALOGS (Design Tokens, Smooth Animations, Backdrop Blurs)\n     ========================================================================== -->\n\n<!-- File Preview Modal -->\n@if (showPreviewModal && previewItem) {\n  <div class=\"mj-modal-backdrop\" (click)=\"closePreview()\">\n    <div class=\"mj-modal-window preview-modal-window\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <div class=\"modal-title-wrap\">\n          <div class=\"row-icon-badge\" [class]=\"getItemColorClass(previewItem)\">\n            <i [class]=\"getItemIcon(previewItem)\"></i>\n          </div>\n          <div>\n            <h3 class=\"modal-title\">{{ previewItem.name }}</h3>\n            <span class=\"modal-subtitle\">{{ formatFileSize(previewItem.size) }} &bull; {{ formatDate(previewItem.lastModified) }}</span>\n          </div>\n        </div>\n        <div class=\"modal-header-actions\">\n          <button\n            type=\"button\"\n            class=\"mj-action-btn mj-action-btn--secondary\"\n            (click)=\"downloadFile(previewItem)\"\n            title=\"Download file\">\n            <i class=\"fa-solid fa-download\"></i>\n            <span>Download</span>\n          </button>\n          <button\n            type=\"button\"\n            class=\"modal-close-btn\"\n            (click)=\"closePreview()\"\n            title=\"Close preview\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"preview-modal-body\">\n        @if (isLoadingPreview) {\n          <div class=\"preview-loading\">\n            <mj-loading text=\"Loading preview...\"></mj-loading>\n          </div>\n        } @else if (previewUrl) {\n          @switch (previewMediaType) {\n            @case ('image') {\n              <div class=\"preview-media-wrap image-preview-wrap\">\n                <img [src]=\"previewUrl\" [alt]=\"previewItem.name\" class=\"preview-img\" />\n              </div>\n            }\n            @case ('pdf') {\n              <div class=\"preview-media-wrap pdf-preview-wrap\">\n                <iframe [src]=\"previewUrl\" class=\"preview-iframe\" title=\"PDF Preview\"></iframe>\n              </div>\n            }\n            @case ('video') {\n              <div class=\"preview-media-wrap video-preview-wrap\">\n                <video [src]=\"previewUrl\" controls autoplay class=\"preview-video\"></video>\n              </div>\n            }\n            @case ('audio') {\n              <div class=\"preview-media-wrap audio-preview-wrap\">\n                <i class=\"fa-solid fa-music preview-audio-icon\"></i>\n                <audio [src]=\"previewUrl\" controls class=\"preview-audio\"></audio>\n              </div>\n            }\n            @default {\n              <div class=\"preview-fallback\">\n                <i [class]=\"getItemIcon(previewItem)\" class=\"preview-fallback-icon\"></i>\n                <h4>{{ previewItem.name }}</h4>\n                <p>Preview is not supported for this file type.</p>\n                <button\n                  type=\"button\"\n                  class=\"mj-action-btn mj-action-btn--primary\"\n                  (click)=\"downloadFile(previewItem)\">\n                  <i class=\"fa-solid fa-download\"></i>\n                  <span>Download File</span>\n                </button>\n              </div>\n            }\n          }\n        } @else {\n          <div class=\"preview-fallback\">\n            <i class=\"fa-solid fa-triangle-exclamation preview-fallback-icon\"></i>\n            <h4>Preview unavailable</h4>\n            <p>Could not generate a preview link for this file.</p>\n            <button\n              type=\"button\"\n              class=\"mj-action-btn mj-action-btn--primary\"\n              (click)=\"downloadFile(previewItem)\">\n              <i class=\"fa-solid fa-download\"></i>\n              <span>Download File</span>\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  </div>\n}\n\n<!-- New Folder Modal -->\n@if (showNewFolderDialog) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelNewFolder()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Create New Folder</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelNewFolder()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <label class=\"form-label\">Folder name:</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"newFolderName\"\n          [disabled]=\"isCreatingFolder\"\n          placeholder=\"Enter folder name\"\n          (keydown.enter)=\"onCreateFolder()\"\n          autofocus />\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelNewFolder()\"\n          [disabled]=\"isCreatingFolder\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onCreateFolder()\"\n          [disabled]=\"!newFolderName.trim() || isCreatingFolder\">\n          @if (isCreatingFolder) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCreatingFolder ? 'Creating...' : 'Create' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Delete Confirmation Modal -->\n@if (showDeleteDialog && itemToDelete) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelDelete()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Delete {{ itemToDelete.type === 'folder' ? 'Folder' : 'File' }}?</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelDelete()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <p class=\"modal-body-text\">\n          Are you sure you want to delete <strong>{{ itemToDelete.name }}</strong>?\n        </p>\n        @if (itemToDelete.type === 'folder') {\n          <div class=\"modal-warning-banner warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>This will delete the folder and all its contents.</span>\n          </div>\n        }\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelDelete()\"\n          [disabled]=\"isDeleting\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--danger danger\"\n          (click)=\"onConfirmDelete()\"\n          [disabled]=\"isDeleting\">\n          @if (isDeleting) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isDeleting ? 'Deleting...' : 'Delete' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Rename Modal -->\n@if (showRenameDialog && itemToRename) {\n  <div class=\"mj-modal-backdrop modal-overlay\" (click)=\"onCancelRename()\">\n    <div class=\"mj-modal-window modal-compact modal-dialog\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header modal-header\">\n        <h3 class=\"modal-title\">Rename {{ itemToRename.type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn modal-close\" (click)=\"onCancelRename()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body modal-body\">\n        <label class=\"form-label\">New name:</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"newItemName\"\n          [disabled]=\"isRenaming\"\n          placeholder=\"Enter new name\"\n          (keydown.enter)=\"onConfirmRename()\"\n          autofocus />\n      </div>\n      <div class=\"mj-modal-footer modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelRename()\"\n          [disabled]=\"isRenaming\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmRename()\"\n          [disabled]=\"isRenaming || !newItemName.trim()\">\n          @if (isRenaming) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isRenaming ? 'Renaming...' : 'Rename' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Copy Modal -->\n@if (showCopyDialog && itemToCopy) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelCopy()\">\n    <div class=\"mj-modal-window modal-compact\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Copy {{ itemToCopy.type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelCopy()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">Copying <strong>{{ itemToCopy.name }}</strong></p>\n        <label class=\"form-label\">Destination Path</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"copyDestinationPath\"\n          [disabled]=\"isCopying\"\n          placeholder=\"path/to/destination\"\n          (keydown.enter)=\"onConfirmCopy()\" />\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelCopy()\"\n          [disabled]=\"isCopying\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmCopy()\"\n          [disabled]=\"isCopying || !copyDestinationPath.trim()\">\n          @if (isCopying) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCopying ? 'Copying...' : 'Copy' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Move Modal -->\n@if (showMoveDialog && itemToMove) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelMove()\">\n    <div class=\"mj-modal-window modal-compact\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Move {{ itemToMove.type === 'folder' ? 'Folder' : 'File' }}</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelMove()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">Moving <strong>{{ itemToMove.name }}</strong></p>\n        <label class=\"form-label\">Destination Folder</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"moveDestinationPath\"\n          [disabled]=\"isMoving\"\n          placeholder=\"destination/folder/\"\n          (keydown.enter)=\"onConfirmMove()\" />\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelMove()\"\n          [disabled]=\"isMoving\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmMove()\"\n          [disabled]=\"isMoving || !moveDestinationPath.trim()\">\n          @if (isMoving) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isMoving ? 'Moving...' : 'Move' }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n\n<!-- Copy to Account Modal -->\n@if (showCopyToProviderDialog && itemToCopyToProvider) {\n  <div class=\"mj-modal-backdrop\" (click)=\"onCancelCopyToAccount()\">\n    <div class=\"mj-modal-window\" (click)=\"$event.stopPropagation()\">\n      <div class=\"mj-modal-header\">\n        <h3 class=\"modal-title\">Copy to Another Account</h3>\n        <button type=\"button\" class=\"modal-close-btn\" (click)=\"onCancelCopyToAccount()\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n      <div class=\"mj-modal-body\">\n        <p class=\"modal-body-text\">\n          Copying <strong>{{ itemToCopyToProvider.name }}</strong> from <strong>{{ account?.account?.Name }}</strong>\n        </p>\n\n        <label class=\"form-label\">Select Destination Storage Accounts</label>\n        <div class=\"account-picker-list\">\n          @for (a of availableAccounts; track a.account.ID) {\n            <label class=\"account-picker-item\" [for]=\"'dest-acc-' + a.account.ID\">\n              <input\n                type=\"checkbox\"\n                [id]=\"'dest-acc-' + a.account.ID\"\n                [checked]=\"isDestinationAccountSelected(a.account.ID)\"\n                [disabled]=\"isCopyingToAccount\"\n                (change)=\"toggleDestinationAccount(a.account.ID)\" />\n              <span class=\"picker-name\">{{ a.account.Name }}</span>\n              <span class=\"picker-badge\">{{ a.provider.Name }}</span>\n            </label>\n          }\n        </div>\n\n        <label class=\"form-label\" style=\"margin-top: 14px;\">Destination Filename</label>\n        <input\n          type=\"text\"\n          class=\"form-input\"\n          [(ngModel)]=\"copyToAccountDestinationPath\"\n          [disabled]=\"isCopyingToAccount\"\n          placeholder=\"Filename\"\n          (keydown.enter)=\"onConfirmCopyToAccount()\" />\n\n        @if (copyToAccountProgress) {\n          <div class=\"copy-progress-indicator\">\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            <span>Copying to {{ copyToAccountProgress.currentAccount }} ({{ copyToAccountProgress.current }}/{{ copyToAccountProgress.total }})...</span>\n          </div>\n        }\n      </div>\n      <div class=\"mj-modal-footer\">\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--secondary\"\n          (click)=\"onCancelCopyToAccount()\"\n          [disabled]=\"isCopyingToAccount\">\n          Cancel\n        </button>\n        <button\n          type=\"button\"\n          class=\"mj-action-btn mj-action-btn--primary\"\n          (click)=\"onConfirmCopyToAccount()\"\n          [disabled]=\"isCopyingToAccount || selectedDestinationAccounts.size === 0 || !copyToAccountDestinationPath.trim()\">\n          @if (isCopyingToAccount) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n          }\n          <span>{{ isCopyingToAccount ? 'Copying...' : 'Copy to ' + selectedDestinationAccounts.size + ' Account' + (selectedDestinationAccounts.size !== 1 ? 's' : '') }}</span>\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ==========================================================================\n   File Grid & Table Component Styles\n   Modern macOS Finder / Cloud Storage with Design Tokens\n   ========================================================================== */\n\n:host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.file-grid-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  position: relative;\n  overflow: hidden;\n}\n\n/* ==========================================================================\n   Command Bar (Top Navigation, Search & Primary Actions)\n   ========================================================================== */\n\n.command-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n  flex-wrap: wrap;\n}\n\n.command-bar-left {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  min-width: 0;\n  flex: 1;\n}\n\n.nav-btn-group {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  flex-shrink: 0;\n}\n\n.mj-tool-btn {\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-tool-btn:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-tool-btn[disabled] {\n  opacity: 0.4;\n  cursor: not-allowed;\n  background-color: transparent;\n}\n\n/* Breadcrumb Trail */\n.breadcrumb-trail {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: none;\n  min-width: 0;\n  padding: 2px 4px;\n}\n\n.breadcrumb-trail::-webkit-scrollbar {\n  display: none;\n}\n\n.trail-root-icon {\n  color: var(--mj-status-warning, #f59e0b);\n  font-size: 0.95rem;\n  margin-right: 2px;\n  flex-shrink: 0;\n}\n\n.crumb-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.82rem;\n  font-weight: 500;\n  padding: 4px 8px;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  white-space: nowrap;\n  transition: all 0.12s ease;\n}\n\n.crumb-btn:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.crumb-btn.current {\n  color: var(--mj-brand-primary);\n  font-weight: 600;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.crumb-separator {\n  color: var(--mj-text-muted);\n  font-size: 0.75rem;\n}\n\n/* Command Bar Right */\n.command-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  flex-shrink: 0;\n}\n\n/* Search Pill */\n.search-pill {\n  display: flex;\n  align-items: center;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-full, 9999px);\n  padding: 2px 10px;\n  gap: 6px;\n  transition: border-color 0.15s ease;\n}\n\n.search-pill:focus-within {\n  border-color: var(--mj-brand-primary);\n}\n\n.search-icon {\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n}\n\n.search-input {\n  border: none;\n  background: transparent;\n  outline: none;\n  font-size: 0.82rem;\n  color: var(--mj-text-primary);\n  width: 150px;\n  padding: 4px 0;\n}\n\n.search-input::placeholder {\n  color: var(--mj-text-muted);\n}\n\n.search-clear-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 0 4px;\n  font-size: 0.75rem;\n}\n\n.search-clear-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.type-filter-select {\n  border: none;\n  background: transparent;\n  font-size: 0.76rem;\n  color: var(--mj-text-secondary);\n  outline: none;\n  cursor: pointer;\n  padding: 2px 4px;\n  border-left: 1px solid var(--mj-border-default);\n}\n\n/* Toggle Multi-Search Button */\n.mj-btn-search-toggle {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-secondary);\n  font-size: 0.8rem;\n  font-weight: 500;\n  padding: 6px 12px;\n  border-radius: var(--mj-radius-full, 9999px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.mj-btn-search-toggle:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  color: var(--mj-text-primary);\n}\n\n.mj-btn-search-toggle.active {\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary);\n}\n\n/* View Mode Toggle */\n.view-mode-toggle {\n  display: flex;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 4%, var(--mj-bg-surface)));\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 2px;\n  gap: 2px;\n}\n\n.view-mode-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  padding: 5px 8px;\n  font-size: 0.8rem;\n  border-radius: 4px;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.view-mode-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.view-mode-btn.active {\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-brand-primary);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);\n}\n\n/* Action Buttons */\n.mj-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 6px 12px;\n  font-size: 0.82rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: 1px solid transparent;\n  white-space: nowrap;\n}\n\n.mj-action-btn--primary {\n  background-color: var(--mj-brand-primary, #3b82f6);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-action-btn--primary:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn--secondary {\n  background-color: var(--mj-bg-surface);\n  border-color: var(--mj-border-default);\n  color: var(--mj-text-primary);\n}\n\n.mj-action-btn--secondary:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n}\n\n.mj-action-btn--danger {\n  background-color: var(--mj-status-error, #ef4444);\n  color: var(--mj-text-inverse, #ffffff);\n  border-color: var(--mj-status-error, #ef4444);\n}\n\n.mj-action-btn--danger:hover:not([disabled]) {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 85%, var(--mj-text-primary, #000000));\n}\n\n.mj-action-btn[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* ==========================================================================\n   Selection Action Bar\n   ========================================================================== */\n\n.selection-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 8px 16px;\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n  gap: 12px;\n  flex-shrink: 0;\n  animation: slideDown 0.18s ease-out;\n}\n\n@keyframes slideDown {\n  from { transform: translateY(-100%); opacity: 0; }\n  to { transform: translateY(0); opacity: 1; }\n}\n\n.selection-bar-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.selection-checkbox-wrap {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.selection-count {\n  font-size: 0.82rem;\n  font-weight: 600;\n  color: var(--mj-brand-primary);\n}\n\n.selection-bar-right {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.sel-action-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  padding: 4px 10px;\n  font-size: 0.76rem;\n  font-weight: 500;\n  border-radius: var(--mj-radius-sm, 6px);\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.sel-action-btn:hover {\n  background-color: color-mix(in srgb, var(--mj-text-primary) 6%, var(--mj-bg-surface));\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n}\n\n.sel-action-btn--danger:hover {\n  background-color: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n  border-color: var(--mj-status-error);\n  color: var(--mj-status-error);\n}\n\n.sel-action-btn--ghost {\n  background: transparent;\n  border-color: transparent;\n}\n\n/* ==========================================================================\n   Multi-Account Search Card\n   ========================================================================== */\n\n.multi-search-card {\n  margin: 12px 16px;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  overflow: hidden;\n  animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(-6px); }\n  to { opacity: 1; transform: translateY(0); }\n}\n\n.multi-search-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 16px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.multi-search-title {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  color: var(--mj-brand-primary);\n}\n\n.multi-search-title h3 {\n  margin: 0;\n  font-size: 0.88rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.multi-search-body {\n  padding: 14px 16px;\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.multi-search-bar {\n  display: flex;\n  gap: 8px;\n}\n\n.multi-search-text {\n  flex: 1;\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.multi-search-text:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.multi-search-accounts {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n}\n\n.account-select-label {\n  font-size: 0.74rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n}\n\n.account-pill-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.account-select-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 10px;\n  border-radius: var(--mj-radius-full, 9999px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.76rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.account-select-pill.checked {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.account-select-pill.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.pill-account-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.pill-provider-tag {\n  font-size: 0.68rem;\n  color: var(--mj-text-muted);\n}\n\n.pill-no-search {\n  font-size: 0.68rem;\n  color: var(--mj-status-warning);\n}\n\n/* Results */\n.multi-search-results {\n  border-top: 1px solid var(--mj-border-default);\n  padding: 12px 16px;\n  max-height: 400px;\n  overflow-y: auto;\n}\n\n.results-meta-bar {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-bottom: 12px;\n  font-size: 0.8rem;\n}\n\n.meta-count {\n  color: var(--mj-text-primary);\n}\n\n.meta-stats {\n  color: var(--mj-text-secondary);\n}\n\n.clear-results-btn {\n  margin-left: auto;\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  cursor: pointer;\n}\n\n.clear-results-btn:hover {\n  color: var(--mj-text-primary);\n}\n\n.results-groups {\n  display: flex;\n  flex-direction: column;\n  gap: 12px;\n}\n\n.result-group {\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  overflow: hidden;\n}\n\n.result-group-head {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: var(--mj-bg-surface-sunken);\n  font-size: 0.8rem;\n}\n\n.group-account-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.group-count-badge {\n  margin-left: auto;\n  background-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse, #ffffff);\n  font-size: 0.7rem;\n  font-weight: 600;\n  padding: 1px 6px;\n  border-radius: 9999px;\n}\n\n.group-error-badge {\n  margin-left: auto;\n  color: var(--mj-status-error);\n  font-size: 0.72rem;\n}\n\n.result-items-grid {\n  display: flex;\n  flex-direction: column;\n}\n\n.search-item-row {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  padding: 8px 12px;\n  border-bottom: 1px solid var(--mj-border-default);\n  font-size: 0.8rem;\n}\n\n.search-item-row:last-child {\n  border-bottom: none;\n}\n\n.search-item-icon {\n  color: var(--mj-brand-primary);\n}\n\n.search-item-info {\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n  min-width: 0;\n}\n\n.search-item-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.search-item-path {\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.search-item-size, .search-item-date {\n  font-size: 0.74rem;\n  color: var(--mj-text-secondary);\n}\n\n.group-empty-text {\n  padding: 12px;\n  font-size: 0.78rem;\n  color: var(--mj-text-muted);\n  text-align: center;\n}\n\n/* ==========================================================================\n   Cards Grid View\n   ========================================================================== */\n\n.file-cards-grid {\n  flex: 1;\n  overflow-y: auto;\n  padding: 16px;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));\n  gap: 14px;\n  align-content: start;\n}\n\n.file-card {\n  display: flex;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 10px);\n  padding: 10px;\n  cursor: pointer;\n  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  user-select: none;\n}\n\n.file-card:hover {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));\n  transform: translateY(-2px);\n}\n\n.file-card.selected {\n  border-color: var(--mj-brand-primary);\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 6%, var(--mj-bg-surface));\n  box-shadow: 0 0 0 1px var(--mj-brand-primary);\n}\n\n.file-card-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 22px;\n  margin-bottom: 6px;\n}\n\n.file-card-checkbox {\n  cursor: pointer;\n}\n\n.file-card-quick-actions {\n  display: flex;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.15s ease;\n}\n\n.file-card:hover .file-card-quick-actions {\n  opacity: 1;\n}\n\n.quick-action-btn {\n  width: 22px;\n  height: 22px;\n  padding: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.68rem;\n  cursor: pointer;\n  transition: all 0.12s ease;\n}\n\n.quick-action-btn:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* Card Icon / Thumbnail */\n.file-card-icon-container {\n  height: 74px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-md, 8px);\n  margin-bottom: 8px;\n  font-size: 2rem;\n  transition: transform 0.15s ease;\n}\n\n.file-card:hover .file-card-icon-container {\n  transform: scale(1.04);\n}\n\n/* Card Body */\n.file-card-body {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.file-card-name {\n  font-size: 0.8rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  line-height: 1.25;\n  min-height: 2em;\n}\n\n.file-card-meta {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n/* ==========================================================================\n   List View Table\n   ========================================================================== */\n\n.file-table-container {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 16px;\n}\n\n.file-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: 0.82rem;\n}\n\n.file-table th {\n  text-align: left;\n  padding: 8px 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n  color: var(--mj-text-muted);\n  font-size: 0.72rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n  user-select: none;\n  cursor: pointer;\n}\n\n.file-table th.th-check {\n  width: 32px;\n  cursor: default;\n}\n\n.file-table th.th-actions {\n  width: 70px;\n  text-align: right;\n  cursor: default;\n}\n\n.sort-arrow {\n  margin-left: 4px;\n  font-size: 0.65rem;\n}\n\n.file-table-row {\n  border-bottom: 1px solid var(--mj-border-default);\n  cursor: pointer;\n  transition: background-color 0.12s ease;\n}\n\n.file-table-row:hover {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 4%, var(--mj-bg-surface));\n}\n\n.file-table-row.selected {\n  background-color: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.file-table-row td {\n  padding: 8px 10px;\n  vertical-align: middle;\n}\n\n.row-name-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n\n.row-icon-badge {\n  width: 28px;\n  height: 28px;\n  min-width: 28px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.9rem;\n}\n\n.row-file-name {\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.type-badge {\n  display: inline-block;\n  padding: 2px 6px;\n  border-radius: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n}\n\n.size-text, .date-text {\n  color: var(--mj-text-secondary);\n  font-size: 0.76rem;\n  white-space: nowrap;\n}\n\n.row-action-buttons {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 4px;\n  opacity: 0;\n  transition: opacity 0.12s ease;\n}\n\n.file-table-row:hover .row-action-buttons {\n  opacity: 1;\n}\n\n.row-act-btn {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  color: var(--mj-text-secondary);\n  font-size: 0.7rem;\n  cursor: pointer;\n}\n\n.row-act-btn:hover {\n  color: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n/* ==========================================================================\n   Media Color Badges\n   ========================================================================== */\n\n.mj-file-thumb--folder {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--pdf {\n  background-color: color-mix(in srgb, var(--mj-status-error, #ef4444) 14%, transparent);\n  color: var(--mj-status-error, #ef4444);\n}\n\n.mj-file-thumb--image {\n  background-color: color-mix(in srgb, var(--mj-media-image, #8b5cf6) 14%, transparent);\n  color: var(--mj-media-image, #8b5cf6);\n}\n\n.mj-file-thumb--video {\n  background-color: color-mix(in srgb, var(--mj-brand-primary, #3b82f6) 14%, transparent);\n  color: var(--mj-brand-primary, #3b82f6);\n}\n\n.mj-file-thumb--audio {\n  background-color: color-mix(in srgb, var(--mj-status-warning, #f59e0b) 14%, transparent);\n  color: var(--mj-status-warning, #f59e0b);\n}\n\n.mj-file-thumb--code {\n  background-color: color-mix(in srgb, var(--mj-status-success, #10b981) 14%, transparent);\n  color: var(--mj-status-success, #10b981);\n}\n\n.mj-file-thumb--text {\n  background-color: color-mix(in srgb, var(--mj-text-muted, #6b7280) 14%, transparent);\n  color: var(--mj-text-muted, #6b7280);\n}\n\n.mj-file-thumb--document {\n  background-color: color-mix(in srgb, var(--mj-brand-primary-hover, #2563eb) 14%, transparent);\n  color: var(--mj-brand-primary-hover, #2563eb);\n}\n\n/* ==========================================================================\n   Status Bar (Bottom Information)\n   ========================================================================== */\n\n.status-bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 6px 16px;\n  background-color: var(--mj-bg-surface-sunken, color-mix(in srgb, var(--mj-text-primary) 3%, var(--mj-bg-surface)));\n  border-top: 1px solid var(--mj-border-default);\n  font-size: 0.72rem;\n  color: var(--mj-text-secondary);\n  flex-shrink: 0;\n}\n\n.status-account-badge {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  color: var(--mj-brand-primary);\n  font-weight: 500;\n}\n\n/* ==========================================================================\n   Drag & Drop Overlay & Progress\n   ========================================================================== */\n\n.drag-drop-overlay {\n  position: absolute;\n  inset: 0;\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, rgba(255, 255, 255, 0.9));\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n.drag-drop-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 32px 48px;\n  background-color: var(--mj-bg-surface);\n  border: 2px dashed var(--mj-brand-primary);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-lg, 0 10px 25px rgba(0, 0, 0, 0.15));\n}\n\n.drag-icon {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n  margin-bottom: 12px;\n}\n\n.drag-drop-content h3 {\n  margin: 0 0 6px 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.drag-drop-content p {\n  margin: 0;\n  font-size: 0.8rem;\n  color: var(--mj-text-secondary);\n}\n\n.upload-progress-bar-wrap {\n  position: absolute;\n  bottom: 36px;\n  right: 20px;\n  z-index: 90;\n}\n\n.upload-progress-card {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-md, 8px);\n  padding: 10px 14px;\n  box-shadow: var(--mj-shadow-lg, 0 8px 20px rgba(0, 0, 0, 0.15));\n  width: 260px;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.upload-info {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.upload-spinner {\n  color: var(--mj-brand-primary);\n}\n\n.upload-text {\n  font-size: 0.78rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.progress-track {\n  height: 4px;\n  background-color: var(--mj-bg-surface-sunken);\n  border-radius: 9999px;\n  overflow: hidden;\n}\n\n.progress-fill {\n  height: 100%;\n  background-color: var(--mj-brand-primary);\n  transition: width 0.15s ease;\n}\n\n.grid-loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex: 1;\n}\n\n/* ==========================================================================\n   Modals (Design Tokens & Glass Backdrop)\n   ========================================================================== */\n\n.mj-modal-backdrop {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.5);\n  backdrop-filter: blur(4px);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1050;\n  padding: 20px;\n  animation: modalFadeIn 0.18s ease-out;\n}\n\n@keyframes modalFadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n.mj-modal-window {\n  background-color: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-lg, 12px);\n  box-shadow: var(--mj-shadow-xl, 0 20px 35px rgba(0, 0, 0, 0.25));\n  width: 100%;\n  max-width: 500px;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n}\n\n.mj-modal-window.modal-compact {\n  max-width: 420px;\n}\n\n.mj-modal-window.preview-modal-window {\n  max-width: 850px;\n  max-height: 85vh;\n  height: 80vh;\n}\n\n.mj-modal-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 12px 18px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n}\n\n.modal-title-wrap {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n}\n\n.modal-title {\n  margin: 0;\n  font-size: 0.95rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.modal-subtitle {\n  font-size: 0.72rem;\n  color: var(--mj-text-muted);\n}\n\n.modal-header-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.modal-close-btn {\n  background: transparent;\n  border: none;\n  color: var(--mj-text-secondary);\n  font-size: 1rem;\n  cursor: pointer;\n  padding: 4px;\n  border-radius: 4px;\n}\n\n.modal-close-btn:hover {\n  color: var(--mj-text-primary);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.mj-modal-body {\n  padding: 18px;\n  display: flex;\n  flex-direction: column;\n  gap: 10px;\n}\n\n.form-label {\n  font-size: 0.78rem;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n}\n\n.form-input {\n  padding: 8px 12px;\n  border-radius: var(--mj-radius-sm, 6px);\n  border: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n  font-size: 0.85rem;\n  outline: none;\n}\n\n.form-input:focus {\n  border-color: var(--mj-brand-primary);\n}\n\n.modal-body-text {\n  margin: 0;\n  font-size: 0.85rem;\n  color: var(--mj-text-primary);\n}\n\n.modal-warning-banner {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 8px 12px;\n  background-color: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: var(--mj-radius-sm, 6px);\n  font-size: 0.76rem;\n  color: var(--mj-text-primary);\n}\n\n.mj-modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 18px;\n  border-top: 1px solid var(--mj-border-default);\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n/* Preview Modal Body */\n.preview-modal-body {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: var(--mj-bg-surface-sunken);\n  padding: 16px;\n  overflow: hidden;\n}\n\n.preview-media-wrap {\n  width: 100%;\n  height: 100%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.preview-img {\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-iframe {\n  width: 100%;\n  height: 100%;\n  border: none;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.preview-video {\n  max-width: 100%;\n  max-height: 100%;\n  border-radius: var(--mj-radius-md, 8px);\n}\n\n.audio-preview-wrap {\n  flex-direction: column;\n  gap: 16px;\n}\n\n.preview-audio-icon {\n  font-size: 3rem;\n  color: var(--mj-brand-primary);\n}\n\n.preview-audio {\n  width: 320px;\n}\n\n.preview-fallback {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 8px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.preview-fallback-icon {\n  font-size: 3rem;\n  color: var(--mj-text-muted);\n  margin-bottom: 8px;\n}\n\n.preview-fallback h4 {\n  margin: 0;\n  font-size: 0.95rem;\n  color: var(--mj-text-primary);\n}\n\n.preview-fallback p {\n  margin: 0;\n  font-size: 0.8rem;\n}\n\n.account-picker-list {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 180px;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm, 6px);\n  padding: 6px;\n}\n\n.account-picker-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  padding: 6px 8px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n\n.account-picker-item:hover {\n  background-color: var(--mj-bg-surface-sunken);\n}\n\n.picker-name {\n  font-size: 0.82rem;\n  font-weight: 500;\n  color: var(--mj-text-primary);\n}\n\n.picker-badge {\n  margin-left: auto;\n  font-size: 0.7rem;\n  color: var(--mj-text-muted);\n}\n\n.copy-progress-indicator {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  font-size: 0.78rem;\n  color: var(--mj-brand-primary);\n  margin-top: 8px;\n}\n"] }]
     }], () => [], { account: [{
             type: Input
         }], folderPath: [{
@@ -2402,5 +2755,5 @@ export class FileGridComponent {
         }], folderStructureChanged: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileGridComponent, { className: "FileGridComponent", filePath: "src/lib/file-browser/file-grid.component.ts", lineNumber: 69 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FileGridComponent, { className: "FileGridComponent", filePath: "src/lib/file-browser/file-grid.component.ts", lineNumber: 70 }); })();
 //# sourceMappingURL=file-grid.component.js.map