@memberjunction/ng-core-entity-forms 4.4.0 → 5.1.0

package/dist/lib/custom/AIPrompts/ai-prompt-form.component.js

@@ -10,7 +10,7 @@ import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { SharedService } from '@memberjunction/ng-shared';
 import { Metadata, RunView, CompositeKey } from '@memberjunction/core';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
-import { AIPromptFormComponent } from '../../generated/Entities/AIPrompt/aiprompt.form.component';
+import { MJAIPromptFormComponent } from '../../generated/Entities/MJAIPrompt/mjaiprompt.form.component';
 import { AIEngineBase } from '@memberjunction/ai-engine-base';
 import { AITestHarnessDialogService } from '@memberjunction/ng-ai-test-harness';
 import { AIPromptManagementService } from './ai-prompt-management.service';
@@ -1424,7 +1424,7 @@ function AIPromptFormComponentExtended_Conditional_2_Conditional_64_Template(rf,
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("expanded", false);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("AI Result Cache", "AIPromptID"))("NewRecordValues", ctx_r1.NewRecordValues("AI Result Cache"))("AllowLoad", true)("ShowToolbar", false);
+    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: AI Result Cache", "AIPromptID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: AI Result Cache"))("AllowLoad", true)("ShowToolbar", false);
 } }
 function AIPromptFormComponentExtended_Conditional_2_Conditional_65_ng_template_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 64);
@@ -1451,7 +1451,7 @@ function AIPromptFormComponentExtended_Conditional_2_Conditional_65_Template(rf,
     i0.ɵɵadvance(7);
     i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: AI Agent Prompts", "PromptID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: AI Agent Prompts"))("AllowLoad", true)("ShowToolbar", false);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("AI Prompts", "ResultSelectorPromptID"))("NewRecordValues", ctx_r1.NewRecordValues("AI Prompts"))("AllowLoad", true)("ShowToolbar", false);
+    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: AI Prompts", "ResultSelectorPromptID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: AI Prompts"))("AllowLoad", true)("ShowToolbar", false);
 } }
 function AIPromptFormComponentExtended_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "form", 4, 0);
@@ -1589,7 +1589,7 @@ function AIPromptFormComponentExtended_Conditional_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("entity", ctx_r1.record)("mode", "prompt")("isVisible", ctx_r1.showTestHarness);
 } }
-let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends AIPromptFormComponent {
+let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends MJAIPromptFormComponent {
     constructor() {
         super(...arguments);
         this.testHarnessService = inject(AITestHarnessDialogService);
@@ -1658,11 +1658,11 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
     }
     /** Check if user can create Template Contents */
     get UserCanCreateTemplateContents() {
-        return this.checkEntityPermission('Template Contents', 'Create');
+        return this.checkEntityPermission('MJ: Template Contents', 'Create');
     }
     /** Check if user can update Template Contents */
     get UserCanUpdateTemplateContents() {
-        return this.checkEntityPermission('Template Contents', 'Update');
+        return this.checkEntityPermission('MJ: Template Contents', 'Update');
     }
     /** Check if user can create AI Prompt Models */
     get UserCanCreatePromptModels() {
@@ -1788,7 +1788,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
             return;
         }
         // First check if we already have this template in pending records (newly created)
-        const pendingTemplate = this.PendingRecords.find(p => p.entityObject.EntityInfo.Name === 'Templates' &&
+        const pendingTemplate = this.PendingRecords.find(p => p.entityObject.EntityInfo.Name === 'MJ: Templates' &&
             p.entityObject.Get('ID') === this.record.TemplateID);
         if (pendingTemplate) {
             // Use the pending template
@@ -1798,12 +1798,13 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
             // Clear template content and params since this is a new template
             this.templateContent = null;
             this.templateParams = [];
+            this.cdr.detectChanges();
             return;
         }
         this.isLoadingTemplate = true;
         this.templateNotFoundInDatabase = false; // Reset the flag
         try {
-            this.template = await this._metadata.GetEntityObject('Templates');
+            this.template = await this._metadata.GetEntityObject('MJ: Templates');
             await this.template.Load(this.record.TemplateID);
             if (!this.template.IsSaved) {
                 this.template = null;
@@ -1826,6 +1827,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
         }
         finally {
             this.isLoadingTemplate = false;
+            this.cdr.detectChanges();
         }
     }
     /**
@@ -1901,7 +1903,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
         try {
             // First, clean up any pending changes related to the old template
             this.cleanupOldTemplateRecords();
-            const newTemplate = await this._metadata.GetEntityObject('Templates');
+            const newTemplate = await this._metadata.GetEntityObject('MJ: Templates');
             console.log("Record Name:", this.record.Name);
             newTemplate.NewRecord();
             newTemplate.Name = `${this.record.Name || 'AI Prompt'} Template`;
@@ -1944,7 +1946,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
         for (let i = currentPendingRecords.length - 1; i >= 0; i--) {
             const record = currentPendingRecords[i];
             const entityName = record.entityObject.EntityInfo.Name;
-            if (entityName === 'Template Contents' || entityName === 'Template Params') {
+            if (entityName === 'MJ: Template Contents' || entityName === 'MJ: Template Params') {
                 currentPendingRecords.splice(i, 1);
             }
         }
@@ -1960,7 +1962,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
         try {
             const rv = new RunView();
             const results = await rv.RunView({
-                EntityName: 'Template Contents',
+                EntityName: 'MJ: Template Contents',
                 ExtraFilter: `TemplateID = '${this.template.ID}'`,
                 OrderBy: 'Priority ASC',
                 ResultType: 'entity_object'
@@ -1985,7 +1987,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
         try {
             const rv = new RunView();
             const results = await rv.RunView({
-                EntityName: 'Template Params',
+                EntityName: 'MJ: Template Params',
                 ExtraFilter: `TemplateID = '${this.template.ID}'`,
                 OrderBy: 'Name ASC'
             });
@@ -2072,7 +2074,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
             for (let i = currentPendingRecords.length - 1; i >= 0; i--) {
                 const record = currentPendingRecords[i];
                 if (record.entityObject === templateContent ||
-                    (record.entityObject.EntityInfo.Name === 'Template Contents' &&
+                    (record.entityObject.EntityInfo.Name === 'MJ: Template Contents' &&
                         record.entityObject.Get('ID') === templateContent.Get('ID'))) {
                     currentPendingRecords.splice(i, 1);
                     break;
@@ -2573,7 +2575,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
             const md = new Metadata();
             const transactionGroup = await md.CreateTransactionGroup();
             // First, save any templates that need to be saved (they must be saved before AI Prompts)
-            const templateRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'Templates');
+            const templateRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name === 'MJ: Templates');
             for (const templateRecord of templateRecords) {
                 templateRecord.entityObject.TransactionGroup = transactionGroup;
                 if (templateRecord.action === 'save') {
@@ -2595,7 +2597,7 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
                 return false;
             }
             // Then save all other pending records (excluding templates which we already saved)
-            const otherRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name !== 'Templates');
+            const otherRecords = this.PendingRecords.filter(p => p.entityObject.EntityInfo.Name !== 'MJ: Templates');
             for (const record of otherRecords) {
                 record.entityObject.TransactionGroup = transactionGroup;
                 if (record.action === 'save') {
@@ -3073,12 +3075,12 @@ let AIPromptFormComponentExtended = class AIPromptFormComponentExtended extends
         } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective, i3.DialogContainerDirective, i3.WindowComponent, i4.TextBoxComponent, i4.NumericTextBoxComponent, i4.TextAreaComponent, i5.ItemTemplateDirective, i5.NoDataTemplateDirective, i5.DropDownListComponent, i5.DropDownTreeComponent, i6.ButtonComponent, i6.ButtonGroupComponent, i7.MjFormToolbarComponent, i7.MjFormFieldComponent, i7.ExplorerEntityDataGridComponent, i8.CodeEditorComponent, i9.AITestHarnessComponent, i10.TemplateEditorComponent, i11.DatePipe], styles: [".record-form-container[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    padding: 10px;\n}\n\n.custom-toolbar-actions[_ngcontent-%COMP%] {\n    margin-left: auto;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    font-weight: 500;\n    letter-spacing: 0.02em;\n}\n\n.config-summary[_ngcontent-%COMP%] {\n    position: sticky;\n    top: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n.config-item[_ngcontent-%COMP%] {\n    padding: 8px 0;\n    border-bottom: 1px solid #e9ecef;\n}\n\n.config-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.template-tab-content[_ngcontent-%COMP%] {\n    background: #fff;\n}\n\n.template-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 1.1em;\n}\n\n.loading-state[_ngcontent-%COMP%], \n.no-template-state[_ngcontent-%COMP%], \n.invalid-template-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-template-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.invalid-template-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n.template-editor-container[_ngcontent-%COMP%] {\n    background: #fff;\n    border-radius: 6px;\n}\n\n\n\n@media (max-width: 1200px) {\n    .record-form-container[_ngcontent-%COMP%]   .mj-tab-body[_ngcontent-%COMP%]    > div[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr !important;\n        gap: 20px;\n    }\n    \n    .config-summary[_ngcontent-%COMP%] {\n        order: -1;\n        position: static;\n        max-height: none;\n    }\n}\n\n\n\n@media (max-width: 768px) {\n    .custom-toolbar-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 4px !important;\n    }\n    \n    .status-badge[_ngcontent-%COMP%] {\n        align-self: flex-start;\n    }\n}\n\n\n\n.record-form-container[_ngcontent-%COMP%]   mj-form-section[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%], \n.config-item[_ngcontent-%COMP%], \n.template-header[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}\n\n.config-item[_ngcontent-%COMP%]:hover {\n    background-color: rgba(0,0,0,0.02);\n    border-radius: 4px;\n    margin: 0 -8px;\n    padding: 8px;\n}\n\n\n\n.history-row[_ngcontent-%COMP%] {\n    transition: background 0.2s;\n}\n\n.history-row[_ngcontent-%COMP%]:not(.even-row) {\n    background: #f8f9fa;\n}\n\n.history-row.even-row[_ngcontent-%COMP%] {\n    background: white;\n}\n\n.history-row[_ngcontent-%COMP%]:hover {\n    background: #e9ecef !important;\n}\n\n\n\n.parameter-card[_ngcontent-%COMP%] {\n    position: relative;\n    overflow: hidden;\n}\n\n.parameter-card[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 4px;\n    background: inherit;\n    transition: width 0.2s;\n}\n\n.parameter-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.parameter-card[_ngcontent-%COMP%]:hover::before {\n    width: 6px;\n}\n\n.type-badge[_ngcontent-%COMP%] {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n    transition: transform 0.2s;\n}\n\n.parameter-card[_ngcontent-%COMP%]:hover   .type-badge[_ngcontent-%COMP%] {\n    transform: scale(1.05);\n}\n\n\n\n.parameter-card[_ngcontent-%COMP%]   i.fa-solid[_ngcontent-%COMP%] {\n    transition: transform 0.3s;\n}\n\n.parameter-card[_ngcontent-%COMP%]:hover   i.fa-solid[_ngcontent-%COMP%] {\n    transform: rotate(360deg);\n}\n\n\n\n@media (max-width: 768px) {\n    .parameter-card[_ngcontent-%COMP%] {\n        margin-bottom: 8px;\n    }\n    \n    .parameter-card[_ngcontent-%COMP%]   h6[_ngcontent-%COMP%] {\n        font-size: 0.95em;\n    }\n    \n    .type-badge[_ngcontent-%COMP%] {\n        font-size: 0.7em !important;\n    }\n}"] }); }
 };
 AIPromptFormComponentExtended = __decorate([
-    RegisterClass(BaseFormComponent, 'AI Prompts')
+    RegisterClass(BaseFormComponent, 'MJ: AI Prompts')
 ], AIPromptFormComponentExtended);
 export { AIPromptFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AIPromptFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-ai-prompt-form', template: "<div class=\"record-form-container\">\n  <!-- Dialog container for Kendo dialogs -->\n  <div kendoDialogContainer></div>\n  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\" >\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n      <!-- Main Content Area - Template Editor and Configuration -->\n      <div class=\"prompt-main-area\" style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto;\">\n        <!-- Header Section -->\n        <div class=\"prompt-header\" style=\"flex-shrink: 0; padding: 20px; background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n          <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n            <!-- Left: Prompt Info -->\n            <div style=\"flex: 1; min-width: 0;\">\n              <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                <i class=\"fa-solid fa-robot\" style=\"color: #6f42c1; font-size: 1.4em;\"></i>\n                @if (EditMode) {\n                  <kendo-textbox [(ngModel)]=\"record.Name\"\n                    name=\"promptName\"\n                    placeholder=\"Enter prompt name...\"\n                    style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                  </kendo-textbox>\n                } @else {\n                  <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled AI Prompt' }}</h4>\n                  <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\"\n                    style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                    {{ record.Status }}\n                  </span>\n                }\n              </div>\n              <!-- Status and Type Editors when in edit mode -->\n              @if (EditMode) {\n                <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n                  <div>\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Status</label>\n                    <kendo-dropdownlist [(ngModel)]=\"record.Status\"\n                      name=\"promptStatus\"\n                      [data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n                      textField=\"text\"\n                      valueField=\"value\"\n                      [valuePrimitive]=\"true\"\n                      style=\"width: 150px;\">\n                    </kendo-dropdownlist>\n                  </div>\n                  <div>\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                      Type <span style=\"color: #dc3545;\">*</span>\n                    </label>\n                    @if (isLoadingPromptTypes) {\n                      <div style=\"padding: 8px; color: #6c757d; font-style: italic; width: 200px;\">\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading types...\n                      </div>\n                    } @else {\n                      <kendo-dropdownlist [(ngModel)]=\"record.TypeID\"\n                        name=\"promptTypeID\"\n                        [data]=\"availablePromptTypes\"\n                        textField=\"Name\"\n                        valueField=\"ID\"\n                        [valuePrimitive]=\"true\"\n                        [filterable]=\"true\"\n                        placeholder=\"Select prompt type...\"\n                        style=\"width: 200px;\">\n                      </kendo-dropdownlist>\n                    }\n                  </div>\n                </div>\n              }\n              @if (EditMode) {\n                <kendo-textarea [(ngModel)]=\"record.Description\"\n                  name=\"promptDescription\"\n                  [rows]=\"2\"\n                  placeholder=\"Enter prompt description...\"\n                  style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\">\n                </kendo-textarea>\n              } @else if (record.Description) {\n                <p style=\"margin: 0 0 12px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n              }\n              <!-- Quick Config Row -->\n              <div class=\"quick-config\" style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                @if (record.TypeID) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-tag\" style=\"color: #6c757d;\"></i>\n                    <span style=\"color: #6c757d;\">Type:</span>\n                    <span style=\"color: #495057; font-weight: 500;\">{{ getPromptTypeDisplayName(record.TypeID) }}</span>\n                  </div>\n                }\n                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                  <i class=\"fa-solid fa-layer-group\" style=\"color: #6c757d;\"></i>\n                  <span style=\"color: #6c757d;\">Parallelization:</span>\n                  <span style=\"color: #495057; font-weight: 500;\">{{ getParallelizationModeDisplay() }}</span>\n                </div>\n                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                  <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                  <span style=\"color: #6c757d;\">Output:</span>\n                  <span [style.color]=\"getValidationColor()\" style=\"font-weight: 500;\">{{ getOutputTypeDisplay() }}</span>\n                </div>\n                @if (record.EnableCaching) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-database\" style=\"color: #28a745;\"></i>\n                    <span style=\"color: #28a745; font-weight: 500;\">Caching Enabled</span>\n                  </div>\n                }\n                @if (record.EffortLevel) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-tachometer-alt\" style=\"color: #6c757d;\"></i>\n                    <span style=\"color: #6c757d;\">Effort Level:</span>\n                    <span style=\"color: #495057; font-weight: 500;\">{{ record.EffortLevel }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            <!-- Right: Action Buttons -->\n            <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n              <div style=\"display: flex; gap: 8px;\">\n                @if (record.ID) {\n                  <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\"\n                    (click)=\"openTestHarness()\"\n                    title=\"Run AI Prompt Test Harness\">\n                    <i class=\"fa-solid fa-play\"></i> Run\n                  </button>\n                }\n              </div>\n              @if (!canExecute && record.ID) {\n                <div style=\"font-size: 0.75em; color: #dc3545; text-align: right; max-width: 200px;\">\n                  @if (record.Status !== 'Active') {\n                    \u2022 Prompt must be Active<br>\n                  }\n                  @if (!record.TemplateID) {\n                    \u2022 Template is required<br>\n                  }\n                  @if (!template && record.TemplateID) {\n                    \u2022 Template not found<br>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Configuration Sections with Expansion Panels -->\n        <div class=\"configuration-sections\" style=\"flex: 1; background: white; border-top: 2px solid #e9ecef; padding: 16px; min-height: 0;\">\n          <!-- Template Editor Section -->\n          <kendo-expansionpanel\n            [expanded]=\"true\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                Template Editor\n                @if (template) {\n                  <span style=\"color: #6c757d; font-size: 0.9em; font-weight: normal;\">\u2022 {{ template.Name }}</span>\n                }\n              </span>\n            </ng-template>\n            <!-- Direct Content Projection -->\n            <div class=\"template-section\" style=\"display: flex; flex-direction: column; min-height: 400px; padding: 8px;\">\n              @if (isLoadingTemplate) {\n                <div class=\"loading-state\" style=\"flex: 1; display: flex; align-items: center; justify-content: center; color: #6c757d;\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; margin-right: 12px;\"></i>\n                  Loading template...\n                </div>\n              } @else if (!record.TemplateID) {\n                <div class=\"no-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #6c757d;\">\n                  <i class=\"fa-solid fa-code\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.3;\"></i>\n                  <h5 style=\"margin-bottom: 12px; color: #495057;\">No Template Associated</h5>\n                  <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n                    This AI prompt needs a template to define its structure and parameters.\n                    Create a new template or link to an existing one.\n                  </p>\n                  <div style=\"display: flex; gap: 12px;\">\n                    @if (UserCanCreateTemplates) {\n                      <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n                        <i class=\"fa-solid fa-plus\"></i> Create New Template\n                      </button>\n                    }\n                    @if (UserCanReadTemplates) {\n                      <button kendoButton [fillMode]=\"'outline'\" (click)=\"linkExistingTemplate()\">\n                        <i class=\"fa-solid fa-link\"></i> Link Existing Template\n                      </button>\n                    }\n                  </div>\n                </div>\n              } @else if (templateNotFoundInDatabase) {\n                <div class=\"invalid-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #dc3545;\">\n                  <i class=\"fa-solid fa-exclamation-triangle\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.7;\"></i>\n                  <h5 style=\"margin-bottom: 12px;\">Template Not Found</h5>\n                  <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n                    The referenced template could not be loaded. It may have been deleted or moved.\n                  </p>\n                  <div style=\"display: flex; gap: 12px;\">\n                    <button kendoButton [fillMode]=\"'outline'\" (click)=\"loadTemplate()\">\n                      <i class=\"fa-solid fa-refresh\"></i> Retry Loading\n                    </button>\n                    @if (UserCanCreateTemplates) {\n                      <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n                        <i class=\"fa-solid fa-plus\"></i> Create New Template\n                      </button>\n                    }\n                  </div>\n                </div>\n              } @else {\n                <!-- Active Template Editor -->\n                <div class=\"template-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 350px;\">\n                  <!-- Template Actions Bar -->\n                  @if (template && EditMode) {\n                    <div class=\"template-actions\" style=\"display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid #e9ecef; background: #f8f9fa;\">\n                      @if (UserCanUpdateTemplates) {\n                        <button kendoButton\n                          [fillMode]=\"'outline'\"\n                          [size]=\"'small'\"\n                          (click)=\"linkExistingTemplate()\"\n                          title=\"Change to a different template\">\n                          <i class=\"fa-solid fa-exchange-alt\"></i> Change Template\n                        </button>\n                      }\n                      @if (UserCanReadTemplates) {\n                        <button kendoButton\n                          [fillMode]=\"'outline'\"\n                          [size]=\"'small'\"\n                          (click)=\"openTemplateInNewWindow()\"\n                          title=\"Open template in new window\">\n                          <i class=\"fa-solid fa-external-link-alt\"></i> Open in New Window\n                        </button>\n                      }\n                    </div>\n                  }\n                  <!-- Template Editor -->\n                  <div style=\"flex: 1; background: white; border-radius: 6px; border: 1px solid #e9ecef;\">\n                    <mj-template-editor\n                      #templateEditor\n                      [template]=\"template\"\n                      [config]=\"templateEditorConfig\"\n                      (contentChange)=\"onTemplateContentChange($event)\"\n                      (runTemplate)=\"onTemplateRun($event)\"\n                      style=\"display: block; min-height: 300px;\">\n                    </mj-template-editor>\n                  </div>\n                </div>\n              }\n            </div>\n          </kendo-expansionpanel>\n          <!-- Model Configuration Expansion Panel -->\n          @if (record.IsSaved) {\n            <kendo-expansionpanel\n              [expanded]=\"true\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n                  Models\n                  @if (promptModels.length > 0) {\n                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                      {{ promptModels.length }}\n                    </span>\n                  }\n                  <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n                    <i class=\"fa-solid fa-info-circle\" title=\"Models are tried in order from top to bottom. The first available model will be used.\"></i>\n                    Priority order (first available model will be used)\n                  </span>\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <!-- Model Management Interface -->\n                <div class=\"model-management\" style=\"border: 1px solid #dee2e6; border-radius: 6px; background: #f8f9fa;\">\n                  @if (isLoadingModels) {\n                    <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                      <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading models...\n                    </div>\n                  } @else {\n                    @if (promptModels.length === 0) {\n                      <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                        <i class=\"fa-solid fa-info-circle\"></i> No models configured\n                        @if (EditMode && UserCanCreatePromptModels) {\n                          <div style=\"margin-top: 10px;\">\n                            <button kendoButton fillMode=\"outline\" themeColor=\"primary\" size=\"small\"\n                              (click)=\"addNewModel()\">\n                              <i class=\"fa-solid fa-plus\"></i> Add Model\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    } @else {\n                      <!-- Priority explanation for multiple models -->\n                      @if (promptModels.length > 1) {\n                        <div style=\"padding: 12px 16px; background: #e3f2fd; border-bottom: 1px solid #bbdefb; color: #1565c0; font-size: 0.85em;\">\n                          <i class=\"fa-solid fa-info-circle\" style=\"margin-right: 6px;\"></i>\n                          Models are tried in priority order (highest priority first). The first available model that meets requirements will be used for execution.\n                        </div>\n                      }\n                      <!-- Column Headers -->\n                      <div class=\"model-header\" style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; background: #e9ecef; font-weight: 600; font-size: 0.85em; color: #495057; border-bottom: 1px solid #dee2e6;\">\n                        <div title=\"Priority order - models are tried from top to bottom\">\n                          <i class=\"fa-solid fa-sort\" style=\"color: #6c757d;\"></i>\n                        </div>\n                        <div>AI Model <span style=\"color: #dc3545;\">*</span></div>\n                        <div>Vendor</div>\n                        <div>Configuration</div>\n                        <div>Created</div>\n                        <div>Actions</div>\n                      </div>\n                      @for (model of promptModels; track getModelTrackId(model) || $index; let i = $index) {\n                        <div class=\"model-row\"\n                          [draggable]=\"EditMode\"\n                          (dragstart)=\"onDragStart($event, i)\"\n                          (dragover)=\"onDragOver($event)\"\n                          (drop)=\"onDrop($event, i)\"\n                          (dragend)=\"onDragEnd($event)\"\n                          [style.background]=\"!model.ModelID ? '#fff3cd' : (draggedIndex === i ? '#e3f2fd' : 'white')\"\n                          [style.border-left]=\"!model.ModelID ? '3px solid #ffc107' : 'none'\"\n                          [style.opacity]=\"draggedIndex === i ? '0.5' : '1'\"\n                          style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e9ecef; align-items: start; transition: background 0.2s, opacity 0.2s;\">\n                          <!-- Drag Handle / Priority -->\n                          <div class=\"drag-handle\" style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6c757d;\">\n                            @if (EditMode) {\n                              <i class=\"fa-solid fa-grip-vertical\" title=\"Drag to reorder priority\" style=\"cursor: move;\"></i>\n                              <span style=\"font-size: 0.7em; margin-top: 2px;\">#{{ i + 1 }}</span>\n                            } @else {\n                              <span style=\"font-size: 0.9em; font-weight: 600;\" title=\"Priority {{ model.Priority }} - Higher priority numbers are tried first\">#{{ i + 1 }}</span>\n                            }\n                          </div>\n                          <!-- Model Selection -->\n                          <div class=\"model-select\">\n                            @if (EditMode) {\n                              <kendo-dropdownlist [(ngModel)]=\"model.ModelID\"\n                                [name]=\"'modelId_' + getModelTrackId(model)\"\n                                [data]=\"availableModels\"\n                                textField=\"Name\"\n                                valueField=\"ID\"\n                                [valuePrimitive]=\"true\"\n                                [filterable]=\"true\"\n                                placeholder=\"Select a model...\"\n                                (valueChange)=\"onModelChange($event, i)\"\n                                style=\"width: 100%;\">\n                              </kendo-dropdownlist>\n                            } @else {\n                              <span style=\"font-weight: 500;\">{{ getModelDisplayName(model.ModelID) }}</span>\n                            }\n                          </div>\n                          <!-- Vendor -->\n                          <div class=\"model-vendor\">\n                            @if (EditMode) {\n                              @if (model.ModelID) {\n                                @if (shouldShowVendorDropdown(model.ModelID)) {\n                                  <kendo-dropdownlist [(ngModel)]=\"model.VendorID\"\n                                    [name]=\"'vendorId_' + getModelTrackId(model)\"\n                                    [data]=\"getVendorsForModelSync(model.ModelID)\"\n                                    textField=\"Name\"\n                                    valueField=\"ID\"\n                                    [valuePrimitive]=\"true\"\n                                    [filterable]=\"true\"\n                                    placeholder=\"Select vendor...\"\n                                    style=\"width: 100%;\">\n                                    <ng-template kendoDropDownListItemTemplate let-dataItem>\n                                      <span [style.color]=\"getVendorStatusColor(model.ModelID, dataItem.ID)\">\n                                        {{ dataItem.Name }}\n                                        @if (getModelVendorStatus(model.ModelID, dataItem.ID) !== 'Active') {\n                                          <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, dataItem.ID) }})</span>\n                                        }\n                                      </span>\n                                    </ng-template>\n                                  </kendo-dropdownlist>\n                                } @else {\n                                  <!-- Single vendor - just show the name -->\n                                  @if (getVendorsForModelSync(model.ModelID).length === 1) {\n                                    <span [style.color]=\"getVendorStatusColor(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID)\" style=\"font-size: 0.9em; font-weight: 500;\">\n                                      {{ getVendorsForModelSync(model.ModelID)[0].Name }}\n                                      @if (getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) !== 'Active') {\n                                        <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) }})</span>\n                                      }\n                                    </span>\n                                  } @else {\n                                    <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">No vendors available</span>\n                                  }\n                                }\n                              } @else {\n                                <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">Select model first</span>\n                              }\n                            } @else {\n                              @if (model.VendorID && model.ModelID) {\n                                <span [style.color]=\"getVendorStatusColor(model.ModelID, model.VendorID)\" style=\"font-size: 0.9em;\">\n                                  {{ getVendorDisplayName(model.VendorID) }}\n                                  @if (getModelVendorStatus(model.ModelID, model.VendorID) !== 'Active') {\n                                    <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, model.VendorID) }})</span>\n                                  }\n                                </span>\n                              } @else {\n                                <span style=\"color: #6c757d; font-size: 0.9em;\">-</span>\n                              }\n                            }\n                          </div>\n                          <!-- Configuration -->\n                          <div class=\"model-configuration\">\n                            @if (EditMode) {\n                              @if (isLoadingConfigurations) {\n                                <div style=\"padding: 4px; color: #6c757d; font-style: italic; font-size: 0.85em;\">\n                                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n                                </div>\n                              } @else {\n                                <kendo-dropdownlist [(ngModel)]=\"model.ConfigurationID\"\n                                  [name]=\"'configurationId_' + getModelTrackId(model)\"\n                                  [data]=\"availableConfigurations\"\n                                  textField=\"Name\"\n                                  valueField=\"ID\"\n                                  [valuePrimitive]=\"true\"\n                                  [filterable]=\"true\"\n                                  placeholder=\"Default\"\n                                  (valueChange)=\"onConfigurationChange($event, i)\"\n                                  style=\"width: 100%;\">\n                                  <ng-template kendoDropDownListNoDataTemplate>\n                                    <div style=\"padding: 8px; text-align: center; color: #6c757d;\">\n                                      No configurations available\n                                    </div>\n                                  </ng-template>\n                                </kendo-dropdownlist>\n                              }\n                            } @else {\n                              <span style=\"font-size: 0.9em;\">{{ getConfigurationDisplayName(model.ConfigurationID) }}</span>\n                            }\n                          </div>\n                          <!-- Created Date -->\n                          <div class=\"model-created\">\n                            @if (model.ID) {\n                              <span style=\"color: #6c757d; font-size: 0.8em;\">{{ model.__mj_CreatedAt | date:'short' }}</span>\n                            } @else {\n                              <span style=\"color: #28a745; font-size: 0.8em; font-style: italic;\">New</span>\n                            }\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"model-actions\" style=\"display: flex; gap: 2px; flex-direction: column;\">\n                            @if (EditMode) {\n                              <div style=\"display: flex; gap: 2px; margin-bottom: 4px;\">\n                                @if (UserCanUpdatePromptModels) {\n                                  <button kendoButton fillMode=\"flat\" size=\"small\"\n                                    (click)=\"moveModelUp(i)\"\n                                    [disabled]=\"i === 0\"\n                                    title=\"Move up\">\n                                    <i class=\"fa-solid fa-chevron-up\"></i>\n                                  </button>\n                                  <button kendoButton fillMode=\"flat\" size=\"small\"\n                                    (click)=\"moveModelDown(i)\"\n                                    [disabled]=\"i === promptModels.length - 1\"\n                                    title=\"Move down\">\n                                    <i class=\"fa-solid fa-chevron-down\"></i>\n                                  </button>\n                                }\n                              </div>\n                              @if (UserCanDeletePromptModels) {\n                                <button kendoButton fillMode=\"flat\" themeColor=\"error\" size=\"small\"\n                                  (click)=\"removePromptModel(i)\"\n                                  title=\"Remove model\">\n                                  <i class=\"fa-solid fa-times\"></i>\n                                </button>\n                              }\n                            }\n                          </div>\n                        </div>\n                        <!-- Second row with additional details -->\n                        <div style=\"display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #e9ecef; background: #f8f9fa; font-size: 0.85em; color: #6c757d;\">\n                          <div></div>\n                          <div>\n                            <!-- Basic model details -->\n                            <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;\">\n                              @if (model.Status) {\n                                <span><strong>Status:</strong> {{ model.Status }}</span>\n                              }\n                            </div>\n                            <!-- Parallel execution fields when prompt is ModelSpecific -->\n                            @if (record.ParallelizationMode === 'ModelSpecific') {\n                              <div style=\"padding: 8px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px; margin-top: 8px;\">\n                                <div style=\"margin-bottom: 6px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                                  <i class=\"fa-solid fa-layer-group\"></i> Model-Specific Parallel Execution\n                                </div>\n                                @if (EditMode) {\n                                  <div style=\"display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center;\">\n                                    <!-- Parallel Mode -->\n                                    <div>\n                                      <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Mode</label>\n                                      <kendo-dropdownlist [(ngModel)]=\"model.ParallelizationMode\"\n                                        [name]=\"'parallelMode_' + i\"\n                                        [data]=\"[{text: 'None', value: 'None'}, {text: 'Static Count', value: 'StaticCount'}, {text: 'Config Param', value: 'ConfigParam'}]\"\n                                        textField=\"text\"\n                                        valueField=\"value\"\n                                        [valuePrimitive]=\"true\"\n                                        placeholder=\"Select mode...\"\n                                        style=\"width: 100%; font-size: 0.85em;\">\n                                      </kendo-dropdownlist>\n                                    </div>\n                                    <!-- Parallel Count (when StaticCount) -->\n                                    @if (model.ParallelizationMode === 'StaticCount') {\n                                      <div>\n                                        <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Count</label>\n                                        <kendo-numerictextbox [(ngModel)]=\"model.ParallelCount\"\n                                          [name]=\"'parallelCount_' + i\"\n                                          [min]=\"1\"\n                                          [step]=\"1\"\n                                          [format]=\"'n0'\"\n                                          placeholder=\"Count...\"\n                                          style=\"width: 100%; font-size: 0.85em;\">\n                                        </kendo-numerictextbox>\n                                      </div>\n                                    }\n                                    <!-- Config Param (when ConfigParam) -->\n                                    @if (model.ParallelizationMode === 'ConfigParam') {\n                                      <div>\n                                        <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Config Parameter</label>\n                                        <kendo-textbox [(ngModel)]=\"model.ParallelConfigParam\"\n                                          [name]=\"'parallelConfigParam_' + i\"\n                                          placeholder=\"Parameter name...\"\n                                          style=\"width: 100%; font-size: 0.85em;\">\n                                        </kendo-textbox>\n                                      </div>\n                                    }\n                                  </div>\n                                } @else {\n                                  <!-- Read-only display -->\n                                  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center;\">\n                                    @if (model.ParallelizationMode) {\n                                      <span><strong>Parallel Mode:</strong> {{ model.ParallelizationMode }}</span>\n                                    }\n                                    @if (model.ParallelCount) {\n                                      <span><strong>Parallel Count:</strong> {{ model.ParallelCount }}</span>\n                                    }\n                                    @if (model.ParallelConfigParam) {\n                                      <span><strong>Config Param:</strong> {{ model.ParallelConfigParam }}</span>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (EditMode && UserCanCreatePromptModels) {\n                        <div class=\"add-model-row\" style=\"padding: 12px 16px; text-align: center; background: #f8f9fa; border-top: 1px solid #dee2e6;\">\n                          <button kendoButton fillMode=\"outline\" themeColor=\"success\" size=\"small\"\n                            (click)=\"addNewModel()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Model\n                          </button>\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Advanced Configuration Expansion Panel -->\n          <kendo-expansionpanel\n            [expanded]=\"false\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-cogs\" style=\"color: #6c757d;\"></i>\n                Advanced Configuration\n              </span>\n            </ng-template>\n            <!-- Direct Content Projection -->\n            <div style=\"padding: 16px 0;\">\n              <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                <!-- Left Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"ParallelizationMode\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  @if (showParallelCount) {\n                    <mj-form-field\n                      [Record]=\"record\"\n                      [ShowLabel]=\"true\"\n                      FieldName=\"ParallelCount\"\n                      Type=\"numerictextbox\"\n                      [EditMode]=\"EditMode\">\n                    </mj-form-field>\n                  }\n                  @if (showParallelConfigParam) {\n                    <mj-form-field\n                      [Record]=\"record\"\n                      [ShowLabel]=\"true\"\n                      FieldName=\"ParallelConfigParam\"\n                      Type=\"textbox\"\n                      [EditMode]=\"EditMode\">\n                    </mj-form-field>\n                  }\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"OutputType\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"EffortLevel\"\n                    Type=\"numerictextbox\"\n                    Caption=\"Effort Level (1-100)\"\n                    Description=\"Higher values request more thorough reasoning\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                </div>\n                <!-- Right Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"ValidationBehavior\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"EnableCaching\"\n                    Type=\"checkbox\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <!-- Result Selector Prompt with Tree Selector -->\n                  <div style=\"margin-bottom: 16px;\">\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                      Result Selector Prompt\n                    </label>\n                    @if (EditMode) {\n                      @if (isLoadingResultSelectorData) {\n                        <div style=\"padding: 8px; color: #6c757d; font-style: italic;\">\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prompts...\n                        </div>\n                      } @else {\n                        <kendo-dropdowntree\n                          [(ngModel)]=\"record.ResultSelectorPromptID\"\n                          name=\"resultSelectorPromptID\"\n                          [data]=\"resultSelectorTreeData\"\n                          textField=\"text\"\n                          valueField=\"value\"\n                          [valuePrimitive]=\"true\"\n                          [filterable]=\"true\"\n                          placeholder=\"Select a result selector prompt...\"\n                          style=\"width: 100%;\"\n                          (valueChange)=\"onResultSelectorChange($event)\">\n                        </kendo-dropdowntree>\n                      }\n                    } @else {\n                      <span style=\"color: #495057;\">{{ getPromptDisplayName(record.ResultSelectorPromptID || '') || 'None selected' }}</span>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          </kendo-expansionpanel>\n          <!-- Template Parameters Expansion Panel -->\n          @if (template && templateParams.length > 0) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                  Template Parameters\n                  <span class=\"badge\" style=\"background: #6f42c1; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ templateParams.length }}\n                  </span>\n                  <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n                    <i class=\"fa-solid fa-info-circle\" title=\"These parameters are defined in the template and will be available when executing this prompt\"></i>\n                    Parameters defined in the template\n                  </span>\n                </span>\n              </ng-template>\n              <!-- Template Parameters Display -->\n              <div style=\"padding: 16px 0;\">\n                @if (isLoadingTemplateParams) {\n                  <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading template parameters...\n                  </div>\n                } @else if (templateParams.length === 0) {\n                  <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                    <i class=\"fa-solid fa-info-circle\"></i> This template has no parameters defined\n                  </div>\n                } @else {\n                  <!-- Parameters Grid -->\n                  <div style=\"display: grid; gap: 12px;\">\n                    @for (param of templateParams; track param.ID) {\n                      <div class=\"parameter-card\"\n                        style=\"border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; background: #f8f9fa; transition: all 0.2s;\"\n                        [style.border-left]=\"'4px solid ' + getParamTypeColor(param.Type)\">\n                        <!-- Parameter Header -->\n                        <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n                          <div style=\"display: flex; align-items: center; gap: 8px;\">\n                            <i [class]=\"'fa-solid ' + getParamTypeIcon(param.Type)\"\n                              [style.color]=\"getParamTypeColor(param.Type)\"\n                            style=\"font-size: 1.2em;\"></i>\n                            <h6 style=\"margin: 0; color: #495057; font-weight: 600;\">\n                              {{ param.Name }}\n                              @if (param.IsRequired) {\n                                <span style=\"color: #dc3545; font-size: 0.9em; margin-left: 4px;\">*</span>\n                              }\n                            </h6>\n                          </div>\n                          <div style=\"display: flex; align-items: center; gap: 8px;\">\n                            <span class=\"type-badge\"\n                              [style.background-color]=\"getParamTypeColor(param.Type)\"\n                              style=\"color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                              {{ param.Type }}\n                            </span>\n                            @if (param.IsRequired) {\n                              <span style=\"color: #dc3545; font-size: 0.85em; font-weight: 500;\">Required</span>\n                            } @else {\n                              <span style=\"color: #6c757d; font-size: 0.85em;\">Optional</span>\n                            }\n                          </div>\n                        </div>\n                        <!-- Parameter Description -->\n                        @if (param.Description) {\n                          <p style=\"margin: 0 0 8px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">\n                            {{ param.Description }}\n                          </p>\n                        }\n                        <!-- Type-specific Information -->\n                        <div style=\"font-size: 0.85em; color: #495057;\">\n                          <span style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n                            <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n                            {{ getParamTypeDescription(param) }}\n                          </span>\n                        </div>\n                        <!-- Additional Parameter Details -->\n                        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;\">\n                          @if (param.DefaultValue) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Default Value</label>\n                              <code style=\"font-size: 0.85em; color: #495057; word-break: break-all;\">{{ param.DefaultValue }}</code>\n                            </div>\n                          }\n                          @if (param.EntityID) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Entity</label>\n                              <span style=\"font-size: 0.85em; color: #495057;\">{{ param.Entity || 'Entity ID: ' + param.EntityID }}</span>\n                            </div>\n                          }\n                          @if (param.LinkedParameterName) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Linked To</label>\n                              <span style=\"font-size: 0.85em; color: #495057;\">\n                                {{ param.LinkedParameterName }}\n                                @if (param.LinkedParameterField) {\n                                  ({{ param.LinkedParameterField }})\n                                }\n                              </span>\n                            </div>\n                          }\n                          @if (param.ExtraFilter) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Filter</label>\n                              <code style=\"font-size: 0.8em; color: #495057; word-break: break-all;\">{{ param.ExtraFilter }}</code>\n                            </div>\n                          }\n                          @if (param.RecordID) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Record ID</label>\n                              <code style=\"font-size: 0.85em; color: #495057;\">{{ param.RecordID }}</code>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Help Text -->\n                  <div style=\"margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border: 1px solid #bbdefb;\">\n                    <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                      <i class=\"fa-solid fa-lightbulb\" style=\"color: #1976d2; margin-top: 2px;\"></i>\n                      <div style=\"flex: 1; font-size: 0.85em; color: #1565c0; line-height: 1.5;\">\n                        <strong>Using Template Parameters:</strong> When executing this prompt, you'll be prompted to provide values for all required parameters.\n                        Parameters can be simple values (text, numbers) or complex data structures (JSON objects, database records, or entire entity collections).\n                        The template will use these parameters to generate dynamic content based on the values provided at execution time.\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Output Example Expansion Panel (when OutputType = object) -->\n          @if (showOutputExample) {\n            <kendo-expansionpanel\n              [expanded]=\"true\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                  Output Example (JSON)\n                  <span style=\"color: #dc3545; font-size: 0.8em; font-weight: normal;\">\u2022 Required for object output type</span>\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px;\">\n                @if (EditMode) {\n                  <mj-code-editor\n                    [(ngModel)]=\"record.OutputExample\"\n                    name=\"outputExample\"\n                    language=\"json\"\n                    placeholder=\"Enter JSON example structure...\"\n                    style=\"width: 100%; height: 200px; border: 1px solid #dee2e6; border-radius: 4px;\">\n                  </mj-code-editor>\n                  <div style=\"margin-top: 8px; color: #6c757d; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-info-circle\"></i> Provide a JSON example that defines the expected structure for object output validation.\n                  </div>\n                } @else if (record.OutputExample) {\n                  <div style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.9em; white-space: pre-wrap; overflow: auto; max-height: 250px;\">{{ record.OutputExample }}</div>\n                } @else {\n                  <div style=\"background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; color: #856404; text-align: center;\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i> Output example is required when output type is 'object'\n                  </div>\n                }\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Execution History Expansion Panel -->\n          @if (record.IsSaved) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-history\" style=\"color: #6c757d;\"></i>\n                  Execution History\n                  @if (executionHistory.length > 0) {\n                    <span style=\"color: #6c757d; font-weight: normal;\">({{ executionHistory.length }})</span>\n                  }\n                </span>\n              </ng-template>\n              <!-- Custom Execution History Viewer -->\n              <div style=\"padding: 16px;\">\n                @if (isLoadingHistory) {\n                  <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; margin-bottom: 12px;\"></i>\n                    <p>Loading execution history...</p>\n                  </div>\n                } @else if (executionHistory.length === 0) {\n                  <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n                    <i class=\"fa-solid fa-history\" style=\"font-size: 3em; margin-bottom: 12px; opacity: 0.3;\"></i>\n                    <p>No execution history yet</p>\n                    <p style=\"font-size: 0.9em;\">Run this prompt to see execution history here</p>\n                  </div>\n                } @else {\n                  <!-- Sort Controls -->\n                  <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n                    <div style=\"color: #6c757d; font-size: 0.9em;\">\n                      Showing {{ executionHistory.length }} executions\n                    </div>\n                    <div style=\"display: flex; gap: 8px; align-items: center;\">\n                      <span style=\"color: #6c757d; font-size: 0.85em;\">Sort by:</span>\n                      <kendo-buttongroup selection=\"single\">\n                        <button kendoButton\n                          [selected]=\"historySortField === 'runAt'\"\n                          (click)=\"changeHistorySort('runAt')\"\n                          size=\"small\">\n                          Date\n                          @if (historySortField === 'runAt') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button kendoButton\n                          [selected]=\"historySortField === 'executionTime'\"\n                          (click)=\"changeHistorySort('executionTime')\"\n                          size=\"small\">\n                          Duration\n                          @if (historySortField === 'executionTime') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button kendoButton\n                          [selected]=\"historySortField === 'tokens'\"\n                          (click)=\"changeHistorySort('tokens')\"\n                          size=\"small\">\n                          Tokens\n                          @if (historySortField === 'tokens') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button kendoButton\n                          [selected]=\"historySortField === 'cost'\"\n                          (click)=\"changeHistorySort('cost')\"\n                          size=\"small\">\n                          Cost\n                          @if (historySortField === 'cost') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                      </kendo-buttongroup>\n                    </div>\n                  </div>\n                  <!-- Execution History Table -->\n                  <div style=\"border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden;\">\n                    <table style=\"width: 100%; border-collapse: collapse;\">\n                      <thead>\n                        <tr style=\"background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Status</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Date & Time</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Model</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Duration</th>\n                          <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Tokens</th>\n                          <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Cost</th>\n                          <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Type</th>\n                          <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Actions</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (run of executionHistory; track run.ID; let i = $index) {\n                          <tr class=\"history-row\"\n                            [class.even-row]=\"i % 2 === 0\"\n                            style=\"border-bottom: 1px solid #f1f3f5;\">\n                            <td style=\"padding: 12px;\">\n                              <span style=\"display: flex; align-items: center; gap: 6px;\">\n                                <i [class]=\"'fa-solid ' + getExecutionStatusIcon(run.Success)\"\n                                [style.color]=\"getExecutionStatusColor(run.Success)\"></i>\n                                <span [style.color]=\"getExecutionStatusColor(run.Success)\" style=\"font-weight: 500;\">\n                                  {{ run.Success === true ? 'Success' : run.Success === false ? 'Failed' : 'Running' }}\n                                </span>\n                              </span>\n                            </td>\n                            <td style=\"padding: 12px; color: #495057;\">\n                              {{ run.RunAt | date:'short' }}\n                            </td>\n                            <td style=\"padding: 12px; color: #495057;\">\n                              <span style=\"display: flex; align-items: center; gap: 6px;\">\n                                <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n                                {{ run.Model || 'Unknown' }}\n                              </span>\n                            </td>\n                            <td style=\"padding: 12px; color: #495057;\">\n                              {{ formatDuration(run.ExecutionTimeMS) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: right; color: #495057;\">\n                              {{ formatTokens(run.TokensUsed) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: right; color: #495057;\">\n                              {{ formatCost(run.TotalCost || run.Cost) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: center;\">\n                              @if (run.RunType) {\n                                                            <span style=\"padding: 4px 8px; border-radius: 12px; background: #e9ecef; \n                                                                       color: #495057; font-size: 0.85em; font-weight: 500;\">\n                                  {{ run.RunType }}\n                                </span>\n                              }\n                            </td>\n                            <td style=\"padding: 12px; text-align: center;\">\n                              <button kendoButton\n                                fillMode=\"flat\"\n                                size=\"small\"\n                                (click)=\"navigateToPromptRun(run.ID)\"\n                                title=\"View details\">\n                                <i class=\"fa-solid fa-external-link\"></i>\n                              </button>\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Cache Expansion Panel -->\n          @if (record.IsSaved && record.EnableCaching) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n                  Result Cache\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <mj-explorer-entity-data-grid\n                  [Params]=\"BuildRelationshipViewParamsByEntityName('AI Result Cache','AIPromptID')\"\n                  [NewRecordValues]=\"NewRecordValues('AI Result Cache')\"\n                  [AllowLoad]=\"true\"\n                  [ShowToolbar]=\"false\">\n                </mj-explorer-entity-data-grid>\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Related Items Expansion Panel -->\n          @if (record.IsSaved) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-link\" style=\"color: #6c757d;\"></i>\n                  Related Items\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                  <!-- AI Agents -->\n                  <div>\n                    <h6 style=\"margin: 0 0 12px 0; color: #495057;\">AI Agents Using This Prompt</h6>\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Prompts','PromptID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Prompts')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  </div>\n                  <!-- Result Selector References -->\n                  <div>\n                    <h6 style=\"margin: 0 0 12px 0; color: #495057;\">Prompts Using This as Result Selector</h6>\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','ResultSelectorPromptID')\"\n                      [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  </div>\n                </div>\n              </div>\n            </kendo-expansionpanel>\n          }\n        </div>\n      </div>\n    </form>\n  }\n\n\n  <!-- AI Prompt Test Harness -->\n  @if (showTestHarness) {\n    <kendo-window\n      [width]=\"1200\"\n      [height]=\"800\"\n      [minWidth]=\"800\"\n      [minHeight]=\"600\"\n      [draggable]=\"true\"\n      [resizable]=\"true\"\n      [state]=\"'default'\"\n      (close)=\"onTestHarnessVisibilityChanged(false)\"\n      title=\"Run AI Prompt - {{ record.Name || 'Untitled' }}\">\n      <mj-ai-test-harness\n        [entity]=\"record\"\n        [mode]=\"'prompt'\"\n        [isVisible]=\"showTestHarness\"\n        (visibilityChange)=\"onTestHarnessVisibilityChanged($event)\">\n      </mj-ai-test-harness>\n    </kendo-window>\n  }\n</div>", styles: [".record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    padding: 10px;\n}\n\n.custom-toolbar-actions {\n    margin-left: auto;\n}\n\n.status-badge {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    font-weight: 500;\n    letter-spacing: 0.02em;\n}\n\n.config-summary {\n    position: sticky;\n    top: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n.config-item {\n    padding: 8px 0;\n    border-bottom: 1px solid #e9ecef;\n}\n\n.config-item:last-child {\n    border-bottom: none;\n}\n\n.template-tab-content {\n    background: #fff;\n}\n\n.template-header h5 {\n    font-size: 1.1em;\n}\n\n.loading-state,\n.no-template-state,\n.invalid-template-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-template-state i,\n.invalid-template-state i {\n    opacity: 0.6;\n}\n\n.template-editor-container {\n    background: #fff;\n    border-radius: 6px;\n}\n\n/* Grid layout adjustments */\n@media (max-width: 1200px) {\n    .record-form-container .mj-tab-body > div {\n        grid-template-columns: 1fr !important;\n        gap: 20px;\n    }\n    \n    .config-summary {\n        order: -1;\n        position: static;\n        max-height: none;\n    }\n}\n\n/* Responsive toolbar */\n@media (max-width: 768px) {\n    .custom-toolbar-actions {\n        flex-direction: column;\n        gap: 4px !important;\n    }\n    \n    .status-badge {\n        align-self: flex-start;\n    }\n}\n\n/* Ensure proper spacing in form sections */\n.record-form-container mj-form-section {\n    padding: 16px;\n}\n\n/* Smooth transitions for better UX */\n.status-badge,\n.config-item,\n.template-header {\n    transition: all 0.2s ease;\n}\n\n.config-item:hover {\n    background-color: rgba(0,0,0,0.02);\n    border-radius: 4px;\n    margin: 0 -8px;\n    padding: 8px;\n}\n\n/* Execution History Table Styles */\n.history-row {\n    transition: background 0.2s;\n}\n\n.history-row:not(.even-row) {\n    background: #f8f9fa;\n}\n\n.history-row.even-row {\n    background: white;\n}\n\n.history-row:hover {\n    background: #e9ecef !important;\n}\n\n/* Template Parameters Styles */\n.parameter-card {\n    position: relative;\n    overflow: hidden;\n}\n\n.parameter-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 4px;\n    background: inherit;\n    transition: width 0.2s;\n}\n\n.parameter-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.parameter-card:hover::before {\n    width: 6px;\n}\n\n.type-badge {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n    transition: transform 0.2s;\n}\n\n.parameter-card:hover .type-badge {\n    transform: scale(1.05);\n}\n\n/* Parameter type icons animation */\n.parameter-card i.fa-solid {\n    transition: transform 0.3s;\n}\n\n.parameter-card:hover i.fa-solid {\n    transform: rotate(360deg);\n}\n\n/* Grid responsive behavior */\n@media (max-width: 768px) {\n    .parameter-card {\n        margin-bottom: 8px;\n    }\n    \n    .parameter-card h6 {\n        font-size: 0.95em;\n    }\n    \n    .type-badge {\n        font-size: 0.7em !important;\n    }\n}"] }]
+        args: [{ standalone: false, selector: 'mj-ai-prompt-form', template: "<div class=\"record-form-container\">\n  <!-- Dialog container for Kendo dialogs -->\n  <div kendoDialogContainer></div>\n  @if (record) {\n    <form class=\"record-form\" #form=\"ngForm\" >\n      <mj-form-toolbar [Form]=\"this\"></mj-form-toolbar>\n      <!-- Main Content Area - Template Editor and Configuration -->\n      <div class=\"prompt-main-area\" style=\"display: flex; flex-direction: column; height: 100%; overflow-y: auto;\">\n        <!-- Header Section -->\n        <div class=\"prompt-header\" style=\"flex-shrink: 0; padding: 20px; background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n          <div style=\"display: flex; justify-content: space-between; align-items: flex-start; gap: 20px;\">\n            <!-- Left: Prompt Info -->\n            <div style=\"flex: 1; min-width: 0;\">\n              <div style=\"display: flex; align-items: center; gap: 12px; margin-bottom: 8px;\">\n                <i class=\"fa-solid fa-robot\" style=\"color: #6f42c1; font-size: 1.4em;\"></i>\n                @if (EditMode) {\n                  <kendo-textbox [(ngModel)]=\"record.Name\"\n                    name=\"promptName\"\n                    placeholder=\"Enter prompt name...\"\n                    style=\"font-size: 1.2em; font-weight: 600; min-width: 300px; flex: 1;\">\n                  </kendo-textbox>\n                } @else {\n                  <h4 style=\"margin: 0; color: #495057; font-weight: 600; flex: 1;\">{{ record.Name || 'Untitled AI Prompt' }}</h4>\n                  <span class=\"status-badge\" [style.background-color]=\"getStatusBadgeColor()\"\n                    style=\"color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                    {{ record.Status }}\n                  </span>\n                }\n              </div>\n              <!-- Status and Type Editors when in edit mode -->\n              @if (EditMode) {\n                <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap;\">\n                  <div>\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Status</label>\n                    <kendo-dropdownlist [(ngModel)]=\"record.Status\"\n                      name=\"promptStatus\"\n                      [data]=\"[{text: 'Active', value: 'Active'}, {text: 'Pending', value: 'Pending'}, {text: 'Disabled', value: 'Disabled'}]\"\n                      textField=\"text\"\n                      valueField=\"value\"\n                      [valuePrimitive]=\"true\"\n                      style=\"width: 150px;\">\n                    </kendo-dropdownlist>\n                  </div>\n                  <div>\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                      Type <span style=\"color: #dc3545;\">*</span>\n                    </label>\n                    @if (isLoadingPromptTypes) {\n                      <div style=\"padding: 8px; color: #6c757d; font-style: italic; width: 200px;\">\n                        <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading types...\n                      </div>\n                    } @else {\n                      <kendo-dropdownlist [(ngModel)]=\"record.TypeID\"\n                        name=\"promptTypeID\"\n                        [data]=\"availablePromptTypes\"\n                        textField=\"Name\"\n                        valueField=\"ID\"\n                        [valuePrimitive]=\"true\"\n                        [filterable]=\"true\"\n                        placeholder=\"Select prompt type...\"\n                        style=\"width: 200px;\">\n                      </kendo-dropdownlist>\n                    }\n                  </div>\n                </div>\n              }\n              @if (EditMode) {\n                <kendo-textarea [(ngModel)]=\"record.Description\"\n                  name=\"promptDescription\"\n                  [rows]=\"2\"\n                  placeholder=\"Enter prompt description...\"\n                  style=\"width: 100%; max-width: 600px; margin-bottom: 12px;\">\n                </kendo-textarea>\n              } @else if (record.Description) {\n                <p style=\"margin: 0 0 12px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">{{ record.Description }}</p>\n              }\n              <!-- Quick Config Row -->\n              <div class=\"quick-config\" style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                @if (record.TypeID) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-tag\" style=\"color: #6c757d;\"></i>\n                    <span style=\"color: #6c757d;\">Type:</span>\n                    <span style=\"color: #495057; font-weight: 500;\">{{ getPromptTypeDisplayName(record.TypeID) }}</span>\n                  </div>\n                }\n                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                  <i class=\"fa-solid fa-layer-group\" style=\"color: #6c757d;\"></i>\n                  <span style=\"color: #6c757d;\">Parallelization:</span>\n                  <span style=\"color: #495057; font-weight: 500;\">{{ getParallelizationModeDisplay() }}</span>\n                </div>\n                <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                  <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                  <span style=\"color: #6c757d;\">Output:</span>\n                  <span [style.color]=\"getValidationColor()\" style=\"font-weight: 500;\">{{ getOutputTypeDisplay() }}</span>\n                </div>\n                @if (record.EnableCaching) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-database\" style=\"color: #28a745;\"></i>\n                    <span style=\"color: #28a745; font-weight: 500;\">Caching Enabled</span>\n                  </div>\n                }\n                @if (record.EffortLevel) {\n                  <div class=\"config-item\" style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-tachometer-alt\" style=\"color: #6c757d;\"></i>\n                    <span style=\"color: #6c757d;\">Effort Level:</span>\n                    <span style=\"color: #495057; font-weight: 500;\">{{ record.EffortLevel }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            <!-- Right: Action Buttons -->\n            <div class=\"action-buttons\" style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n              <div style=\"display: flex; gap: 8px;\">\n                @if (record.ID) {\n                  <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\"\n                    (click)=\"openTestHarness()\"\n                    title=\"Run AI Prompt Test Harness\">\n                    <i class=\"fa-solid fa-play\"></i> Run\n                  </button>\n                }\n              </div>\n              @if (!canExecute && record.ID) {\n                <div style=\"font-size: 0.75em; color: #dc3545; text-align: right; max-width: 200px;\">\n                  @if (record.Status !== 'Active') {\n                    \u2022 Prompt must be Active<br>\n                  }\n                  @if (!record.TemplateID) {\n                    \u2022 Template is required<br>\n                  }\n                  @if (!template && record.TemplateID) {\n                    \u2022 Template not found<br>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Configuration Sections with Expansion Panels -->\n        <div class=\"configuration-sections\" style=\"flex: 1; background: white; border-top: 2px solid #e9ecef; padding: 16px; min-height: 0;\">\n          <!-- Template Editor Section -->\n          <kendo-expansionpanel\n            [expanded]=\"true\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                Template Editor\n                @if (template) {\n                  <span style=\"color: #6c757d; font-size: 0.9em; font-weight: normal;\">\u2022 {{ template.Name }}</span>\n                }\n              </span>\n            </ng-template>\n            <!-- Direct Content Projection -->\n            <div class=\"template-section\" style=\"display: flex; flex-direction: column; min-height: 400px; padding: 8px;\">\n              @if (isLoadingTemplate) {\n                <div class=\"loading-state\" style=\"flex: 1; display: flex; align-items: center; justify-content: center; color: #6c757d;\">\n                  <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 24px; margin-right: 12px;\"></i>\n                  Loading template...\n                </div>\n              } @else if (!record.TemplateID) {\n                <div class=\"no-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #6c757d;\">\n                  <i class=\"fa-solid fa-code\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.3;\"></i>\n                  <h5 style=\"margin-bottom: 12px; color: #495057;\">No Template Associated</h5>\n                  <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n                    This AI prompt needs a template to define its structure and parameters.\n                    Create a new template or link to an existing one.\n                  </p>\n                  <div style=\"display: flex; gap: 12px;\">\n                    @if (UserCanCreateTemplates) {\n                      <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n                        <i class=\"fa-solid fa-plus\"></i> Create New Template\n                      </button>\n                    }\n                    @if (UserCanReadTemplates) {\n                      <button kendoButton [fillMode]=\"'outline'\" (click)=\"linkExistingTemplate()\">\n                        <i class=\"fa-solid fa-link\"></i> Link Existing Template\n                      </button>\n                    }\n                  </div>\n                </div>\n              } @else if (templateNotFoundInDatabase) {\n                <div class=\"invalid-template-state\" style=\"flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px; color: #dc3545;\">\n                  <i class=\"fa-solid fa-exclamation-triangle\" style=\"font-size: 64px; margin-bottom: 20px; opacity: 0.7;\"></i>\n                  <h5 style=\"margin-bottom: 12px;\">Template Not Found</h5>\n                  <p style=\"margin-bottom: 24px; text-align: center; max-width: 400px;\">\n                    The referenced template could not be loaded. It may have been deleted or moved.\n                  </p>\n                  <div style=\"display: flex; gap: 12px;\">\n                    <button kendoButton [fillMode]=\"'outline'\" (click)=\"loadTemplate()\">\n                      <i class=\"fa-solid fa-refresh\"></i> Retry Loading\n                    </button>\n                    @if (UserCanCreateTemplates) {\n                      <button kendoButton [themeColor]=\"'primary'\" (click)=\"createNewTemplate()\">\n                        <i class=\"fa-solid fa-plus\"></i> Create New Template\n                      </button>\n                    }\n                  </div>\n                </div>\n              } @else {\n                <!-- Active Template Editor -->\n                <div class=\"template-editor-container\" style=\"flex: 1; display: flex; flex-direction: column; min-height: 350px;\">\n                  <!-- Template Actions Bar -->\n                  @if (template && EditMode) {\n                    <div class=\"template-actions\" style=\"display: flex; gap: 8px; padding: 8px; border-bottom: 1px solid #e9ecef; background: #f8f9fa;\">\n                      @if (UserCanUpdateTemplates) {\n                        <button kendoButton\n                          [fillMode]=\"'outline'\"\n                          [size]=\"'small'\"\n                          (click)=\"linkExistingTemplate()\"\n                          title=\"Change to a different template\">\n                          <i class=\"fa-solid fa-exchange-alt\"></i> Change Template\n                        </button>\n                      }\n                      @if (UserCanReadTemplates) {\n                        <button kendoButton\n                          [fillMode]=\"'outline'\"\n                          [size]=\"'small'\"\n                          (click)=\"openTemplateInNewWindow()\"\n                          title=\"Open template in new window\">\n                          <i class=\"fa-solid fa-external-link-alt\"></i> Open in New Window\n                        </button>\n                      }\n                    </div>\n                  }\n                  <!-- Template Editor -->\n                  <div style=\"flex: 1; background: white; border-radius: 6px; border: 1px solid #e9ecef;\">\n                    <mj-template-editor\n                      #templateEditor\n                      [template]=\"template\"\n                      [config]=\"templateEditorConfig\"\n                      (contentChange)=\"onTemplateContentChange($event)\"\n                      (runTemplate)=\"onTemplateRun($event)\"\n                      style=\"display: block; min-height: 300px;\">\n                    </mj-template-editor>\n                  </div>\n                </div>\n              }\n            </div>\n          </kendo-expansionpanel>\n          <!-- Model Configuration Expansion Panel -->\n          @if (record.IsSaved) {\n            <kendo-expansionpanel\n              [expanded]=\"true\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n                  Models\n                  @if (promptModels.length > 0) {\n                    <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                      {{ promptModels.length }}\n                    </span>\n                  }\n                  <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n                    <i class=\"fa-solid fa-info-circle\" title=\"Models are tried in order from top to bottom. The first available model will be used.\"></i>\n                    Priority order (first available model will be used)\n                  </span>\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <!-- Model Management Interface -->\n                <div class=\"model-management\" style=\"border: 1px solid #dee2e6; border-radius: 6px; background: #f8f9fa;\">\n                  @if (isLoadingModels) {\n                    <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                      <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading models...\n                    </div>\n                  } @else {\n                    @if (promptModels.length === 0) {\n                      <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                        <i class=\"fa-solid fa-info-circle\"></i> No models configured\n                        @if (EditMode && UserCanCreatePromptModels) {\n                          <div style=\"margin-top: 10px;\">\n                            <button kendoButton fillMode=\"outline\" themeColor=\"primary\" size=\"small\"\n                              (click)=\"addNewModel()\">\n                              <i class=\"fa-solid fa-plus\"></i> Add Model\n                            </button>\n                          </div>\n                        }\n                      </div>\n                    } @else {\n                      <!-- Priority explanation for multiple models -->\n                      @if (promptModels.length > 1) {\n                        <div style=\"padding: 12px 16px; background: #e3f2fd; border-bottom: 1px solid #bbdefb; color: #1565c0; font-size: 0.85em;\">\n                          <i class=\"fa-solid fa-info-circle\" style=\"margin-right: 6px;\"></i>\n                          Models are tried in priority order (highest priority first). The first available model that meets requirements will be used for execution.\n                        </div>\n                      }\n                      <!-- Column Headers -->\n                      <div class=\"model-header\" style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; background: #e9ecef; font-weight: 600; font-size: 0.85em; color: #495057; border-bottom: 1px solid #dee2e6;\">\n                        <div title=\"Priority order - models are tried from top to bottom\">\n                          <i class=\"fa-solid fa-sort\" style=\"color: #6c757d;\"></i>\n                        </div>\n                        <div>AI Model <span style=\"color: #dc3545;\">*</span></div>\n                        <div>Vendor</div>\n                        <div>Configuration</div>\n                        <div>Created</div>\n                        <div>Actions</div>\n                      </div>\n                      @for (model of promptModels; track getModelTrackId(model) || $index; let i = $index) {\n                        <div class=\"model-row\"\n                          [draggable]=\"EditMode\"\n                          (dragstart)=\"onDragStart($event, i)\"\n                          (dragover)=\"onDragOver($event)\"\n                          (drop)=\"onDrop($event, i)\"\n                          (dragend)=\"onDragEnd($event)\"\n                          [style.background]=\"!model.ModelID ? '#fff3cd' : (draggedIndex === i ? '#e3f2fd' : 'white')\"\n                          [style.border-left]=\"!model.ModelID ? '3px solid #ffc107' : 'none'\"\n                          [style.opacity]=\"draggedIndex === i ? '0.5' : '1'\"\n                          style=\"display: grid; grid-template-columns: 40px 2fr 1fr 1fr 1fr 60px; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #e9ecef; align-items: start; transition: background 0.2s, opacity 0.2s;\">\n                          <!-- Drag Handle / Priority -->\n                          <div class=\"drag-handle\" style=\"display: flex; flex-direction: column; align-items: center; justify-content: center; color: #6c757d;\">\n                            @if (EditMode) {\n                              <i class=\"fa-solid fa-grip-vertical\" title=\"Drag to reorder priority\" style=\"cursor: move;\"></i>\n                              <span style=\"font-size: 0.7em; margin-top: 2px;\">#{{ i + 1 }}</span>\n                            } @else {\n                              <span style=\"font-size: 0.9em; font-weight: 600;\" title=\"Priority {{ model.Priority }} - Higher priority numbers are tried first\">#{{ i + 1 }}</span>\n                            }\n                          </div>\n                          <!-- Model Selection -->\n                          <div class=\"model-select\">\n                            @if (EditMode) {\n                              <kendo-dropdownlist [(ngModel)]=\"model.ModelID\"\n                                [name]=\"'modelId_' + getModelTrackId(model)\"\n                                [data]=\"availableModels\"\n                                textField=\"Name\"\n                                valueField=\"ID\"\n                                [valuePrimitive]=\"true\"\n                                [filterable]=\"true\"\n                                placeholder=\"Select a model...\"\n                                (valueChange)=\"onModelChange($event, i)\"\n                                style=\"width: 100%;\">\n                              </kendo-dropdownlist>\n                            } @else {\n                              <span style=\"font-weight: 500;\">{{ getModelDisplayName(model.ModelID) }}</span>\n                            }\n                          </div>\n                          <!-- Vendor -->\n                          <div class=\"model-vendor\">\n                            @if (EditMode) {\n                              @if (model.ModelID) {\n                                @if (shouldShowVendorDropdown(model.ModelID)) {\n                                  <kendo-dropdownlist [(ngModel)]=\"model.VendorID\"\n                                    [name]=\"'vendorId_' + getModelTrackId(model)\"\n                                    [data]=\"getVendorsForModelSync(model.ModelID)\"\n                                    textField=\"Name\"\n                                    valueField=\"ID\"\n                                    [valuePrimitive]=\"true\"\n                                    [filterable]=\"true\"\n                                    placeholder=\"Select vendor...\"\n                                    style=\"width: 100%;\">\n                                    <ng-template kendoDropDownListItemTemplate let-dataItem>\n                                      <span [style.color]=\"getVendorStatusColor(model.ModelID, dataItem.ID)\">\n                                        {{ dataItem.Name }}\n                                        @if (getModelVendorStatus(model.ModelID, dataItem.ID) !== 'Active') {\n                                          <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, dataItem.ID) }})</span>\n                                        }\n                                      </span>\n                                    </ng-template>\n                                  </kendo-dropdownlist>\n                                } @else {\n                                  <!-- Single vendor - just show the name -->\n                                  @if (getVendorsForModelSync(model.ModelID).length === 1) {\n                                    <span [style.color]=\"getVendorStatusColor(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID)\" style=\"font-size: 0.9em; font-weight: 500;\">\n                                      {{ getVendorsForModelSync(model.ModelID)[0].Name }}\n                                      @if (getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) !== 'Active') {\n                                        <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, getVendorsForModelSync(model.ModelID)[0].ID) }})</span>\n                                      }\n                                    </span>\n                                  } @else {\n                                    <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">No vendors available</span>\n                                  }\n                                }\n                              } @else {\n                                <span style=\"color: #6c757d; font-style: italic; font-size: 0.9em;\">Select model first</span>\n                              }\n                            } @else {\n                              @if (model.VendorID && model.ModelID) {\n                                <span [style.color]=\"getVendorStatusColor(model.ModelID, model.VendorID)\" style=\"font-size: 0.9em;\">\n                                  {{ getVendorDisplayName(model.VendorID) }}\n                                  @if (getModelVendorStatus(model.ModelID, model.VendorID) !== 'Active') {\n                                    <span style=\"font-size: 0.8em; margin-left: 4px;\">({{ getModelVendorStatus(model.ModelID, model.VendorID) }})</span>\n                                  }\n                                </span>\n                              } @else {\n                                <span style=\"color: #6c757d; font-size: 0.9em;\">-</span>\n                              }\n                            }\n                          </div>\n                          <!-- Configuration -->\n                          <div class=\"model-configuration\">\n                            @if (EditMode) {\n                              @if (isLoadingConfigurations) {\n                                <div style=\"padding: 4px; color: #6c757d; font-style: italic; font-size: 0.85em;\">\n                                  <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading...\n                                </div>\n                              } @else {\n                                <kendo-dropdownlist [(ngModel)]=\"model.ConfigurationID\"\n                                  [name]=\"'configurationId_' + getModelTrackId(model)\"\n                                  [data]=\"availableConfigurations\"\n                                  textField=\"Name\"\n                                  valueField=\"ID\"\n                                  [valuePrimitive]=\"true\"\n                                  [filterable]=\"true\"\n                                  placeholder=\"Default\"\n                                  (valueChange)=\"onConfigurationChange($event, i)\"\n                                  style=\"width: 100%;\">\n                                  <ng-template kendoDropDownListNoDataTemplate>\n                                    <div style=\"padding: 8px; text-align: center; color: #6c757d;\">\n                                      No configurations available\n                                    </div>\n                                  </ng-template>\n                                </kendo-dropdownlist>\n                              }\n                            } @else {\n                              <span style=\"font-size: 0.9em;\">{{ getConfigurationDisplayName(model.ConfigurationID) }}</span>\n                            }\n                          </div>\n                          <!-- Created Date -->\n                          <div class=\"model-created\">\n                            @if (model.ID) {\n                              <span style=\"color: #6c757d; font-size: 0.8em;\">{{ model.__mj_CreatedAt | date:'short' }}</span>\n                            } @else {\n                              <span style=\"color: #28a745; font-size: 0.8em; font-style: italic;\">New</span>\n                            }\n                          </div>\n                          <!-- Actions -->\n                          <div class=\"model-actions\" style=\"display: flex; gap: 2px; flex-direction: column;\">\n                            @if (EditMode) {\n                              <div style=\"display: flex; gap: 2px; margin-bottom: 4px;\">\n                                @if (UserCanUpdatePromptModels) {\n                                  <button kendoButton fillMode=\"flat\" size=\"small\"\n                                    (click)=\"moveModelUp(i)\"\n                                    [disabled]=\"i === 0\"\n                                    title=\"Move up\">\n                                    <i class=\"fa-solid fa-chevron-up\"></i>\n                                  </button>\n                                  <button kendoButton fillMode=\"flat\" size=\"small\"\n                                    (click)=\"moveModelDown(i)\"\n                                    [disabled]=\"i === promptModels.length - 1\"\n                                    title=\"Move down\">\n                                    <i class=\"fa-solid fa-chevron-down\"></i>\n                                  </button>\n                                }\n                              </div>\n                              @if (UserCanDeletePromptModels) {\n                                <button kendoButton fillMode=\"flat\" themeColor=\"error\" size=\"small\"\n                                  (click)=\"removePromptModel(i)\"\n                                  title=\"Remove model\">\n                                  <i class=\"fa-solid fa-times\"></i>\n                                </button>\n                              }\n                            }\n                          </div>\n                        </div>\n                        <!-- Second row with additional details -->\n                        <div style=\"display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 8px 16px; border-bottom: 1px solid #e9ecef; background: #f8f9fa; font-size: 0.85em; color: #6c757d;\">\n                          <div></div>\n                          <div>\n                            <!-- Basic model details -->\n                            <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center; margin-bottom: 8px;\">\n                              @if (model.Status) {\n                                <span><strong>Status:</strong> {{ model.Status }}</span>\n                              }\n                            </div>\n                            <!-- Parallel execution fields when prompt is ModelSpecific -->\n                            @if (record.ParallelizationMode === 'ModelSpecific') {\n                              <div style=\"padding: 8px; background: #fff; border: 1px solid #dee2e6; border-radius: 4px; margin-top: 8px;\">\n                                <div style=\"margin-bottom: 6px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                                  <i class=\"fa-solid fa-layer-group\"></i> Model-Specific Parallel Execution\n                                </div>\n                                @if (EditMode) {\n                                  <div style=\"display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; align-items: center;\">\n                                    <!-- Parallel Mode -->\n                                    <div>\n                                      <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Mode</label>\n                                      <kendo-dropdownlist [(ngModel)]=\"model.ParallelizationMode\"\n                                        [name]=\"'parallelMode_' + i\"\n                                        [data]=\"[{text: 'None', value: 'None'}, {text: 'Static Count', value: 'StaticCount'}, {text: 'Config Param', value: 'ConfigParam'}]\"\n                                        textField=\"text\"\n                                        valueField=\"value\"\n                                        [valuePrimitive]=\"true\"\n                                        placeholder=\"Select mode...\"\n                                        style=\"width: 100%; font-size: 0.85em;\">\n                                      </kendo-dropdownlist>\n                                    </div>\n                                    <!-- Parallel Count (when StaticCount) -->\n                                    @if (model.ParallelizationMode === 'StaticCount') {\n                                      <div>\n                                        <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Parallel Count</label>\n                                        <kendo-numerictextbox [(ngModel)]=\"model.ParallelCount\"\n                                          [name]=\"'parallelCount_' + i\"\n                                          [min]=\"1\"\n                                          [step]=\"1\"\n                                          [format]=\"'n0'\"\n                                          placeholder=\"Count...\"\n                                          style=\"width: 100%; font-size: 0.85em;\">\n                                        </kendo-numerictextbox>\n                                      </div>\n                                    }\n                                    <!-- Config Param (when ConfigParam) -->\n                                    @if (model.ParallelizationMode === 'ConfigParam') {\n                                      <div>\n                                        <label style=\"display: block; margin-bottom: 2px; font-size: 0.8em; font-weight: 600; color: #495057;\">Config Parameter</label>\n                                        <kendo-textbox [(ngModel)]=\"model.ParallelConfigParam\"\n                                          [name]=\"'parallelConfigParam_' + i\"\n                                          placeholder=\"Parameter name...\"\n                                          style=\"width: 100%; font-size: 0.85em;\">\n                                        </kendo-textbox>\n                                      </div>\n                                    }\n                                  </div>\n                                } @else {\n                                  <!-- Read-only display -->\n                                  <div style=\"display: flex; gap: 16px; flex-wrap: wrap; align-items: center;\">\n                                    @if (model.ParallelizationMode) {\n                                      <span><strong>Parallel Mode:</strong> {{ model.ParallelizationMode }}</span>\n                                    }\n                                    @if (model.ParallelCount) {\n                                      <span><strong>Parallel Count:</strong> {{ model.ParallelCount }}</span>\n                                    }\n                                    @if (model.ParallelConfigParam) {\n                                      <span><strong>Config Param:</strong> {{ model.ParallelConfigParam }}</span>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (EditMode && UserCanCreatePromptModels) {\n                        <div class=\"add-model-row\" style=\"padding: 12px 16px; text-align: center; background: #f8f9fa; border-top: 1px solid #dee2e6;\">\n                          <button kendoButton fillMode=\"outline\" themeColor=\"success\" size=\"small\"\n                            (click)=\"addNewModel()\">\n                            <i class=\"fa-solid fa-plus\"></i> Add Model\n                          </button>\n                        </div>\n                      }\n                    }\n                  }\n                </div>\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Advanced Configuration Expansion Panel -->\n          <kendo-expansionpanel\n            [expanded]=\"false\"\n            style=\"margin-bottom: 12px;\">\n            <ng-template kendoExpansionPanelTitleDirective>\n              <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                <i class=\"fa-solid fa-cogs\" style=\"color: #6c757d;\"></i>\n                Advanced Configuration\n              </span>\n            </ng-template>\n            <!-- Direct Content Projection -->\n            <div style=\"padding: 16px 0;\">\n              <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                <!-- Left Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"ParallelizationMode\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  @if (showParallelCount) {\n                    <mj-form-field\n                      [Record]=\"record\"\n                      [ShowLabel]=\"true\"\n                      FieldName=\"ParallelCount\"\n                      Type=\"numerictextbox\"\n                      [EditMode]=\"EditMode\">\n                    </mj-form-field>\n                  }\n                  @if (showParallelConfigParam) {\n                    <mj-form-field\n                      [Record]=\"record\"\n                      [ShowLabel]=\"true\"\n                      FieldName=\"ParallelConfigParam\"\n                      Type=\"textbox\"\n                      [EditMode]=\"EditMode\">\n                    </mj-form-field>\n                  }\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"OutputType\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"EffortLevel\"\n                    Type=\"numerictextbox\"\n                    Caption=\"Effort Level (1-100)\"\n                    Description=\"Higher values request more thorough reasoning\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                </div>\n                <!-- Right Column -->\n                <div>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"ValidationBehavior\"\n                    Type=\"dropdownlist\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <mj-form-field\n                    [Record]=\"record\"\n                    [ShowLabel]=\"true\"\n                    FieldName=\"EnableCaching\"\n                    Type=\"checkbox\"\n                    [EditMode]=\"EditMode\">\n                  </mj-form-field>\n                  <!-- Result Selector Prompt with Tree Selector -->\n                  <div style=\"margin-bottom: 16px;\">\n                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">\n                      Result Selector Prompt\n                    </label>\n                    @if (EditMode) {\n                      @if (isLoadingResultSelectorData) {\n                        <div style=\"padding: 8px; color: #6c757d; font-style: italic;\">\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading prompts...\n                        </div>\n                      } @else {\n                        <kendo-dropdowntree\n                          [(ngModel)]=\"record.ResultSelectorPromptID\"\n                          name=\"resultSelectorPromptID\"\n                          [data]=\"resultSelectorTreeData\"\n                          textField=\"text\"\n                          valueField=\"value\"\n                          [valuePrimitive]=\"true\"\n                          [filterable]=\"true\"\n                          placeholder=\"Select a result selector prompt...\"\n                          style=\"width: 100%;\"\n                          (valueChange)=\"onResultSelectorChange($event)\">\n                        </kendo-dropdowntree>\n                      }\n                    } @else {\n                      <span style=\"color: #495057;\">{{ getPromptDisplayName(record.ResultSelectorPromptID || '') || 'None selected' }}</span>\n                    }\n                  </div>\n                </div>\n              </div>\n            </div>\n          </kendo-expansionpanel>\n          <!-- Template Parameters Expansion Panel -->\n          @if (template && templateParams.length > 0) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-sliders\" style=\"color: #6c757d;\"></i>\n                  Template Parameters\n                  <span class=\"badge\" style=\"background: #6f42c1; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                    {{ templateParams.length }}\n                  </span>\n                  <span style=\"color: #6c757d; font-size: 0.8em; font-weight: normal; margin-left: 8px;\">\n                    <i class=\"fa-solid fa-info-circle\" title=\"These parameters are defined in the template and will be available when executing this prompt\"></i>\n                    Parameters defined in the template\n                  </span>\n                </span>\n              </ng-template>\n              <!-- Template Parameters Display -->\n              <div style=\"padding: 16px 0;\">\n                @if (isLoadingTemplateParams) {\n                  <div class=\"loading-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i> Loading template parameters...\n                  </div>\n                } @else if (templateParams.length === 0) {\n                  <div class=\"empty-state\" style=\"padding: 20px; text-align: center; color: #6c757d;\">\n                    <i class=\"fa-solid fa-info-circle\"></i> This template has no parameters defined\n                  </div>\n                } @else {\n                  <!-- Parameters Grid -->\n                  <div style=\"display: grid; gap: 12px;\">\n                    @for (param of templateParams; track param.ID) {\n                      <div class=\"parameter-card\"\n                        style=\"border: 1px solid #e9ecef; border-radius: 8px; padding: 16px; background: #f8f9fa; transition: all 0.2s;\"\n                        [style.border-left]=\"'4px solid ' + getParamTypeColor(param.Type)\">\n                        <!-- Parameter Header -->\n                        <div style=\"display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px;\">\n                          <div style=\"display: flex; align-items: center; gap: 8px;\">\n                            <i [class]=\"'fa-solid ' + getParamTypeIcon(param.Type)\"\n                              [style.color]=\"getParamTypeColor(param.Type)\"\n                            style=\"font-size: 1.2em;\"></i>\n                            <h6 style=\"margin: 0; color: #495057; font-weight: 600;\">\n                              {{ param.Name }}\n                              @if (param.IsRequired) {\n                                <span style=\"color: #dc3545; font-size: 0.9em; margin-left: 4px;\">*</span>\n                              }\n                            </h6>\n                          </div>\n                          <div style=\"display: flex; align-items: center; gap: 8px;\">\n                            <span class=\"type-badge\"\n                              [style.background-color]=\"getParamTypeColor(param.Type)\"\n                              style=\"color: white; padding: 4px 8px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                              {{ param.Type }}\n                            </span>\n                            @if (param.IsRequired) {\n                              <span style=\"color: #dc3545; font-size: 0.85em; font-weight: 500;\">Required</span>\n                            } @else {\n                              <span style=\"color: #6c757d; font-size: 0.85em;\">Optional</span>\n                            }\n                          </div>\n                        </div>\n                        <!-- Parameter Description -->\n                        @if (param.Description) {\n                          <p style=\"margin: 0 0 8px 0; color: #6c757d; font-size: 0.9em; line-height: 1.4;\">\n                            {{ param.Description }}\n                          </p>\n                        }\n                        <!-- Type-specific Information -->\n                        <div style=\"font-size: 0.85em; color: #495057;\">\n                          <span style=\"display: flex; align-items: center; gap: 4px; margin-bottom: 4px;\">\n                            <i class=\"fa-solid fa-info-circle\" style=\"color: #6c757d;\"></i>\n                            {{ getParamTypeDescription(param) }}\n                          </span>\n                        </div>\n                        <!-- Additional Parameter Details -->\n                        <div style=\"display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;\">\n                          @if (param.DefaultValue) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Default Value</label>\n                              <code style=\"font-size: 0.85em; color: #495057; word-break: break-all;\">{{ param.DefaultValue }}</code>\n                            </div>\n                          }\n                          @if (param.EntityID) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Entity</label>\n                              <span style=\"font-size: 0.85em; color: #495057;\">{{ param.Entity || 'Entity ID: ' + param.EntityID }}</span>\n                            </div>\n                          }\n                          @if (param.LinkedParameterName) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Linked To</label>\n                              <span style=\"font-size: 0.85em; color: #495057;\">\n                                {{ param.LinkedParameterName }}\n                                @if (param.LinkedParameterField) {\n                                  ({{ param.LinkedParameterField }})\n                                }\n                              </span>\n                            </div>\n                          }\n                          @if (param.ExtraFilter) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Filter</label>\n                              <code style=\"font-size: 0.8em; color: #495057; word-break: break-all;\">{{ param.ExtraFilter }}</code>\n                            </div>\n                          }\n                          @if (param.RecordID) {\n                            <div style=\"background: white; padding: 8px 12px; border-radius: 4px; border: 1px solid #dee2e6;\">\n                              <label style=\"display: block; font-size: 0.8em; color: #6c757d; margin-bottom: 2px;\">Record ID</label>\n                              <code style=\"font-size: 0.85em; color: #495057;\">{{ param.RecordID }}</code>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Help Text -->\n                  <div style=\"margin-top: 16px; padding: 12px; background: #e3f2fd; border-radius: 6px; border: 1px solid #bbdefb;\">\n                    <div style=\"display: flex; align-items: flex-start; gap: 8px;\">\n                      <i class=\"fa-solid fa-lightbulb\" style=\"color: #1976d2; margin-top: 2px;\"></i>\n                      <div style=\"flex: 1; font-size: 0.85em; color: #1565c0; line-height: 1.5;\">\n                        <strong>Using Template Parameters:</strong> When executing this prompt, you'll be prompted to provide values for all required parameters.\n                        Parameters can be simple values (text, numbers) or complex data structures (JSON objects, database records, or entire entity collections).\n                        The template will use these parameters to generate dynamic content based on the values provided at execution time.\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Output Example Expansion Panel (when OutputType = object) -->\n          @if (showOutputExample) {\n            <kendo-expansionpanel\n              [expanded]=\"true\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-code\" style=\"color: #6c757d;\"></i>\n                  Output Example (JSON)\n                  <span style=\"color: #dc3545; font-size: 0.8em; font-weight: normal;\">\u2022 Required for object output type</span>\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px;\">\n                @if (EditMode) {\n                  <mj-code-editor\n                    [(ngModel)]=\"record.OutputExample\"\n                    name=\"outputExample\"\n                    language=\"json\"\n                    placeholder=\"Enter JSON example structure...\"\n                    style=\"width: 100%; height: 200px; border: 1px solid #dee2e6; border-radius: 4px;\">\n                  </mj-code-editor>\n                  <div style=\"margin-top: 8px; color: #6c757d; font-size: 0.85em;\">\n                    <i class=\"fa-solid fa-info-circle\"></i> Provide a JSON example that defines the expected structure for object output validation.\n                  </div>\n                } @else if (record.OutputExample) {\n                  <div style=\"background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 4px; padding: 12px; font-family: 'Courier New', monospace; font-size: 0.9em; white-space: pre-wrap; overflow: auto; max-height: 250px;\">{{ record.OutputExample }}</div>\n                } @else {\n                  <div style=\"background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 4px; padding: 12px; color: #856404; text-align: center;\">\n                    <i class=\"fa-solid fa-exclamation-triangle\"></i> Output example is required when output type is 'object'\n                  </div>\n                }\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Execution History Expansion Panel -->\n          @if (record.IsSaved) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-history\" style=\"color: #6c757d;\"></i>\n                  Execution History\n                  @if (executionHistory.length > 0) {\n                    <span style=\"color: #6c757d; font-weight: normal;\">({{ executionHistory.length }})</span>\n                  }\n                </span>\n              </ng-template>\n              <!-- Custom Execution History Viewer -->\n              <div style=\"padding: 16px;\">\n                @if (isLoadingHistory) {\n                  <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n                    <i class=\"fa-solid fa-spinner fa-spin\" style=\"font-size: 2em; margin-bottom: 12px;\"></i>\n                    <p>Loading execution history...</p>\n                  </div>\n                } @else if (executionHistory.length === 0) {\n                  <div style=\"text-align: center; padding: 40px; color: #6c757d;\">\n                    <i class=\"fa-solid fa-history\" style=\"font-size: 3em; margin-bottom: 12px; opacity: 0.3;\"></i>\n                    <p>No execution history yet</p>\n                    <p style=\"font-size: 0.9em;\">Run this prompt to see execution history here</p>\n                  </div>\n                } @else {\n                  <!-- Sort Controls -->\n                  <div style=\"display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;\">\n                    <div style=\"color: #6c757d; font-size: 0.9em;\">\n                      Showing {{ executionHistory.length }} executions\n                    </div>\n                    <div style=\"display: flex; gap: 8px; align-items: center;\">\n                      <span style=\"color: #6c757d; font-size: 0.85em;\">Sort by:</span>\n                      <kendo-buttongroup selection=\"single\">\n                        <button kendoButton\n                          [selected]=\"historySortField === 'runAt'\"\n                          (click)=\"changeHistorySort('runAt')\"\n                          size=\"small\">\n                          Date\n                          @if (historySortField === 'runAt') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button kendoButton\n                          [selected]=\"historySortField === 'executionTime'\"\n                          (click)=\"changeHistorySort('executionTime')\"\n                          size=\"small\">\n                          Duration\n                          @if (historySortField === 'executionTime') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button kendoButton\n                          [selected]=\"historySortField === 'tokens'\"\n                          (click)=\"changeHistorySort('tokens')\"\n                          size=\"small\">\n                          Tokens\n                          @if (historySortField === 'tokens') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                        <button kendoButton\n                          [selected]=\"historySortField === 'cost'\"\n                          (click)=\"changeHistorySort('cost')\"\n                          size=\"small\">\n                          Cost\n                          @if (historySortField === 'cost') {\n                            <i [class]=\"'fa-solid fa-sort-' + (historySortDirection === 'asc' ? 'up' : 'down')\"\n                            style=\"margin-left: 4px; font-size: 0.8em;\"></i>\n                          }\n                        </button>\n                      </kendo-buttongroup>\n                    </div>\n                  </div>\n                  <!-- Execution History Table -->\n                  <div style=\"border: 1px solid #e9ecef; border-radius: 8px; overflow: hidden;\">\n                    <table style=\"width: 100%; border-collapse: collapse;\">\n                      <thead>\n                        <tr style=\"background: #f8f9fa; border-bottom: 2px solid #e9ecef;\">\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Status</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Date & Time</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Model</th>\n                          <th style=\"padding: 12px; text-align: left; font-weight: 600; color: #495057;\">Duration</th>\n                          <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Tokens</th>\n                          <th style=\"padding: 12px; text-align: right; font-weight: 600; color: #495057;\">Cost</th>\n                          <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Type</th>\n                          <th style=\"padding: 12px; text-align: center; font-weight: 600; color: #495057;\">Actions</th>\n                        </tr>\n                      </thead>\n                      <tbody>\n                        @for (run of executionHistory; track run.ID; let i = $index) {\n                          <tr class=\"history-row\"\n                            [class.even-row]=\"i % 2 === 0\"\n                            style=\"border-bottom: 1px solid #f1f3f5;\">\n                            <td style=\"padding: 12px;\">\n                              <span style=\"display: flex; align-items: center; gap: 6px;\">\n                                <i [class]=\"'fa-solid ' + getExecutionStatusIcon(run.Success)\"\n                                [style.color]=\"getExecutionStatusColor(run.Success)\"></i>\n                                <span [style.color]=\"getExecutionStatusColor(run.Success)\" style=\"font-weight: 500;\">\n                                  {{ run.Success === true ? 'Success' : run.Success === false ? 'Failed' : 'Running' }}\n                                </span>\n                              </span>\n                            </td>\n                            <td style=\"padding: 12px; color: #495057;\">\n                              {{ run.RunAt | date:'short' }}\n                            </td>\n                            <td style=\"padding: 12px; color: #495057;\">\n                              <span style=\"display: flex; align-items: center; gap: 6px;\">\n                                <i class=\"fa-solid fa-microchip\" style=\"color: #6c757d;\"></i>\n                                {{ run.Model || 'Unknown' }}\n                              </span>\n                            </td>\n                            <td style=\"padding: 12px; color: #495057;\">\n                              {{ formatDuration(run.ExecutionTimeMS) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: right; color: #495057;\">\n                              {{ formatTokens(run.TokensUsed) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: right; color: #495057;\">\n                              {{ formatCost(run.TotalCost || run.Cost) }}\n                            </td>\n                            <td style=\"padding: 12px; text-align: center;\">\n                              @if (run.RunType) {\n                                                            <span style=\"padding: 4px 8px; border-radius: 12px; background: #e9ecef; \n                                                                       color: #495057; font-size: 0.85em; font-weight: 500;\">\n                                  {{ run.RunType }}\n                                </span>\n                              }\n                            </td>\n                            <td style=\"padding: 12px; text-align: center;\">\n                              <button kendoButton\n                                fillMode=\"flat\"\n                                size=\"small\"\n                                (click)=\"navigateToPromptRun(run.ID)\"\n                                title=\"View details\">\n                                <i class=\"fa-solid fa-external-link\"></i>\n                              </button>\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                    </table>\n                  </div>\n                }\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Cache Expansion Panel -->\n          @if (record.IsSaved && record.EnableCaching) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-database\" style=\"color: #6c757d;\"></i>\n                  Result Cache\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <mj-explorer-entity-data-grid\n                  [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Result Cache','AIPromptID')\"\n                  [NewRecordValues]=\"NewRecordValues('MJ: AI Result Cache')\"\n                  [AllowLoad]=\"true\"\n                  [ShowToolbar]=\"false\">\n                </mj-explorer-entity-data-grid>\n              </div>\n            </kendo-expansionpanel>\n          }\n          <!-- Related Items Expansion Panel -->\n          @if (record.IsSaved) {\n            <kendo-expansionpanel\n              [expanded]=\"false\"\n              style=\"margin-bottom: 12px;\">\n              <ng-template kendoExpansionPanelTitleDirective>\n                <span style=\"display: flex; align-items: center; gap: 8px; font-weight: 600;\">\n                  <i class=\"fa-solid fa-link\" style=\"color: #6c757d;\"></i>\n                  Related Items\n                </span>\n              </ng-template>\n              <!-- Direct Content Projection -->\n              <div style=\"padding: 16px 0;\">\n                <div style=\"display: grid; grid-template-columns: 1fr 1fr; gap: 20px;\">\n                  <!-- AI Agents -->\n                  <div>\n                    <h6 style=\"margin: 0 0 12px 0; color: #495057;\">AI Agents Using This Prompt</h6>\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Agent Prompts','PromptID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: AI Agent Prompts')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  </div>\n                  <!-- Result Selector References -->\n                  <div>\n                    <h6 style=\"margin: 0 0 12px 0; color: #495057;\">Prompts Using This as Result Selector</h6>\n                    <mj-explorer-entity-data-grid\n                      [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: AI Prompts','ResultSelectorPromptID')\"\n                      [NewRecordValues]=\"NewRecordValues('MJ: AI Prompts')\"\n                      [AllowLoad]=\"true\"\n                      [ShowToolbar]=\"false\">\n                    </mj-explorer-entity-data-grid>\n                  </div>\n                </div>\n              </div>\n            </kendo-expansionpanel>\n          }\n        </div>\n      </div>\n    </form>\n  }\n\n\n  <!-- AI Prompt Test Harness -->\n  @if (showTestHarness) {\n    <kendo-window\n      [width]=\"1200\"\n      [height]=\"800\"\n      [minWidth]=\"800\"\n      [minHeight]=\"600\"\n      [draggable]=\"true\"\n      [resizable]=\"true\"\n      [state]=\"'default'\"\n      (close)=\"onTestHarnessVisibilityChanged(false)\"\n      title=\"Run AI Prompt - {{ record.Name || 'Untitled' }}\">\n      <mj-ai-test-harness\n        [entity]=\"record\"\n        [mode]=\"'prompt'\"\n        [isVisible]=\"showTestHarness\"\n        (visibilityChange)=\"onTestHarnessVisibilityChanged($event)\">\n      </mj-ai-test-harness>\n    </kendo-window>\n  }\n</div>", styles: [".record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    padding: 10px;\n}\n\n.custom-toolbar-actions {\n    margin-left: auto;\n}\n\n.status-badge {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n    font-weight: 500;\n    letter-spacing: 0.02em;\n}\n\n.config-summary {\n    position: sticky;\n    top: 0;\n    max-height: 600px;\n    overflow-y: auto;\n}\n\n.config-item {\n    padding: 8px 0;\n    border-bottom: 1px solid #e9ecef;\n}\n\n.config-item:last-child {\n    border-bottom: none;\n}\n\n.template-tab-content {\n    background: #fff;\n}\n\n.template-header h5 {\n    font-size: 1.1em;\n}\n\n.loading-state,\n.no-template-state,\n.invalid-template-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-template-state i,\n.invalid-template-state i {\n    opacity: 0.6;\n}\n\n.template-editor-container {\n    background: #fff;\n    border-radius: 6px;\n}\n\n/* Grid layout adjustments */\n@media (max-width: 1200px) {\n    .record-form-container .mj-tab-body > div {\n        grid-template-columns: 1fr !important;\n        gap: 20px;\n    }\n    \n    .config-summary {\n        order: -1;\n        position: static;\n        max-height: none;\n    }\n}\n\n/* Responsive toolbar */\n@media (max-width: 768px) {\n    .custom-toolbar-actions {\n        flex-direction: column;\n        gap: 4px !important;\n    }\n    \n    .status-badge {\n        align-self: flex-start;\n    }\n}\n\n/* Ensure proper spacing in form sections */\n.record-form-container mj-form-section {\n    padding: 16px;\n}\n\n/* Smooth transitions for better UX */\n.status-badge,\n.config-item,\n.template-header {\n    transition: all 0.2s ease;\n}\n\n.config-item:hover {\n    background-color: rgba(0,0,0,0.02);\n    border-radius: 4px;\n    margin: 0 -8px;\n    padding: 8px;\n}\n\n/* Execution History Table Styles */\n.history-row {\n    transition: background 0.2s;\n}\n\n.history-row:not(.even-row) {\n    background: #f8f9fa;\n}\n\n.history-row.even-row {\n    background: white;\n}\n\n.history-row:hover {\n    background: #e9ecef !important;\n}\n\n/* Template Parameters Styles */\n.parameter-card {\n    position: relative;\n    overflow: hidden;\n}\n\n.parameter-card::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    bottom: 0;\n    width: 4px;\n    background: inherit;\n    transition: width 0.2s;\n}\n\n.parameter-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(0,0,0,0.1);\n}\n\n.parameter-card:hover::before {\n    width: 6px;\n}\n\n.type-badge {\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.03em;\n    transition: transform 0.2s;\n}\n\n.parameter-card:hover .type-badge {\n    transform: scale(1.05);\n}\n\n/* Parameter type icons animation */\n.parameter-card i.fa-solid {\n    transition: transform 0.3s;\n}\n\n.parameter-card:hover i.fa-solid {\n    transform: rotate(360deg);\n}\n\n/* Grid responsive behavior */\n@media (max-width: 768px) {\n    .parameter-card {\n        margin-bottom: 8px;\n    }\n    \n    .parameter-card h6 {\n        font-size: 0.95em;\n    }\n    \n    .type-badge {\n        font-size: 0.7em !important;\n    }\n}"] }]
     }], null, { templateEditor: [{
             type: ViewChild,
             args: ['templateEditor']