@memberjunction/ng-core-entity-forms 3.3.0 → 3.4.0

package/dist/lib/custom/Templates/templates-form.component.js

@@ -15,152 +15,235 @@ import { MJNotificationService } from '@memberjunction/ng-notifications';
 import { languages } from '@codemirror/language-data';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-inputs";
-import * as i3 from "@progress/kendo-angular-dropdowns";
-import * as i4 from "@memberjunction/ng-user-view-grid";
-import * as i5 from "@memberjunction/ng-base-forms";
-import * as i6 from "@memberjunction/ng-form-toolbar";
-import * as i7 from "@memberjunction/ng-tabstrip";
+import * as i2 from "@progress/kendo-angular-layout";
+import * as i3 from "@progress/kendo-angular-inputs";
+import * as i4 from "@progress/kendo-angular-dropdowns";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@memberjunction/ng-base-forms";
+import * as i7 from "@memberjunction/ng-form-toolbar";
 import * as i8 from "./template-param-dialog.component";
 import * as i9 from "./template-params-grid.component";
 import * as i10 from "../../shared/components/template-editor.component";
 const _c0 = ["codeEditor"];
 function TemplatesFormExtendedComponent_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-textbox", 46);
+    i0.ɵɵelementStart(0, "kendo-textbox", 38);
     i0.ɵɵtwoWayListener("ngModelChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_9_Template_kendo_textbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Name, $event) || (ctx_r2.record.Name = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Name);
 } }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵtext(2, " Active ");
+    i0.ɵɵelementEnd();
+} }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 41);
+    i0.ɵɵelement(1, "i", 43);
+    i0.ɵɵtext(2, " Inactive ");
+    i0.ɵɵelementEnd();
+} }
 function TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelementStart(0, "h4", 39);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(2, TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Conditional_2_Template, 3, 0, "span", 40)(3, TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Conditional_3_Template, 3, 0, "span", 41);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Name || "Unnamed Template", " ");
+    i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Unnamed Template");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.record.IsActive ? 2 : 3);
 } }
-function TemplatesFormExtendedComponent_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11)(1, "div")(2, "label", 44);
+    i0.ɵɵtext(3, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-combobox", 45);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_11_Template_kendo_combobox_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.CategoryID, $event) || (ctx_r2.record.CategoryID = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("valueChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_11_Template_kendo_combobox_valueChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCategoryChange($event)); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(5, "div")(6, "label", 44);
+    i0.ɵɵtext(7, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "kendo-switch", 46);
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_11_Template_kendo_switch_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.IsActive, $event) || (ctx_r2.record.IsActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.CategoryID);
+    i0.ɵɵproperty("data", ctx_r2.categoryOptions)("valuePrimitive", true)("allowCustom", true);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.IsActive);
+} }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "kendo-textarea", 47);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_15_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Description, $event) || (ctx_r2.record.Description = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtwoWayListener("ngModelChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_12_Template_kendo_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.Description, $event) || (ctx_r2.record.Description = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.Description);
     i0.ɵɵproperty("rows", 2);
 } }
-function TemplatesFormExtendedComponent_Conditional_1_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 13);
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Description || "No description provided", " ");
+    i0.ɵɵtextInterpolate(ctx_r2.record.Description);
 } }
-function TemplatesFormExtendedComponent_Conditional_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-combobox", 48);
-    i0.ɵɵtwoWayListener("ngModelChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_21_Template_kendo_combobox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.record.CategoryID, $event) || (ctx_r2.record.CategoryID = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("valueChange", function TemplatesFormExtendedComponent_Conditional_1_Conditional_21_Template_kendo_combobox_valueChange_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onCategoryChange($event)); });
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15);
+    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(2, "span", 17);
+    i0.ɵɵtext(3, "Category:");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 18);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.record.CategoryID);
-    i0.ɵɵproperty("data", ctx_r2.categoryOptions)("valuePrimitive", true)("allowCustom", true);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.record.Category);
 } }
-function TemplatesFormExtendedComponent_Conditional_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 16);
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵlistener("click", function TemplatesFormExtendedComponent_Conditional_1_Conditional_23_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.runTemplate()); });
+    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵtext(2, " Run ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("themeColor", "primary")("size", "large");
+} }
+function TemplatesFormExtendedComponent_Conditional_1_ng_template_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.record.Category || "Uncategorized", " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.templateContents.length, " ");
 } }
-function TemplatesFormExtendedComponent_Conditional_1_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵelement(1, "i", 49);
-    i0.ɵɵtext(2, " Active ");
+function TemplatesFormExtendedComponent_Conditional_1_ng_template_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelement(1, "i", 52);
+    i0.ɵɵtext(2, " Template Editor ");
+    i0.ɵɵtemplate(3, TemplatesFormExtendedComponent_Conditional_1_ng_template_26_Conditional_3_Template, 2, 1, "span", 53);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r2.templateContents.length > 0 ? 3 : -1);
+} }
+function TemplatesFormExtendedComponent_Conditional_1_ng_template_30_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelement(1, "i", 54);
+    i0.ɵɵtext(2, " Details ");
     i0.ɵɵelementEnd();
 } }
-function TemplatesFormExtendedComponent_Conditional_1_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 19);
-    i0.ɵɵelement(1, "i", 50);
-    i0.ɵɵtext(2, " Inactive ");
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_44_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelement(1, "i", 57);
+    i0.ɵɵtext(2, " Parameters ");
     i0.ɵɵelementEnd();
 } }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_44_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
+    i0.ɵɵtemplate(1, TemplatesFormExtendedComponent_Conditional_1_Conditional_44_ng_template_1_Template, 3, 0, "ng-template", 23);
+    i0.ɵɵelementStart(2, "div", 55);
+    i0.ɵɵelement(3, "mj-template-params-grid", 56);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("template", ctx_r2.record)("editMode", ctx_r2.EditMode);
+} }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_45_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵtext(2, " AI Prompts ");
+    i0.ɵɵelementEnd();
+} }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
+    i0.ɵɵtemplate(1, TemplatesFormExtendedComponent_Conditional_1_Conditional_45_ng_template_1_Template, 3, 0, "ng-template", 23);
+    i0.ɵɵelementStart(2, "div", 55);
+    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 58);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("AI Prompts", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("AI Prompts"))("AllowLoad", true)("ShowToolbar", false);
+} }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_46_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
+    i0.ɵɵelement(1, "i", 60);
+    i0.ɵɵtext(2, " Entity Documents ");
+    i0.ɵɵelementEnd();
+} }
+function TemplatesFormExtendedComponent_Conditional_1_Conditional_46_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
+    i0.ɵɵtemplate(1, TemplatesFormExtendedComponent_Conditional_1_Conditional_46_ng_template_1_Template, 3, 0, "ng-template", 23);
+    i0.ɵɵelementStart(2, "div", 55);
+    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 58);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("Entity Documents", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("Entity Documents"))("AllowLoad", true)("ShowToolbar", false);
+} }
 function TemplatesFormExtendedComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "form", 2, 0);
     i0.ɵɵelement(2, "mj-form-toolbar", 3);
-    i0.ɵɵelementStart(3, "div", 4)(4, "div", 5)(5, "div", 6)(6, "label", 7);
-    i0.ɵɵelement(7, "i", 8);
-    i0.ɵɵtext(8, " Template Name ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, TemplatesFormExtendedComponent_Conditional_1_Conditional_9_Template, 1, 1, "kendo-textbox", 9)(10, TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Template, 2, 1, "div", 10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 6)(12, "label", 7);
-    i0.ɵɵelement(13, "i", 11);
-    i0.ɵɵtext(14, " Description ");
+    i0.ɵɵelementStart(3, "div", 4)(4, "div", 5)(5, "div", 6)(6, "div", 7)(7, "div", 8);
+    i0.ɵɵelement(8, "i", 9);
+    i0.ɵɵtemplate(9, TemplatesFormExtendedComponent_Conditional_1_Conditional_9_Template, 1, 1, "kendo-textbox", 10)(10, TemplatesFormExtendedComponent_Conditional_1_Conditional_10_Template, 4, 2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(15, TemplatesFormExtendedComponent_Conditional_1_Conditional_15_Template, 1, 2, "kendo-textarea", 12)(16, TemplatesFormExtendedComponent_Conditional_1_Conditional_16_Template, 2, 1, "div", 13);
+    i0.ɵɵtemplate(11, TemplatesFormExtendedComponent_Conditional_1_Conditional_11_Template, 9, 5, "div", 11)(12, TemplatesFormExtendedComponent_Conditional_1_Conditional_12_Template, 1, 2, "kendo-textarea", 12)(13, TemplatesFormExtendedComponent_Conditional_1_Conditional_13_Template, 2, 1, "p", 13);
+    i0.ɵɵelementStart(14, "div", 14);
+    i0.ɵɵtemplate(15, TemplatesFormExtendedComponent_Conditional_1_Conditional_15_Template, 6, 1, "div", 15);
+    i0.ɵɵelementStart(16, "div", 15);
+    i0.ɵɵelement(17, "i", 16);
+    i0.ɵɵelementStart(18, "span", 17);
+    i0.ɵɵtext(19, "Contents:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 6)(18, "label", 7);
-    i0.ɵɵelement(19, "i", 14);
-    i0.ɵɵtext(20, " Category ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(21, TemplatesFormExtendedComponent_Conditional_1_Conditional_21_Template, 1, 4, "kendo-combobox", 15)(22, TemplatesFormExtendedComponent_Conditional_1_Conditional_22_Template, 2, 1, "div", 16);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "div", 17);
-    i0.ɵɵtemplate(24, TemplatesFormExtendedComponent_Conditional_1_Conditional_24_Template, 3, 0, "span", 18)(25, TemplatesFormExtendedComponent_Conditional_1_Conditional_25_Template, 3, 0, "span", 19);
+    i0.ɵɵelementStart(20, "span", 18);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(22, "div", 19);
+    i0.ɵɵtemplate(23, TemplatesFormExtendedComponent_Conditional_1_Conditional_23_Template, 3, 2, "button", 20);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(26, "mj-tabstrip", 20);
-    i0.ɵɵlistener("TabSelected", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_tabstrip_TabSelected_26_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTabSelect($event)); })("ResizeContainer", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_tabstrip_ResizeContainer_26_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.InvokeManualResize()); });
-    i0.ɵɵelementStart(27, "mj-tab", 21);
-    i0.ɵɵelement(28, "i", 22);
-    i0.ɵɵtext(29, " Contents ");
-    i0.ɵɵelementStart(30, "span", 23);
-    i0.ɵɵtext(31);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "mj-tab-body")(33, "div", 24)(34, "mj-template-editor", 25);
-    i0.ɵɵlistener("contentChange", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_editor_contentChange_34_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSharedTemplateContentChange($event)); })("runTemplate", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_editor_runTemplate_34_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSharedTemplateRun($event)); });
+    i0.ɵɵelementStart(24, "div", 21)(25, "kendo-expansionpanel", 22);
+    i0.ɵɵtemplate(26, TemplatesFormExtendedComponent_Conditional_1_ng_template_26_Template, 4, 1, "ng-template", 23);
+    i0.ɵɵelementStart(27, "div", 24)(28, "mj-template-editor", 25);
+    i0.ɵɵlistener("contentChange", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_editor_contentChange_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSharedTemplateContentChange($event)); })("runTemplate", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_editor_runTemplate_28_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSharedTemplateRun($event)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(35, "mj-tab", 26);
-    i0.ɵɵelement(36, "i", 27);
-    i0.ɵɵtext(37, " Details ");
+    i0.ɵɵelementStart(29, "kendo-expansionpanel", 22);
+    i0.ɵɵtemplate(30, TemplatesFormExtendedComponent_Conditional_1_ng_template_30_Template, 3, 0, "ng-template", 23);
+    i0.ɵɵelementStart(31, "div", 26)(32, "div", 27)(33, "div");
+    i0.ɵɵelement(34, "mj-form-field", 28)(35, "mj-form-field", 29)(36, "mj-form-field", 30)(37, "mj-form-field", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "mj-tab-body")(39, "div", 28)(40, "div", 2);
-    i0.ɵɵelement(41, "mj-form-field", 29)(42, "mj-form-field", 30)(43, "mj-form-field", 31)(44, "mj-form-field", 32)(45, "mj-form-field", 33)(46, "mj-form-field", 34)(47, "mj-form-field", 35)(48, "mj-form-field", 36)(49, "mj-form-field", 37);
+    i0.ɵɵelementStart(38, "div");
+    i0.ɵɵelement(39, "mj-form-field", 32)(40, "mj-form-field", 33)(41, "mj-form-field", 34)(42, "mj-form-field", 35)(43, "mj-form-field", 36);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(44, TemplatesFormExtendedComponent_Conditional_1_Conditional_44_Template, 4, 3, "kendo-expansionpanel", 22)(45, TemplatesFormExtendedComponent_Conditional_1_Conditional_45_Template, 4, 5, "kendo-expansionpanel", 22)(46, TemplatesFormExtendedComponent_Conditional_1_Conditional_46_Template, 4, 5, "kendo-expansionpanel", 22);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(50, "mj-tab", 38);
-    i0.ɵɵelement(51, "i", 39);
-    i0.ɵɵtext(52, " Parameters ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(53, "mj-tab-body");
-    i0.ɵɵelement(54, "mj-template-params-grid", 40);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(55, "mj-tab", 41);
-    i0.ɵɵelement(56, "i", 42);
-    i0.ɵɵtext(57, " AI Prompts ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "mj-tab-body");
-    i0.ɵɵelement(59, "mj-user-view-grid", 43);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "mj-tab", 44);
-    i0.ɵɵelement(61, "i", 8);
-    i0.ɵɵtext(62, " Documents ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "mj-tab-body");
-    i0.ɵɵelement(64, "mj-user-view-grid", 43);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(65, "mj-template-param-dialog", 45);
-    i0.ɵɵtwoWayListener("isVisibleChange", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_param_dialog_isVisibleChange_65_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.showParamDialog, $event) || (ctx_r2.showParamDialog = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("onClose", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_param_dialog_onClose_65_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onParamDialogClose()); });
+    i0.ɵɵelementStart(47, "mj-template-param-dialog", 37);
+    i0.ɵɵtwoWayListener("isVisibleChange", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_param_dialog_isVisibleChange_47_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.showParamDialog, $event) || (ctx_r2.showParamDialog = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("onClose", function TemplatesFormExtendedComponent_Conditional_1_Template_mj_template_param_dialog_onClose_47_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onParamDialogClose()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -168,19 +251,23 @@ function TemplatesFormExtendedComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("form", ctx_r2);
     i0.ɵɵadvance(7);
     i0.ɵɵconditional(ctx_r2.EditMode ? 9 : 10);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 15 : 16);
-    i0.ɵɵadvance(6);
-    i0.ɵɵconditional(ctx_r2.EditMode ? 21 : 22);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.EditMode ? 11 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r2.EditMode ? 12 : ctx_r2.record.Description ? 13 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.record.IsActive ? 24 : 25);
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.templateContents.length, " ");
+    i0.ɵɵconditional(ctx_r2.record.Category ? 15 : -1);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r2.templateContents.length);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 23 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("expanded", true);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("template", ctx_r2.record)("config", ctx_r2.templateEditorConfig);
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
+    i0.ɵɵproperty("expanded", false);
+    i0.ɵɵadvance(5);
     i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
     i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
@@ -188,6 +275,8 @@ function TemplatesFormExtendedComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
     i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
     i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
@@ -197,17 +286,11 @@ function TemplatesFormExtendedComponent_Conditional_1_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵproperty("record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r2.record.IsSaved);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("template", ctx_r2.record)("editMode", ctx_r2.EditMode);
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 44 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r2.record.IsSaved);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("AI Prompts", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("AI Prompts"))("AllowLoad", ctx_r2.IsCurrentTab("AI Prompts"))("EditMode", ctx_r2.GridEditMode());
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 45 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Visible", ctx_r2.record.IsSaved);
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("Entity Documents", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("Entity Documents"))("AllowLoad", ctx_r2.IsCurrentTab("Entity Documents"))("EditMode", ctx_r2.GridEditMode());
+    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 46 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("template", ctx_r2.record);
     i0.ɵɵtwoWayProperty("isVisible", ctx_r2.showParamDialog);
@@ -711,14 +794,14 @@ let TemplatesFormExtendedComponent = class TemplatesFormExtendedComponent extend
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container"], [1, "record-form"], [3, "form"], [1, "template-header", 2, "background", "#f8f9fa", "border-bottom", "1px solid #dee2e6", "padding", "8px 20px"], [2, "display", "grid", "grid-template-columns", "1fr 2fr 1fr auto", "gap", "12px", "align-items", "start"], [1, "form-group", 2, "margin", "0"], [1, "form-label", 2, "font-weight", "500", "margin-bottom", "3px", "color", "#495057", "font-size", "0.85em"], [1, "fa-solid", "fa-file-text"], ["name", "templateName", "placeholder", "Enter template name...", 3, "ngModel"], [1, "form-control-plaintext", 2, "font-size", "1em", "font-weight", "500", "padding", "6px 0"], [1, "fa-solid", "fa-align-left"], ["name", "description", "placeholder", "Enter template description...", 3, "ngModel", "rows"], [1, "form-control-plaintext", 2, "padding", "8px 0", "color", "#6c757d"], [1, "fa-solid", "fa-folder"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select or enter new category...", 3, "ngModel", "data", "valuePrimitive", "allowCustom"], [1, "form-control-plaintext", 2, "padding", "8px 0"], [2, "display", "flex", "flex-direction", "column", "align-items", "flex-end", "justify-content", "center"], [1, "badge", "badge-success", 2, "background", "#28a745", "color", "white", "padding", "6px 12px", "border-radius", "4px", "font-size", "0.85em"], [1, "badge", "badge-secondary", 2, "background", "#6c757d", "color", "white", "padding", "6px 12px", "border-radius", "4px", "font-size", "0.85em"], [3, "TabSelected", "ResizeContainer"], ["Name", "Contents"], [1, "fa-solid", "fa-file-lines"], [1, "badge", "badge-info", 2, "background", "#17a2b8", "color", "white", "padding", "2px 6px", "border-radius", "3px", "font-size", "0.7em", "margin-left", "6px"], [1, "template-contents-main", "content-margin"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], ["Name", "Details"], [1, "fa-solid", "fa-cogs"], [2, "padding", "20px"], ["FieldName", "UserPrompt", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "UserID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "ActiveAt", "Type", "datepicker", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DisabledAt", "Type", "datepicker", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "IsActive", "Type", "checkbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "User", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["Name", "Template Params", 3, "Visible"], [1, "fa-solid", "fa-sliders"], [3, "template", "editMode"], ["Name", "AI Prompts", 3, "Visible"], [1, "fa-solid", "fa-robot"], [3, "Params", "NewRecordValues", "AllowLoad", "EditMode"], ["Name", "Entity Documents", 3, "Visible"], [3, "isVisibleChange", "onClose", "template", "isVisible"], ["name", "templateName", "placeholder", "Enter template name...", 3, "ngModelChange", "ngModel"], ["name", "description", "placeholder", "Enter template description...", 3, "ngModelChange", "ngModel", "rows"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select or enter new category...", 3, "ngModelChange", "valueChange", "ngModel", "data", "valuePrimitive", "allowCustom"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"]], template: function TemplatesFormExtendedComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [["form", "ngForm"], [1, "record-form-container", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "record-form", 2, "display", "flex", "flex-direction", "column", "height", "100%", "overflow", "hidden"], [3, "form"], [1, "template-main-area", 2, "display", "flex", "flex-direction", "column", "flex", "1", "min-height", "0", "overflow-y", "auto"], [1, "template-header", 2, "flex-shrink", "0", "padding", "20px", "background", "#f8f9fa", "border-bottom", "2px solid #e9ecef"], [2, "display", "flex", "justify-content", "space-between", "align-items", "flex-start", "gap", "20px"], [2, "flex", "1", "min-width", "0"], [2, "display", "flex", "align-items", "center", "gap", "12px", "margin-bottom", "8px"], [1, "fa-solid", "fa-file-code", 2, "color", "#17a2b8", "font-size", "1.4em"], ["name", "templateName", "placeholder", "Enter template name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModel"], [2, "display", "flex", "gap", "16px", "margin-bottom", "12px", "flex-wrap", "wrap", "align-items", "center"], ["name", "description", "placeholder", "Enter template description...", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModel", "rows"], [2, "margin", "0 0 12px 0", "color", "#6c757d", "font-size", "0.9em", "line-height", "1.4"], [2, "display", "flex", "align-items", "center", "gap", "16px", "flex-wrap", "wrap"], [2, "display", "flex", "align-items", "center", "gap", "6px", "font-size", "0.85em"], [1, "fa-solid", "fa-file-lines", 2, "color", "#6c757d"], [2, "color", "#6c757d"], [2, "color", "#495057", "font-weight", "500"], [2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], ["kendoButton", "", "title", "Run Template", 3, "themeColor", "size"], [1, "configuration-sections", 2, "flex", "1", "background", "white", "border-top", "2px solid #e9ecef", "padding", "16px", "min-height", "0"], [2, "margin-bottom", "12px", 3, "expanded"], ["kendoExpansionPanelTitleDirective", ""], [2, "padding", "8px", "min-height", "400px"], [2, "height", "100%", "display", "block", 3, "contentChange", "runTemplate", "template", "config"], [2, "padding", "16px"], [2, "display", "grid", "grid-template-columns", "1fr 1fr", "gap", "20px"], ["FieldName", "UserPrompt", "Type", "textarea", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "UserID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "ActiveAt", "Type", "datepicker", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "DisabledAt", "Type", "datepicker", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "IsActive", "Type", "checkbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "Category", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], ["FieldName", "User", "Type", "textbox", 3, "record", "ShowLabel", "EditMode"], [3, "isVisibleChange", "onClose", "template", "isVisible"], ["name", "templateName", "placeholder", "Enter template name...", 2, "font-size", "1.2em", "font-weight", "600", "min-width", "300px", "flex", "1", 3, "ngModelChange", "ngModel"], [2, "margin", "0", "color", "#495057", "font-weight", "600", "flex", "1"], [2, "background", "#28a745", "color", "white", "padding", "4px 10px", "border-radius", "12px", "font-size", "0.75em", "font-weight", "500"], [2, "background", "#6c757d", "color", "white", "padding", "4px 10px", "border-radius", "12px", "font-size", "0.75em", "font-weight", "500"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [2, "display", "block", "margin-bottom", "4px", "font-weight", "600", "color", "#495057", "font-size", "0.9em"], ["name", "categoryId", "textField", "text", "valueField", "value", "placeholder", "Select or enter new category...", 2, "width", "250px", 3, "ngModelChange", "valueChange", "ngModel", "data", "valuePrimitive", "allowCustom"], ["name", "isActive", 3, "ngModelChange", "ngModel"], ["name", "description", "placeholder", "Enter template description...", 2, "width", "100%", "max-width", "600px", "margin-bottom", "12px", 3, "ngModelChange", "ngModel", "rows"], [1, "fa-solid", "fa-folder", 2, "color", "#6c757d"], ["kendoButton", "", "title", "Run Template", 3, "click", "themeColor", "size"], [1, "fa-solid", "fa-play"], [2, "display", "flex", "align-items", "center", "gap", "8px", "font-weight", "600"], [1, "fa-solid", "fa-code", 2, "color", "#6c757d"], [1, "badge", 2, "background", "#17a2b8", "color", "white", "padding", "2px 6px", "border-radius", "10px", "font-size", "0.7em"], [1, "fa-solid", "fa-cogs", 2, "color", "#6c757d"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders", 2, "color", "#6c757d"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot", 2, "color", "#6c757d"], [1, "fa-solid", "fa-file-text", 2, "color", "#6c757d"]], template: function TemplatesFormExtendedComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, TemplatesFormExtendedComponent_Conditional_1_Template, 66, 50);
+            i0.ɵɵtemplate(1, TemplatesFormExtendedComponent_Conditional_1_Template, 48, 43);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.record ? 1 : -1);
-        } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.TextAreaComponent, i2.TextBoxComponent, i3.ComboBoxComponent, i4.UserViewGridComponent, i5.MJFormField, i6.FormToolbarComponent, i7.MJTabStripComponent, i7.MJTabBodyComponent, i7.MJTabComponent, i8.TemplateParamDialogComponent, i9.TemplateParamsGridComponent, i10.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}"] }); }
+        } }, dependencies: [i1.ɵNgNoValidate, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.NgForm, i2.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective, i3.TextAreaComponent, i3.TextBoxComponent, i3.SwitchComponent, i4.ComboBoxComponent, i5.ButtonComponent, i6.MJFormField, i6.ExplorerEntityDataGridComponent, i7.FormToolbarComponent, i8.TemplateParamDialogComponent, i9.TemplateParamsGridComponent, i10.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: #F5F6FA;\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n} \n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}", "\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n\n\n.record-form[_ngcontent-%COMP%] {\n    min-height: 0 !important;\n}\n\n.template-header[_ngcontent-%COMP%] {\n    border-bottom: 2px solid #e9ecef;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n  .configuration-sections kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 12px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n  .configuration-sections .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n  .configuration-sections .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n\n\n  .configuration-sections kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #17a2b8 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n\n\n  .configuration-sections .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n\n\n  .configuration-sections .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n\n\n.template-header[_ngcontent-%COMP%], \n.badge[_ngcontent-%COMP%] {\n    transition: all 0.2s ease;\n}"] }); }
 };
 TemplatesFormExtendedComponent = __decorate([
     RegisterClass(BaseFormComponent, 'Templates')
@@ -726,7 +809,7 @@ TemplatesFormExtendedComponent = __decorate([
 export { TemplatesFormExtendedComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplatesFormExtendedComponent, [{
         type: Component,
-        args: [{ selector: 'mj-templates-form', template: "<div class=\"record-form-container\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\" >\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Top Section - Key Fields -->\n        <div class=\"template-header\" style=\"background: #f8f9fa; border-bottom: 1px solid #dee2e6; padding: 8px 20px;\">\n            <div style=\"display: grid; grid-template-columns: 1fr 2fr 1fr auto; gap: 12px; align-items: start;\">\n                \n                <!-- Name -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-file-text\"></i> Template Name\n                    </label>\n                    @if (EditMode) {\n                        <kendo-textbox [(ngModel)]=\"record.Name\" name=\"templateName\" placeholder=\"Enter template name...\"></kendo-textbox>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"font-size: 1em; font-weight: 500; padding: 6px 0;\">\n                            {{ record.Name || 'Unnamed Template' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Description -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-align-left\"></i> Description\n                    </label>\n                    @if (EditMode) {\n                        <kendo-textarea [(ngModel)]=\"record.Description\" \n                                       name=\"description\"\n                                       [rows]=\"2\"\n                                       placeholder=\"Enter template description...\"></kendo-textarea>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"padding: 8px 0; color: #6c757d;\">\n                            {{ record.Description || 'No description provided' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Category -->\n                <div class=\"form-group\" style=\"margin: 0;\">\n                    <label class=\"form-label\" style=\"font-weight: 500; margin-bottom: 3px; color: #495057; font-size: 0.85em;\">\n                        <i class=\"fa-solid fa-folder\"></i> Category\n                    </label>\n                    @if (EditMode) {\n                        <kendo-combobox [(ngModel)]=\"record.CategoryID\" \n                                       name=\"categoryId\"\n                                       [data]=\"categoryOptions\"\n                                       textField=\"text\"\n                                       valueField=\"value\"\n                                       [valuePrimitive]=\"true\"\n                                       [allowCustom]=\"true\"\n                                       (valueChange)=\"onCategoryChange($event)\"\n                                       placeholder=\"Select or enter new category...\">\n                        </kendo-combobox>\n                    } @else {\n                        <div class=\"form-control-plaintext\" style=\"padding: 8px 0;\">\n                            {{ record.Category || 'Uncategorized' }}\n                        </div>\n                    }\n                </div>\n\n                <!-- Template Status -->\n                <div style=\"display: flex; flex-direction: column; align-items: flex-end; justify-content: center;\">\n                    @if (record.IsActive) {\n                        <span class=\"badge badge-success\" style=\"background: #28a745; color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.85em;\">\n                            <i class=\"fa-solid fa-check-circle\"></i> Active\n                        </span>\n                    } @else {\n                        <span class=\"badge badge-secondary\" style=\"background: #6c757d; color: white; padding: 6px 12px; border-radius: 4px; font-size: 0.85em;\">\n                            <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                        </span>\n                    }\n                </div>\n            </div>\n        </div>\n\n        <mj-tabstrip (TabSelected)=\"onTabSelect($event)\"  (ResizeContainer)=\"InvokeManualResize()\">\n            \n            <!-- Contents Tab - Main Focus -->\n            <mj-tab Name=\"Contents\">\n                <i class=\"fa-solid fa-file-lines\"></i> Contents \n                <span class=\"badge badge-info\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 3px; font-size: 0.7em; margin-left: 6px;\">\n                    {{ templateContents.length }}\n                </span>\n            </mj-tab>\n            <mj-tab-body>\n                <div class=\"template-contents-main content-margin\">\n                    <!-- Shared Template Editor -->\n                    <mj-template-editor \n                        [template]=\"record\"\n                        [config]=\"templateEditorConfig\"\n                        (contentChange)=\"onSharedTemplateContentChange($event)\"\n                        (runTemplate)=\"onSharedTemplateRun($event)\"\n                        style=\"height: 100%; display: block;\">\n                    </mj-template-editor>\n                </div>\n            </mj-tab-body>\n\n            <!-- Details Tab - Extra Fields -->\n            <mj-tab Name=\"Details\">\n                <i class=\"fa-solid fa-cogs\"></i> Details\n            </mj-tab>\n            <mj-tab-body>\n                <div style=\"padding: 20px;\">\n                    <div class=\"record-form\">\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"UserPrompt\"\n                            Type=\"textarea\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"UserID\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\"\n                            LinkType=\"Record\"\n                            LinkComponentType=\"Search\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"ActiveAt\"\n                            Type=\"datepicker\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"DisabledAt\"\n                            Type=\"datepicker\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"IsActive\"\n                            Type=\"checkbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"__mj_CreatedAt\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"__mj_UpdatedAt\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"Category\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                        <mj-form-field \n                            [record]=\"record\"\n                            [ShowLabel]=\"true\"\n                            FieldName=\"User\"\n                            Type=\"textbox\"\n                            [EditMode]=\"EditMode\">\n                        </mj-form-field>\n                    </div>\n                </div>\n            </mj-tab-body>\n\n            <!-- Template Params Tab -->\n            <mj-tab Name=\"Template Params\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-sliders\"></i> Parameters\n            </mj-tab>\n            <mj-tab-body>\n                <mj-template-params-grid \n                    [template]=\"record\"\n                    [editMode]=\"EditMode\">\n                </mj-template-params-grid>                    \n            </mj-tab-body>\n\n            <!-- AI Prompts Tab -->\n            <mj-tab Name=\"AI Prompts\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-robot\"></i> AI Prompts\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-view-grid \n                    [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','TemplateID')\"  \n                    [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n                    [AllowLoad]=\"IsCurrentTab('AI Prompts')\"  \n                    [EditMode]=\"GridEditMode()\"  \n                >\n                </mj-user-view-grid>                    \n            </mj-tab-body>\n\n            <!-- Entity Documents Tab -->\n            <mj-tab Name=\"Entity Documents\" [Visible]=\"record.IsSaved\"> \n                <i class=\"fa-solid fa-file-text\"></i> Documents\n            </mj-tab>\n            <mj-tab-body>\n                <mj-user-view-grid \n                    [Params]=\"BuildRelationshipViewParamsByEntityName('Entity Documents','TemplateID')\"  \n                    [NewRecordValues]=\"NewRecordValues('Entity Documents')\"\n                    [AllowLoad]=\"IsCurrentTab('Entity Documents')\"  \n                    [EditMode]=\"GridEditMode()\"  \n                >\n                </mj-user-view-grid>                    \n            </mj-tab-body>\n        </mj-tabstrip>\n        </form>\n\n        <!-- Template Parameter Dialog -->\n        <mj-template-param-dialog \n            [template]=\"record\"\n            [(isVisible)]=\"showParamDialog\"\n            (onClose)=\"onParamDialogClose()\">\n        </mj-template-param-dialog>\n    }\n</div>", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: #9ca3af;\n}\n"] }]
+        args: [{ selector: 'mj-templates-form', template: "<div class=\"record-form-container\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    @if (record) {\n        <form class=\"record-form\" #form=\"ngForm\" style=\"display: flex; flex-direction: column; height: 100%; overflow: hidden;\">\n        <mj-form-toolbar [form]=\"this\"></mj-form-toolbar>\n\n        <!-- Main Content Area -->\n        <div class=\"template-main-area\" style=\"display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto;\">\n\n            <!-- Header Section -->\n            <div class=\"template-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\n                    <!-- Left: Template 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-file-code\" style=\"color: #17a2b8; font-size: 1.4em;\"></i>\n                            @if (EditMode) {\n                                <kendo-textbox [(ngModel)]=\"record.Name\"\n                                              name=\"templateName\"\n                                              placeholder=\"Enter template 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 || 'Unnamed Template' }}</h4>\n                                @if (record.IsActive) {\n                                    <span style=\"background: #28a745; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span style=\"background: #6c757d; color: white; padding: 4px 10px; border-radius: 12px; font-size: 0.75em; font-weight: 500;\">\n                                        <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                                    </span>\n                                }\n                            }\n                        </div>\n\n                        <!-- Category and Active toggle when in edit mode -->\n                        @if (EditMode) {\n                            <div style=\"display: flex; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; align-items: center;\">\n                                <div>\n                                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Category</label>\n                                    <kendo-combobox [(ngModel)]=\"record.CategoryID\"\n                                                   name=\"categoryId\"\n                                                   [data]=\"categoryOptions\"\n                                                   textField=\"text\"\n                                                   valueField=\"value\"\n                                                   [valuePrimitive]=\"true\"\n                                                   [allowCustom]=\"true\"\n                                                   (valueChange)=\"onCategoryChange($event)\"\n                                                   placeholder=\"Select or enter new category...\"\n                                                   style=\"width: 250px;\">\n                                    </kendo-combobox>\n                                </div>\n                                <div>\n                                    <label style=\"display: block; margin-bottom: 4px; font-weight: 600; color: #495057; font-size: 0.9em;\">Active</label>\n                                    <kendo-switch [(ngModel)]=\"record.IsActive\" name=\"isActive\"></kendo-switch>\n                                </div>\n                            </div>\n                        }\n\n                        @if (EditMode) {\n                            <kendo-textarea [(ngModel)]=\"record.Description\"\n                                           name=\"description\"\n                                           [rows]=\"2\"\n                                           placeholder=\"Enter template 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\n                        <!-- Quick Info Row -->\n                        <div style=\"display: flex; align-items: center; gap: 16px; flex-wrap: wrap;\">\n                            @if (record.Category) {\n                                <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                    <i class=\"fa-solid fa-folder\" style=\"color: #6c757d;\"></i>\n                                    <span style=\"color: #6c757d;\">Category:</span>\n                                    <span style=\"color: #495057; font-weight: 500;\">{{ record.Category }}</span>\n                                </div>\n                            }\n\n                            <div style=\"display: flex; align-items: center; gap: 6px; font-size: 0.85em;\">\n                                <i class=\"fa-solid fa-file-lines\" style=\"color: #6c757d;\"></i>\n                                <span style=\"color: #6c757d;\">Contents:</span>\n                                <span style=\"color: #495057; font-weight: 500;\">{{ templateContents.length }}</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Right: Action Buttons -->\n                    <div style=\"display: flex; flex-direction: column; gap: 8px; align-items: flex-end;\">\n                        @if (record.IsSaved) {\n                            <button kendoButton [themeColor]=\"'primary'\" [size]=\"'large'\"\n                                    (click)=\"runTemplate()\"\n                                    title=\"Run Template\">\n                                <i class=\"fa-solid fa-play\"></i> Run\n                            </button>\n                        }\n                    </div>\n                </div>\n            </div>\n\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\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 (templateContents.length > 0) {\n                                <span class=\"badge\" style=\"background: #17a2b8; color: white; padding: 2px 6px; border-radius: 10px; font-size: 0.7em;\">\n                                    {{ templateContents.length }}\n                                </span>\n                            }\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 8px; min-height: 400px;\">\n                        <mj-template-editor\n                            [template]=\"record\"\n                            [config]=\"templateEditorConfig\"\n                            (contentChange)=\"onSharedTemplateContentChange($event)\"\n                            (runTemplate)=\"onSharedTemplateRun($event)\"\n                            style=\"height: 100%; display: block;\">\n                        </mj-template-editor>\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Details Section -->\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                            Details\n                        </span>\n                    </ng-template>\n\n                    <div style=\"padding: 16px;\">\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=\"UserPrompt\"\n                                    Type=\"textarea\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"UserID\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\"\n                                    LinkType=\"Record\"\n                                    LinkComponentType=\"Search\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"ActiveAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"DisabledAt\"\n                                    Type=\"datepicker\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n\n                            <!-- Right Column -->\n                            <div>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"IsActive\"\n                                    Type=\"checkbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_CreatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"__mj_UpdatedAt\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"Category\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                                <mj-form-field\n                                    [record]=\"record\"\n                                    [ShowLabel]=\"true\"\n                                    FieldName=\"User\"\n                                    Type=\"textbox\"\n                                    [EditMode]=\"EditMode\">\n                                </mj-form-field>\n                            </div>\n                        </div>\n                    </div>\n                </kendo-expansionpanel>\n\n                <!-- Template Parameters Section -->\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-sliders\" style=\"color: #6c757d;\"></i>\n                                Parameters\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-template-params-grid\n                                [template]=\"record\"\n                                [editMode]=\"EditMode\">\n                            </mj-template-params-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- AI Prompts Section -->\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-robot\" style=\"color: #6c757d;\"></i>\n                                AI Prompts\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('AI Prompts','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('AI Prompts')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n\n                <!-- Entity Documents Section -->\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-file-text\" style=\"color: #6c757d;\"></i>\n                                Entity Documents\n                            </span>\n                        </ng-template>\n\n                        <div style=\"padding: 16px 0;\">\n                            <mj-explorer-entity-data-grid\n                                [Params]=\"BuildRelationshipViewParamsByEntityName('Entity Documents','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('Entity Documents')\"\n                                [AllowLoad]=\"true\"\n                                [ShowToolbar]=\"false\">\n                            </mj-explorer-entity-data-grid>\n                        </div>\n                    </kendo-expansionpanel>\n                }\n            </div>\n        </div>\n        </form>\n\n        <!-- Template Parameter Dialog -->\n        <mj-template-param-dialog\n            [template]=\"record\"\n            [(isVisible)]=\"showParamDialog\"\n            (onClose)=\"onParamDialogClose()\">\n        </mj-template-param-dialog>\n    }\n</div>\n", styles: [".k-pane {\n  background-color: #F5F6FA;\n}\n\n.content-margin {\n  margin: 10px;\n} \n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \n} */\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n} \n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n \n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: #10b981;\n  color: white;\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: #9ca3af;\n}\n", "/* Override shared form-styles to enable flex layout */\n:host {\n    display: block;\n    height: 100%;\n}\n\n.record-form-container {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n/* Override the shared record-form min-height so flex layout works properly */\n.record-form {\n    min-height: 0 !important;\n}\n\n.template-header {\n    border-bottom: 2px solid #e9ecef;\n}\n\n.badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Expansion Panel Styling */\n::ng-deep .configuration-sections kendo-expansionpanel {\n    border: none !important;\n    border-radius: 12px !important;\n    margin-bottom: 12px !important;\n    box-shadow: 0 2px 8px rgba(0,0,0,0.06) !important;\n    background: white !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .configuration-sections .k-expander-header {\n    background: white !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: #2c3e50 !important;\n    font-weight: 600 !important;\n    font-size: 16px !important;\n    transition: all 0.2s ease !important;\n}\n\n::ng-deep .configuration-sections .k-expander-header:hover {\n    background: #f8f9fa !important;\n}\n\n/* Expanded state header */\n::ng-deep .configuration-sections kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: #17a2b8 !important;\n    color: white !important;\n    border-radius: 12px 12px 0 0 !important;\n}\n\n/* Content area */\n::ng-deep .configuration-sections .k-expander-content {\n    padding: 0 !important;\n    border: none !important;\n    background: white !important;\n    border-radius: 0 0 12px 12px !important;\n}\n\n/* Icon in header */\n::ng-deep .configuration-sections .k-expander-header .fa-solid {\n    transition: transform 0.2s ease !important;\n}\n\n/* Smooth transitions */\n.template-header,\n.badge {\n    transition: all 0.2s ease;\n}\n"] }]
     }], null, { codeEditor: [{
             type: ViewChild,
             args: ['codeEditor']