@memberjunction/ng-dashboards 2.48.0 → 2.50.0

package/dist/AI/components/models/model-management.component.js

@@ -1,12 +1,3 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import { Component, Output, EventEmitter } from '@angular/core';
 import { RunView, Metadata, LogError, LogStatus } from '@memberjunction/core';
 import { Subject, combineLatest, BehaviorSubject } from 'rxjs';
@@ -274,50 +265,48 @@ function ModelManagementComponent_Conditional_17_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵconditional(ctx_r0.filteredModels.length === 0 ? 46 : 47);
 } }
 export class ModelManagementComponent {
-    constructor() {
-        this.openEntityRecord = new EventEmitter();
-        // Data properties
-        this.models = [];
-        this.vendors = [];
-        this.modelTypes = [];
-        this.filteredModels = [];
-        // UI state
-        this.isLoading = false;
-        this.loadingMessage = 'Loading AI models...';
-        this.error = null;
-        this.filtersVisible = false;
-        // Filter state
-        this.filter = {
-            searchTerm: '',
-            vendorId: null,
-            modelTypeId: null,
-            powerRankMin: null,
-            powerRankMax: null,
-            speedRankMin: null,
-            speedRankMax: null,
-            costRankMin: null,
-            costRankMax: null,
-            isActive: null
-        };
-        // Sort options
-        this.sortOptions = [
-            { field: 'Name', direction: 'asc', label: 'Name (A-Z)' },
-            { field: 'Name', direction: 'desc', label: 'Name (Z-A)' },
-            { field: 'PowerRank', direction: 'desc', label: 'Power Rank (High to Low)' },
-            { field: 'PowerRank', direction: 'asc', label: 'Power Rank (Low to High)' },
-            { field: 'SpeedRank', direction: 'desc', label: 'Speed Rank (High to Low)' },
-            { field: 'SpeedRank', direction: 'asc', label: 'Speed Rank (Low to High)' },
-            { field: 'CostRank', direction: 'desc', label: 'Cost Rank (High to Low)' },
-            { field: 'CostRank', direction: 'asc', label: 'Cost Rank (Low to High)' },
-            { field: '__mj_CreatedAt', direction: 'desc', label: 'Recently Added' },
-            { field: '__mj_UpdatedAt', direction: 'desc', label: 'Recently Updated' }
-        ];
-        this.selectedSort = this.sortOptions[0];
-        // Search and filter subjects
-        this.searchSubject = new BehaviorSubject('');
-        this.filterSubject = new BehaviorSubject(this.filter);
-        this.destroy$ = new Subject();
-    }
+    openEntityRecord = new EventEmitter();
+    // Data properties
+    models = [];
+    vendors = [];
+    modelTypes = [];
+    filteredModels = [];
+    // UI state
+    isLoading = false;
+    loadingMessage = 'Loading AI models...';
+    error = null;
+    filtersVisible = false;
+    // Filter state
+    filter = {
+        searchTerm: '',
+        vendorId: null,
+        modelTypeId: null,
+        powerRankMin: null,
+        powerRankMax: null,
+        speedRankMin: null,
+        speedRankMax: null,
+        costRankMin: null,
+        costRankMax: null,
+        isActive: null
+    };
+    // Sort options
+    sortOptions = [
+        { field: 'Name', direction: 'asc', label: 'Name (A-Z)' },
+        { field: 'Name', direction: 'desc', label: 'Name (Z-A)' },
+        { field: 'PowerRank', direction: 'desc', label: 'Power Rank (High to Low)' },
+        { field: 'PowerRank', direction: 'asc', label: 'Power Rank (Low to High)' },
+        { field: 'SpeedRank', direction: 'desc', label: 'Speed Rank (High to Low)' },
+        { field: 'SpeedRank', direction: 'asc', label: 'Speed Rank (Low to High)' },
+        { field: 'CostRank', direction: 'desc', label: 'Cost Rank (High to Low)' },
+        { field: 'CostRank', direction: 'asc', label: 'Cost Rank (Low to High)' },
+        { field: '__mj_CreatedAt', direction: 'desc', label: 'Recently Added' },
+        { field: '__mj_UpdatedAt', direction: 'desc', label: 'Recently Updated' }
+    ];
+    selectedSort = this.sortOptions[0];
+    // Search and filter subjects
+    searchSubject = new BehaviorSubject('');
+    filterSubject = new BehaviorSubject(this.filter);
+    destroy$ = new Subject();
     ngOnInit() {
         this.setupFilterSubscriptions();
         this.loadData();
@@ -340,119 +329,111 @@ export class ModelManagementComponent {
             this.applyFilters();
         });
     }
-    loadData() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                this.isLoading = true;
-                this.error = null;
-                this.loadingMessage = 'Loading AI models...';
-                // Load all required data in parallel
-                const [modelsResult, vendorsResult, modelTypesResult] = yield Promise.all([
-                    this.loadModels(),
-                    this.loadVendors(),
-                    this.loadModelTypes()
-                ]);
-                if (modelsResult && vendorsResult && modelTypesResult) {
-                    this.applyFilters();
-                    LogStatus('Model management data loaded successfully');
-                }
+    async loadData() {
+        try {
+            this.isLoading = true;
+            this.error = null;
+            this.loadingMessage = 'Loading AI models...';
+            // Load all required data in parallel
+            const [modelsResult, vendorsResult, modelTypesResult] = await Promise.all([
+                this.loadModels(),
+                this.loadVendors(),
+                this.loadModelTypes()
+            ]);
+            if (modelsResult && vendorsResult && modelTypesResult) {
+                this.applyFilters();
+                LogStatus('Model management data loaded successfully');
             }
-            catch (error) {
-                this.error = 'Failed to load model data. Please try again.';
-                LogError('Error loading model management data: ' + String(error));
-            }
-            finally {
-                this.isLoading = false;
-            }
-        });
+        }
+        catch (error) {
+            this.error = 'Failed to load model data. Please try again.';
+            LogError('Error loading model management data: ' + String(error));
+        }
+        finally {
+            this.isLoading = false;
+        }
     }
-    loadModels() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const md = Metadata.Provider;
-                if (!md) {
-                    throw new Error('Metadata provider not available');
-                }
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'AI Models',
-                    ExtraFilter: '', // Load all models, we'll filter in UI
-                    OrderBy: 'Name',
-                    UserSearchString: '',
-                    OverrideExcludeFilter: '',
-                    SaveViewResults: false
-                });
-                if (result && result.Success && result.Results) {
-                    this.models = result.Results;
-                    return true;
-                }
-                else {
-                    throw new Error('Failed to load AI models');
-                }
+    async loadModels() {
+        try {
+            const md = Metadata.Provider;
+            if (!md) {
+                throw new Error('Metadata provider not available');
             }
-            catch (error) {
-                LogError('Error loading AI models: ' + String(error));
-                return false;
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Models',
+                ExtraFilter: '', // Load all models, we'll filter in UI
+                OrderBy: 'Name',
+                UserSearchString: '',
+                OverrideExcludeFilter: '',
+                SaveViewResults: false
+            });
+            if (result && result.Success && result.Results) {
+                this.models = result.Results;
+                return true;
             }
-        });
+            else {
+                throw new Error('Failed to load AI models');
+            }
+        }
+        catch (error) {
+            LogError('Error loading AI models: ' + String(error));
+            return false;
+        }
     }
-    loadVendors() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'MJ: AI Vendors',
-                    ExtraFilter: '',
-                    OrderBy: 'Name',
-                    UserSearchString: '',
-                    OverrideExcludeFilter: '',
-                    SaveViewResults: false
-                });
-                if (result && result.Success && result.Results) {
-                    this.vendors = result.Results;
-                    return true;
-                }
-                else {
-                    throw new Error('Failed to load AI vendors');
-                }
+    async loadVendors() {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: AI Vendors',
+                ExtraFilter: '',
+                OrderBy: 'Name',
+                UserSearchString: '',
+                OverrideExcludeFilter: '',
+                SaveViewResults: false
+            });
+            if (result && result.Success && result.Results) {
+                this.vendors = result.Results;
+                return true;
             }
-            catch (error) {
-                LogError('Error loading AI vendors: ' + String(error));
-                return false;
+            else {
+                throw new Error('Failed to load AI vendors');
             }
-        });
+        }
+        catch (error) {
+            LogError('Error loading AI vendors: ' + String(error));
+            return false;
+        }
     }
-    loadModelTypes() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const rv = new RunView();
-                const result = yield rv.RunView({
-                    EntityName: 'AI Model Types',
-                    ExtraFilter: '',
-                    OrderBy: 'Name',
-                    UserSearchString: '',
-                    OverrideExcludeFilter: '',
-                    SaveViewResults: false
-                });
-                if (result && result.Success && result.Results) {
-                    this.modelTypes = result.Results;
-                    return true;
-                }
-                else {
-                    throw new Error('Failed to load AI model types');
-                }
+    async loadModelTypes() {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'AI Model Types',
+                ExtraFilter: '',
+                OrderBy: 'Name',
+                UserSearchString: '',
+                OverrideExcludeFilter: '',
+                SaveViewResults: false
+            });
+            if (result && result.Success && result.Results) {
+                this.modelTypes = result.Results;
+                return true;
             }
-            catch (error) {
-                LogError('Error loading AI model types: ' + String(error));
-                return false;
+            else {
+                throw new Error('Failed to load AI model types');
             }
-        });
+        }
+        catch (error) {
+            LogError('Error loading AI model types: ' + String(error));
+            return false;
+        }
     }
     onSearchChange(searchTerm) {
         this.searchSubject.next(searchTerm);
     }
     onFilterChange() {
-        this.filterSubject.next(Object.assign({}, this.filter));
+        this.filterSubject.next({ ...this.filter });
     }
     onSortChange(sort) {
         this.selectedSort = sort;
@@ -482,12 +463,9 @@ export class ModelManagementComponent {
         // Apply search filter
         if (this.filter.searchTerm) {
             const searchLower = this.filter.searchTerm.toLowerCase();
-            filtered = filtered.filter(model => {
-                var _a, _b, _c;
-                return ((_a = model.Name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchLower)) ||
-                    ((_b = model.Description) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(searchLower)) ||
-                    ((_c = this.getVendorName(model)) === null || _c === void 0 ? void 0 : _c.toLowerCase().includes(searchLower));
-            });
+            filtered = filtered.filter(model => model.Name?.toLowerCase().includes(searchLower) ||
+                model.Description?.toLowerCase().includes(searchLower) ||
+                this.getVendorName(model)?.toLowerCase().includes(searchLower));
         }
         // Apply vendor filter
         if (this.filter.vendorId) {
@@ -558,7 +536,7 @@ export class ModelManagementComponent {
     }
     getVendorName(model) {
         const vendor = this.getVendor(model);
-        return (vendor === null || vendor === void 0 ? void 0 : vendor.Name) || null;
+        return vendor?.Name || null;
     }
     getModelType(model) {
         return this.modelTypes.find(mt => mt.ID === model.AIModelTypeID) || null;
@@ -574,91 +552,87 @@ export class ModelManagementComponent {
             recordId: model.ID
         });
     }
-    createNewModel() {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const md = Metadata.Provider;
-                if (!md) {
-                    throw new Error('Metadata provider not available');
-                }
-                const newModel = yield md.GetEntityObject('AI Models', md.CurrentUser);
-                // Pre-populate some defaults
-                newModel.IsActive = true;
-                newModel.PowerRank = 5;
-                newModel.SpeedRank = 5;
-                newModel.CostRank = 5;
-                this.openEntityRecord.emit({
-                    entityName: 'AI Models',
-                    recordId: 'new'
-                });
+    async createNewModel() {
+        try {
+            const md = Metadata.Provider;
+            if (!md) {
+                throw new Error('Metadata provider not available');
             }
-            catch (error) {
-                LogError('Error creating new AI model: ' + String(error));
-            }
-        });
+            const newModel = await md.GetEntityObject('AI Models', md.CurrentUser);
+            // Pre-populate some defaults
+            newModel.IsActive = true;
+            newModel.PowerRank = 5;
+            newModel.SpeedRank = 5;
+            newModel.CostRank = 5;
+            this.openEntityRecord.emit({
+                entityName: 'AI Models',
+                recordId: 'new'
+            });
+        }
+        catch (error) {
+            LogError('Error creating new AI model: ' + String(error));
+        }
     }
-    toggleModelStatus(model) {
-        return __awaiter(this, void 0, void 0, function* () {
-            try {
-                const md = Metadata.Provider;
-                if (!md) {
-                    throw new Error('Metadata provider not available');
-                }
-                const modelToUpdate = yield md.GetEntityObject('AI Models', md.CurrentUser);
-                yield modelToUpdate.Load(model.ID);
-                modelToUpdate.IsActive = !modelToUpdate.IsActive;
-                const result = yield modelToUpdate.Save();
-                if (result) {
-                    // Update local data
-                    const index = this.models.findIndex(m => m.ID === model.ID);
-                    if (index >= 0) {
-                        this.models[index] = Object.assign({}, this.models[index], { IsActive: modelToUpdate.IsActive });
-                        this.applyFilters();
-                    }
-                    LogStatus(`Model ${modelToUpdate.Name} ${modelToUpdate.IsActive ? 'activated' : 'deactivated'}`);
-                }
+    async toggleModelStatus(model) {
+        try {
+            const md = Metadata.Provider;
+            if (!md) {
+                throw new Error('Metadata provider not available');
             }
-            catch (error) {
-                LogError('Error updating model status: ' + String(error));
+            const modelToUpdate = await md.GetEntityObject('AI Models', md.CurrentUser);
+            await modelToUpdate.Load(model.ID);
+            modelToUpdate.IsActive = !modelToUpdate.IsActive;
+            const result = await modelToUpdate.Save();
+            if (result) {
+                // Update local data
+                const index = this.models.findIndex(m => m.ID === model.ID);
+                if (index >= 0) {
+                    this.models[index] = Object.assign({}, this.models[index], { IsActive: modelToUpdate.IsActive });
+                    this.applyFilters();
+                }
+                LogStatus(`Model ${modelToUpdate.Name} ${modelToUpdate.IsActive ? 'activated' : 'deactivated'}`);
             }
-        });
+        }
+        catch (error) {
+            LogError('Error updating model status: ' + String(error));
+        }
     }
+    static ɵfac = function ModelManagementComponent_Factory(t) { return new (t || ModelManagementComponent)(); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelManagementComponent, selectors: [["app-model-management"]], outputs: { openEntityRecord: "openEntityRecord" }, decls: 18, vars: 8, consts: [["mjFillContainer", "", 1, "model-management-container", 3, "rightMargin", "bottomMargin"], [1, "dashboard-header"], [1, "header-info"], [1, "model-count"], [1, "header-controls"], ["title", "Toggle Filters", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-filter"], ["title", "Add New Model", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Refresh", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-container"], [1, "error-container"], [1, "dashboard-content"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-message"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [1, "filter-panel"], [1, "filter-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "search-section"], ["type", "text", "placeholder", "Search models...", 1, "search-input", 3, "ngModelChange", "ngModel"], [1, "filter-group"], [3, "ngModelChange", "ngModel"], [3, "value"], [1, "filter-actions"], [1, "clear-btn", 3, "click"], [3, "resizable", "scrollable"], ["mjFillContainer", "", 1, "models-pane-container"], [1, "empty-state"], [1, "models-list"], [1, "fa-solid", "fa-microchip", "empty-icon"], [1, "control-btn", 3, "click"], [1, "model-item"], [1, "model-item", 3, "click"], [1, "model-header"], [1, "model-title"], [1, "model-vendor"], [1, "model-status"], [1, "model-details"], [1, "detail-item"], [1, "label"], [1, "value"], [1, "model-description"], [1, "model-actions"], [1, "action-btn", 3, "click", "title"], ["title", "Edit Model", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"]], template: function ModelManagementComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "span", 3);
+            i0.ɵɵtext(4);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(5, "div", 4)(6, "button", 5);
+            i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_6_listener() { return ctx.toggleFiltersVisible(); });
+            i0.ɵɵelement(7, "span", 6);
+            i0.ɵɵtext(8, " Filters ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "button", 7);
+            i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_9_listener() { return ctx.createNewModel(); });
+            i0.ɵɵelement(10, "span", 8);
+            i0.ɵɵtext(11, " Add Model ");
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "button", 9);
+            i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_12_listener() { return ctx.loadData(); });
+            i0.ɵɵelement(13, "span", 10);
+            i0.ɵɵtext(14, " Refresh ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵtemplate(15, ModelManagementComponent_Conditional_15_Template, 8, 1, "div", 11)(16, ModelManagementComponent_Conditional_16_Template, 3, 1, "div", 12)(17, ModelManagementComponent_Conditional_17_Template, 48, 17, "div", 13);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
+            i0.ɵɵadvance(4);
+            i0.ɵɵtextInterpolate1("", ctx.filteredModels.length, " AI models");
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.filtersVisible);
+            i0.ɵɵadvance(9);
+            i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.error ? 16 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 17 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.SplitterComponent, i2.SplitterPaneComponent, i3.FillContainer], styles: [".model-management-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n  \n  .model-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message[_ngcontent-%COMP%] {\n  color: #d32f2f;\n  font-weight: 500;\n}\n\n.dashboard-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  flex: 1;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n//[_ngcontent-%COMP%]   Filter[_ngcontent-%COMP%]   Panel\n.filter-panel[_ngcontent-%COMP%] {\n  background: #fafafa;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  \n  .filter-header {\n    padding: 16px;\n    border-bottom: 1px solid #e0e0e0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: white;\n    \n    h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n    \n    .close-btn {\n      padding: 4px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      color: #666;\n      border-radius: 2px;\n      \n      &:hover {\n        background: #f0f0f0;\n        color: #333;\n      }\n    }\n  }\n  \n  .filter-content {\n    padding: 12px;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    \n    .search-section {\n      margin-bottom: 16px;\n    }\n    \n    .filter-group {\n      margin-bottom: 16px;\n    }\n    \n    label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n    \n    .search-input, select {\n      width: calc(100% - 4px);\n      max-width: 100%;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      font-size: 12px;\n      box-sizing: border-box;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .filter-actions {\n      margin-top: 20px;\n      \n      .clear-btn {\n        width: calc(100% - 4px);\n        max-width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        transition: all 0.2s;\n        box-sizing: border-box;\n        \n        &:hover {\n          background-color: #f0f0f0;\n          border-color: #999;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Models[_ngcontent-%COMP%]   List\n.models-pane-container[_ngcontent-%COMP%] {\n  background: white;\n  position: relative;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px;\n  text-align: center;\n  \n  .empty-icon {\n    font-size: 48px;\n    color: #ccc;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #666;\n    font-size: 18px;\n  }\n  \n  p {\n    margin: 0 0 20px 0;\n    color: #999;\n    font-size: 14px;\n  }\n}\n\n.models-list[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  \n  .model-item {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    padding: 16px;\n    margin-bottom: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n    \n    &:hover {\n      border-color: #2196f3;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n    \n    &:last-child {\n      margin-bottom: 0;\n    }\n    \n    .model-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      margin-bottom: 12px;\n      \n      .model-title {\n        flex: 1;\n        \n        h4 {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 600;\n          color: #333;\n        }\n        \n        .model-vendor {\n          font-size: 12px;\n          color: #2196f3;\n          font-weight: 500;\n        }\n      }\n      \n      .model-status {\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 11px;\n        font-weight: 600;\n        background: #ffc107;\n        color: #000;\n        text-transform: uppercase;\n        \n        &.active {\n          background: #4caf50;\n          color: white;\n        }\n      }\n    }\n    \n    .model-details {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 12px;\n      \n      .detail-item {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        \n        .label {\n          font-size: 12px;\n          color: #666;\n          font-weight: 500;\n        }\n        \n        .value {\n          font-size: 12px;\n          color: #333;\n          font-weight: 600;\n        }\n      }\n    }\n    \n    .model-description {\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      margin-bottom: 12px;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    \n    .model-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      \n      .action-btn {\n        padding: 6px 8px;\n        border: 1px solid #e0e0e0;\n        border-radius: 3px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        color: #666;\n        transition: all 0.2s;\n        \n        &:hover {\n          background: #f0f0f0;\n          border-color: #2196f3;\n          color: #2196f3;\n        }\n      }\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"] });
 }
-ModelManagementComponent.ɵfac = function ModelManagementComponent_Factory(t) { return new (t || ModelManagementComponent)(); };
-ModelManagementComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ModelManagementComponent, selectors: [["app-model-management"]], outputs: { openEntityRecord: "openEntityRecord" }, decls: 18, vars: 8, consts: [["mjFillContainer", "", 1, "model-management-container", 3, "rightMargin", "bottomMargin"], [1, "dashboard-header"], [1, "header-info"], [1, "model-count"], [1, "header-controls"], ["title", "Toggle Filters", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-filter"], ["title", "Add New Model", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Refresh", 1, "control-btn", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-container"], [1, "error-container"], [1, "dashboard-content"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-message"], ["orientation", "horizontal", "mjFillContainer", "", 1, "main-splitter"], [3, "size", "collapsible", "resizable", "scrollable", "hidden"], [1, "filter-panel"], [1, "filter-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "filter-content"], [1, "search-section"], ["type", "text", "placeholder", "Search models...", 1, "search-input", 3, "ngModelChange", "ngModel"], [1, "filter-group"], [3, "ngModelChange", "ngModel"], [3, "value"], [1, "filter-actions"], [1, "clear-btn", 3, "click"], [3, "resizable", "scrollable"], ["mjFillContainer", "", 1, "models-pane-container"], [1, "empty-state"], [1, "models-list"], [1, "fa-solid", "fa-microchip", "empty-icon"], [1, "control-btn", 3, "click"], [1, "model-item"], [1, "model-item", 3, "click"], [1, "model-header"], [1, "model-title"], [1, "model-vendor"], [1, "model-status"], [1, "model-details"], [1, "detail-item"], [1, "label"], [1, "value"], [1, "model-description"], [1, "model-actions"], [1, "action-btn", 3, "click", "title"], ["title", "Edit Model", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-edit"]], template: function ModelManagementComponent_Template(rf, ctx) { if (rf & 1) {
-        i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "span", 3);
-        i0.ɵɵtext(4);
-        i0.ɵɵelementEnd()();
-        i0.ɵɵelementStart(5, "div", 4)(6, "button", 5);
-        i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_6_listener() { return ctx.toggleFiltersVisible(); });
-        i0.ɵɵelement(7, "span", 6);
-        i0.ɵɵtext(8, " Filters ");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(9, "button", 7);
-        i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_9_listener() { return ctx.createNewModel(); });
-        i0.ɵɵelement(10, "span", 8);
-        i0.ɵɵtext(11, " Add Model ");
-        i0.ɵɵelementEnd();
-        i0.ɵɵelementStart(12, "button", 9);
-        i0.ɵɵlistener("click", function ModelManagementComponent_Template_button_click_12_listener() { return ctx.loadData(); });
-        i0.ɵɵelement(13, "span", 10);
-        i0.ɵɵtext(14, " Refresh ");
-        i0.ɵɵelementEnd()()();
-        i0.ɵɵtemplate(15, ModelManagementComponent_Conditional_15_Template, 8, 1, "div", 11)(16, ModelManagementComponent_Conditional_16_Template, 3, 1, "div", 12)(17, ModelManagementComponent_Conditional_17_Template, 48, 17, "div", 13);
-        i0.ɵɵelementEnd();
-    } if (rf & 2) {
-        i0.ɵɵproperty("rightMargin", 8)("bottomMargin", 8);
-        i0.ɵɵadvance(4);
-        i0.ɵɵtextInterpolate1("", ctx.filteredModels.length, " AI models");
-        i0.ɵɵadvance(2);
-        i0.ɵɵclassProp("active", ctx.filtersVisible);
-        i0.ɵɵadvance(9);
-        i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(ctx.error ? 16 : -1);
-        i0.ɵɵadvance();
-        i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 17 : -1);
-    } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.SplitterComponent, i2.SplitterPaneComponent, i3.FillContainer], styles: [".model-management-container[_ngcontent-%COMP%] {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header[_ngcontent-%COMP%] {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n  \n  .model-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container[_ngcontent-%COMP%], .error-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message[_ngcontent-%COMP%] {\n  color: #d32f2f;\n  font-weight: 500;\n}\n\n.dashboard-content[_ngcontent-%COMP%] {\n  overflow: hidden;\n  flex: 1;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n//[_ngcontent-%COMP%]   Filter[_ngcontent-%COMP%]   Panel\n.filter-panel[_ngcontent-%COMP%] {\n  background: #fafafa;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  \n  .filter-header {\n    padding: 16px;\n    border-bottom: 1px solid #e0e0e0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: white;\n    \n    h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n    \n    .close-btn {\n      padding: 4px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      color: #666;\n      border-radius: 2px;\n      \n      &:hover {\n        background: #f0f0f0;\n        color: #333;\n      }\n    }\n  }\n  \n  .filter-content {\n    padding: 12px;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    \n    .search-section {\n      margin-bottom: 16px;\n    }\n    \n    .filter-group {\n      margin-bottom: 16px;\n    }\n    \n    label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n    \n    .search-input, select {\n      width: calc(100% - 4px);\n      max-width: 100%;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      font-size: 12px;\n      box-sizing: border-box;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .filter-actions {\n      margin-top: 20px;\n      \n      .clear-btn {\n        width: calc(100% - 4px);\n        max-width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        transition: all 0.2s;\n        box-sizing: border-box;\n        \n        &:hover {\n          background-color: #f0f0f0;\n          border-color: #999;\n        }\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Models[_ngcontent-%COMP%]   List\n.models-pane-container[_ngcontent-%COMP%] {\n  background: white;\n  position: relative;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px;\n  text-align: center;\n  \n  .empty-icon {\n    font-size: 48px;\n    color: #ccc;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #666;\n    font-size: 18px;\n  }\n  \n  p {\n    margin: 0 0 20px 0;\n    color: #999;\n    font-size: 14px;\n  }\n}\n\n.models-list[_ngcontent-%COMP%] {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  \n  .model-item {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    padding: 16px;\n    margin-bottom: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n    \n    &:hover {\n      border-color: #2196f3;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n    \n    &:last-child {\n      margin-bottom: 0;\n    }\n    \n    .model-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      margin-bottom: 12px;\n      \n      .model-title {\n        flex: 1;\n        \n        h4 {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 600;\n          color: #333;\n        }\n        \n        .model-vendor {\n          font-size: 12px;\n          color: #2196f3;\n          font-weight: 500;\n        }\n      }\n      \n      .model-status {\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 11px;\n        font-weight: 600;\n        background: #ffc107;\n        color: #000;\n        text-transform: uppercase;\n        \n        &.active {\n          background: #4caf50;\n          color: white;\n        }\n      }\n    }\n    \n    .model-details {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 12px;\n      \n      .detail-item {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        \n        .label {\n          font-size: 12px;\n          color: #666;\n          font-weight: 500;\n        }\n        \n        .value {\n          font-size: 12px;\n          color: #333;\n          font-weight: 600;\n        }\n      }\n    }\n    \n    .model-description {\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      margin-bottom: 12px;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    \n    .model-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      \n      .action-btn {\n        padding: 6px 8px;\n        border: 1px solid #e0e0e0;\n        border-radius: 3px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        color: #666;\n        transition: all 0.2s;\n        \n        &:hover {\n          background: #f0f0f0;\n          border-color: #2196f3;\n          color: #2196f3;\n        }\n      }\n    }\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"] });
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ModelManagementComponent, [{
         type: Component,
         args: [{ selector: 'app-model-management', template: "<div class=\"model-management-container\" mjFillContainer [rightMargin]=\"8\" [bottomMargin]=\"8\">\n  <div class=\"dashboard-header\">\n    <div class=\"header-info\">\n      <span class=\"model-count\">{{ filteredModels.length }} AI models</span>\n    </div>\n    <div class=\"header-controls\">\n      <button \n        class=\"control-btn\" \n        (click)=\"toggleFiltersVisible()\" \n        [class.active]=\"filtersVisible\"\n        title=\"Toggle Filters\">\n        <span class=\"fa-solid fa-filter\"></span>\n        Filters\n      </button>\n      <button \n        class=\"control-btn\" \n        (click)=\"createNewModel()\"\n        title=\"Add New Model\">\n        <span class=\"fa-solid fa-plus\"></span>\n        Add Model\n      </button>\n      <button \n        class=\"control-btn\" \n        (click)=\"loadData()\"\n        title=\"Refresh\">\n        <span class=\"fa-solid fa-refresh\"></span>\n        Refresh\n      </button>\n    </div>\n  </div>\n  \n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">{{ loadingMessage }}</div>\n      </div>\n    </div>\n  }\n  \n  @if (error) {\n    <div class=\"error-container\">\n      <p class=\"error-message\">{{ error }}</p>\n    </div>\n  }\n  \n  @if (!isLoading && !error) {\n    <div class=\"dashboard-content\">\n      <kendo-splitter \n        class=\"main-splitter\"\n        orientation=\"horizontal\"\n        mjFillContainer>\n        \n        <!-- Filter Panel (Left) -->\n        <kendo-splitter-pane \n          [size]=\"filtersVisible ? '280px' : '0px'\"\n          [collapsible]=\"false\"\n          [resizable]=\"filtersVisible\"\n          [scrollable]=\"false\"\n          [hidden]=\"!filtersVisible\">\n          <div class=\"filter-panel\">\n            <div class=\"filter-header\">\n              <h3>Filters</h3>\n              <button class=\"close-btn\" (click)=\"toggleFiltersVisible()\">\n                <span class=\"fa-solid fa-times\"></span>\n              </button>\n            </div>\n            \n            <div class=\"filter-content\">\n              <div class=\"search-section\">\n                <label>Search</label>\n                <input \n                  type=\"text\" \n                  placeholder=\"Search models...\"\n                  [(ngModel)]=\"filter.searchTerm\"\n                  (ngModelChange)=\"onSearchChange($event)\"\n                  class=\"search-input\">\n              </div>\n              \n              <div class=\"filter-group\">\n                <label>Vendor</label>\n                <select [(ngModel)]=\"filter.vendorId\" (ngModelChange)=\"onFilterChange()\">\n                  <option [value]=\"null\">All Vendors</option>\n                  @for (vendor of vendors; track vendor.ID) {\n                    <option [value]=\"vendor.ID\">{{ vendor.Name }}</option>\n                  }\n                </select>\n              </div>\n              \n              <div class=\"filter-group\">\n                <label>Type</label>\n                <select [(ngModel)]=\"filter.modelTypeId\" (ngModelChange)=\"onFilterChange()\">\n                  <option [value]=\"null\">All Types</option>\n                  @for (type of modelTypes; track type.ID) {\n                    <option [value]=\"type.ID\">{{ type.Name }}</option>\n                  }\n                </select>\n              </div>\n              \n              <div class=\"filter-group\">\n                <label>Status</label>\n                <select [(ngModel)]=\"filter.isActive\" (ngModelChange)=\"onFilterChange()\">\n                  <option [value]=\"null\">All</option>\n                  <option [value]=\"true\">Active</option>\n                  <option [value]=\"false\">Inactive</option>\n                </select>\n              </div>\n              \n              <div class=\"filter-actions\">\n                <button class=\"clear-btn\" (click)=\"clearFilters()\">\n                  <span class=\"fa-solid fa-times\"></span>\n                  Clear All\n                </button>\n              </div>\n            </div>\n          </div>\n        </kendo-splitter-pane>\n        \n        <!-- Models List (Right) -->\n        <kendo-splitter-pane \n          [resizable]=\"true\"\n          [scrollable]=\"false\">\n          <div class=\"models-pane-container\" mjFillContainer>\n            @if (filteredModels.length === 0) {\n              <div class=\"empty-state\">\n                <span class=\"fa-solid fa-microchip empty-icon\"></span>\n                <h3>No Models Found</h3>\n                @if (models.length === 0) {\n                  <p>No AI models have been configured yet.</p>\n                  <button class=\"control-btn\" (click)=\"createNewModel()\">\n                    <span class=\"fa-solid fa-plus\"></span>\n                    Add First Model\n                  </button>\n                } @else {\n                  <p>No models match your current filters.</p>\n                  <button class=\"control-btn\" (click)=\"clearFilters()\">Clear Filters</button>\n                }\n              </div>\n            } @else {\n              <div class=\"models-list\">\n                @for (displayData of filteredModels; track displayData.model.ID) {\n                  <div class=\"model-item\" (click)=\"onOpenModel(displayData.model)\">\n                    <div class=\"model-header\">\n                      <div class=\"model-title\">\n                        <h4>{{ displayData.model.Name }}</h4>\n                        <span class=\"model-vendor\">{{ displayData.vendor?.Name || 'Unknown Vendor' }}</span>\n                      </div>\n                      <div class=\"model-status\" [class.active]=\"displayData.model.IsActive\">\n                        {{ displayData.statusDisplay }}\n                      </div>\n                    </div>\n                    \n                    <div class=\"model-details\">\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Type:</span>\n                        <span class=\"value\">{{ displayData.modelType?.Name || 'Unknown' }}</span>\n                      </div>\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Power:</span>\n                        <span class=\"value\">{{ displayData.powerRankDisplay }}</span>\n                      </div>\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Speed:</span>\n                        <span class=\"value\">{{ displayData.speedRankDisplay }}</span>\n                      </div>\n                      <div class=\"detail-item\">\n                        <span class=\"label\">Cost:</span>\n                        <span class=\"value\">{{ displayData.costRankDisplay }}</span>\n                      </div>\n                    </div>\n                    \n                    @if (displayData.model.Description) {\n                      <div class=\"model-description\">\n                        {{ displayData.model.Description }}\n                      </div>\n                    }\n                    \n                    <div class=\"model-actions\">\n                      <button \n                        class=\"action-btn\"\n                        (click)=\"$event.stopPropagation(); toggleModelStatus(displayData.model)\"\n                        [title]=\"displayData.model.IsActive ? 'Deactivate' : 'Activate'\">\n                        <span [class]=\"displayData.model.IsActive ? 'fa-solid fa-pause' : 'fa-solid fa-play'\"></span>\n                      </button>\n                      <button \n                        class=\"action-btn\"\n                        (click)=\"$event.stopPropagation(); onOpenModel(displayData.model)\"\n                        title=\"Edit Model\">\n                        <span class=\"fa-solid fa-edit\"></span>\n                      </button>\n                    </div>\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        </kendo-splitter-pane>\n      </kendo-splitter>\n    </div>\n  }\n</div>", styles: [".model-management-container {\n  overflow: hidden;\n  padding: 4px;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.dashboard-header {\n  margin-bottom: 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  \n  .header-info {\n    flex: 1;\n    display: flex;\n    align-items: center;\n  }\n  \n  .model-count {\n    font-size: 12px;\n    color: #2196f3;\n    font-weight: 600;\n    background: rgba(33, 150, 243, 0.1);\n    padding: 4px 8px;\n    border-radius: 4px;\n    border: 1px solid rgba(33, 150, 243, 0.2);\n  }\n  \n  .header-controls {\n    display: flex;\n    gap: 8px;\n    \n    .control-btn {\n      padding: 8px 12px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      background: white;\n      cursor: pointer;\n      font-size: 12px;\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      transition: all 0.2s;\n      \n      &:hover {\n        background-color: #f0f0f0;\n        border-color: #2196f3;\n      }\n      \n      &.active {\n        background-color: #2196f3;\n        border-color: #2196f3;\n        color: white;\n      }\n      \n      &:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        \n        &:hover {\n          background-color: white;\n          border-color: #ccc;\n        }\n      }\n      \n      .fa-solid {\n        font-size: 14px;\n      }\n    }\n  }\n}\n\n.loading-container, .error-container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background: #fafafa;\n  flex: 1;\n  \n  p {\n    color: #666;\n    font-size: 14px;\n  }\n}\n\n.error-message {\n  color: #d32f2f;\n  font-weight: 500;\n}\n\n.dashboard-content {\n  overflow: hidden;\n  flex: 1;\n}\n\n.loading-content {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n}\n\n.spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s linear infinite;\n  \n  &:nth-child(1) {\n    border-top-color: #2196f3;\n    animation-delay: 0s;\n  }\n  \n  &:nth-child(2) {\n    border-top-color: #9c27b0;\n    animation-delay: 0.3s;\n    transform: scale(0.8);\n  }\n  \n  &:nth-child(3) {\n    border-top-color: #ff6b35;\n    animation-delay: 0.6s;\n    transform: scale(0.6);\n  }\n}\n\n.loading-text {\n  font-size: 14px;\n  color: #666;\n  font-weight: 500;\n  text-align: center;\n}\n\n// Filter Panel\n.filter-panel {\n  background: #fafafa;\n  border-right: 1px solid #e0e0e0;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n  \n  .filter-header {\n    padding: 16px;\n    border-bottom: 1px solid #e0e0e0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    background: white;\n    \n    h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n    \n    .close-btn {\n      padding: 4px;\n      border: none;\n      background: none;\n      cursor: pointer;\n      color: #666;\n      border-radius: 2px;\n      \n      &:hover {\n        background: #f0f0f0;\n        color: #333;\n      }\n    }\n  }\n  \n  .filter-content {\n    padding: 12px;\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n    \n    .search-section {\n      margin-bottom: 16px;\n    }\n    \n    .filter-group {\n      margin-bottom: 16px;\n    }\n    \n    label {\n      display: block;\n      font-size: 12px;\n      font-weight: 600;\n      color: #333;\n      margin-bottom: 4px;\n    }\n    \n    .search-input, select {\n      width: calc(100% - 4px);\n      max-width: 100%;\n      padding: 8px;\n      border: 1px solid #ccc;\n      border-radius: 4px;\n      font-size: 12px;\n      box-sizing: border-box;\n      \n      &:focus {\n        outline: none;\n        border-color: #2196f3;\n      }\n    }\n    \n    .filter-actions {\n      margin-top: 20px;\n      \n      .clear-btn {\n        width: calc(100% - 4px);\n        max-width: 100%;\n        padding: 8px 12px;\n        border: 1px solid #ccc;\n        border-radius: 4px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        gap: 6px;\n        transition: all 0.2s;\n        box-sizing: border-box;\n        \n        &:hover {\n          background-color: #f0f0f0;\n          border-color: #999;\n        }\n      }\n    }\n  }\n}\n\n// Models List\n.models-pane-container {\n  background: white;\n  position: relative;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 40px;\n  text-align: center;\n  \n  .empty-icon {\n    font-size: 48px;\n    color: #ccc;\n    margin-bottom: 16px;\n  }\n  \n  h3 {\n    margin: 0 0 8px 0;\n    color: #666;\n    font-size: 18px;\n  }\n  \n  p {\n    margin: 0 0 20px 0;\n    color: #999;\n    font-size: 14px;\n  }\n}\n\n.models-list {\n  padding: 16px;\n  overflow-y: auto;\n  height: 100%;\n  \n  .model-item {\n    background: white;\n    border: 1px solid #e0e0e0;\n    border-radius: 4px;\n    padding: 16px;\n    margin-bottom: 12px;\n    cursor: pointer;\n    transition: all 0.2s;\n    position: relative;\n    \n    &:hover {\n      border-color: #2196f3;\n      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n    }\n    \n    &:last-child {\n      margin-bottom: 0;\n    }\n    \n    .model-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      margin-bottom: 12px;\n      \n      .model-title {\n        flex: 1;\n        \n        h4 {\n          margin: 0 0 4px 0;\n          font-size: 16px;\n          font-weight: 600;\n          color: #333;\n        }\n        \n        .model-vendor {\n          font-size: 12px;\n          color: #2196f3;\n          font-weight: 500;\n        }\n      }\n      \n      .model-status {\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 11px;\n        font-weight: 600;\n        background: #ffc107;\n        color: #000;\n        text-transform: uppercase;\n        \n        &.active {\n          background: #4caf50;\n          color: white;\n        }\n      }\n    }\n    \n    .model-details {\n      display: flex;\n      flex-wrap: wrap;\n      gap: 12px;\n      margin-bottom: 12px;\n      \n      .detail-item {\n        display: flex;\n        align-items: center;\n        gap: 4px;\n        \n        .label {\n          font-size: 12px;\n          color: #666;\n          font-weight: 500;\n        }\n        \n        .value {\n          font-size: 12px;\n          color: #333;\n          font-weight: 600;\n        }\n      }\n    }\n    \n    .model-description {\n      font-size: 12px;\n      color: #666;\n      line-height: 1.4;\n      margin-bottom: 12px;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n    \n    .model-actions {\n      display: flex;\n      gap: 8px;\n      justify-content: flex-end;\n      \n      .action-btn {\n        padding: 6px 8px;\n        border: 1px solid #e0e0e0;\n        border-radius: 3px;\n        background: white;\n        cursor: pointer;\n        font-size: 12px;\n        color: #666;\n        transition: all 0.2s;\n        \n        &:hover {\n          background: #f0f0f0;\n          border-color: #2196f3;\n          color: #2196f3;\n        }\n      }\n    }\n  }\n}\n\n@keyframes spin {\n  0% { transform: rotate(0deg); }\n  100% { transform: rotate(360deg); }\n}"] }]