var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { Component, ViewChild } from '@angular/core';
import { RegisterClass } from '@memberjunction/global';
import { BaseFormComponent } from '@memberjunction/ng-base-forms';
import { MJTemplateFormComponent } from '../../generated/Entities/MJTemplate/mjtemplate.form.component';
import { Metadata, RunView } from '@memberjunction/core';
import { TemplateEngineBase } from '@memberjunction/templates-base-types';
import { Subject } from 'rxjs';
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-layout";
import * as i3 from "@progress/kendo-angular-inputs";
import * as i4 from "@progress/kendo-angular-dropdowns";
import * as i5 from "@memberjunction/ng-base-forms";
import * as i6 from "./template-param-dialog.component";
import * as i7 from "./template-params-grid.component";
import * as i8 from "../../shared/components/template-editor.component";
const _c0 = ["codeEditor"];
function MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "kendo-textbox", 38);
    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 39);
    i0.ɵɵelement(1, "i", 41);
    i0.ɵɵtext(2, " Active ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 40);
    i0.ɵɵelement(1, "i", 42);
    i0.ɵɵtext(2, " Inactive ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "h4");
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(2, MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Conditional_2_Template, 3, 0, "span", 39)(3, MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Conditional_3_Template, 3, 0, "span", 40);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r2.record.Name || "Unnamed Template");
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.record.IsActive ? 2 : 3);
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 11)(1, "div")(2, "label", 43);
    i0.ɵɵtext(3, "Category");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "kendo-combobox", 44);
    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_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", 43);
    i0.ɵɵtext(7, "Active");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "kendo-switch", 45);
    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "kendo-textarea", 46);
    i0.ɵɵtwoWayListener("ngModelChange", function MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_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.ɵɵtextInterpolate(ctx_r2.record.Description);
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 15);
    i0.ɵɵelement(1, "i", 47);
    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.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r2.record.Category);
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 48);
    i0.ɵɵlistener("click", function MJTemplateFormComponentExtended_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", 49);
    i0.ɵɵtext(2, " Run ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_ng_template_26_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 52);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r2.templateContents.length, " ");
} }
function MJTemplateFormComponentExtended_Conditional_1_ng_template_26_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 50);
    i0.ɵɵelement(1, "i", 51);
    i0.ɵɵtext(2, " Template Editor ");
    i0.ɵɵconditionalCreate(3, MJTemplateFormComponentExtended_Conditional_1_ng_template_26_Conditional_3_Template, 2, 1, "span", 52);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(ctx_r2.templateContents.length > 0 ? 3 : -1);
} }
function MJTemplateFormComponentExtended_Conditional_1_ng_template_30_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 50);
    i0.ɵɵelement(1, "i", 53);
    i0.ɵɵtext(2, " Details ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_44_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 50);
    i0.ɵɵelement(1, "i", 56);
    i0.ɵɵtext(2, " Parameters ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_44_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_1_Conditional_44_ng_template_1_Template, 3, 0, "ng-template", 23);
    i0.ɵɵelementStart(2, "div", 54);
    i0.ɵɵelement(3, "mj-template-params-grid", 55);
    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 MJTemplateFormComponentExtended_Conditional_1_Conditional_45_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 50);
    i0.ɵɵelement(1, "i", 58);
    i0.ɵɵtext(2, " AI Prompts ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_45_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_1_Conditional_45_ng_template_1_Template, 3, 0, "ng-template", 23);
    i0.ɵɵelementStart(2, "div", 54);
    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 57);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("expanded", false);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("MJ: AI Prompts", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("MJ: AI Prompts"))("AllowLoad", true)("ShowToolbar", false);
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_46_ng_template_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 50);
    i0.ɵɵelement(1, "i", 59);
    i0.ɵɵtext(2, " Entity Documents ");
    i0.ɵɵelementEnd();
} }
function MJTemplateFormComponentExtended_Conditional_1_Conditional_46_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "kendo-expansionpanel", 22);
    i0.ɵɵtemplate(1, MJTemplateFormComponentExtended_Conditional_1_Conditional_46_ng_template_1_Template, 3, 0, "ng-template", 23);
    i0.ɵɵelementStart(2, "div", 54);
    i0.ɵɵelement(3, "mj-explorer-entity-data-grid", 57);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("expanded", false);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("Params", ctx_r2.BuildRelationshipViewParamsByEntityName("MJ: Entity Documents", "TemplateID"))("NewRecordValues", ctx_r2.NewRecordValues("MJ: Entity Documents"))("AllowLoad", true)("ShowToolbar", false);
} }
function MJTemplateFormComponentExtended_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, "div", 7)(7, "div", 8);
    i0.ɵɵelement(8, "i", 9);
    i0.ɵɵconditionalCreate(9, MJTemplateFormComponentExtended_Conditional_1_Conditional_9_Template, 1, 1, "kendo-textbox", 10)(10, MJTemplateFormComponentExtended_Conditional_1_Conditional_10_Template, 4, 2);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(11, MJTemplateFormComponentExtended_Conditional_1_Conditional_11_Template, 9, 5, "div", 11);
    i0.ɵɵconditionalCreate(12, MJTemplateFormComponentExtended_Conditional_1_Conditional_12_Template, 1, 2, "kendo-textarea", 12)(13, MJTemplateFormComponentExtended_Conditional_1_Conditional_13_Template, 2, 1, "p", 13);
    i0.ɵɵelementStart(14, "div", 14);
    i0.ɵɵconditionalCreate(15, MJTemplateFormComponentExtended_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(20, "span", 18);
    i0.ɵɵtext(21);
    i0.ɵɵelementEnd()()()();
    i0.ɵɵelementStart(22, "div", 19);
    i0.ɵɵconditionalCreate(23, MJTemplateFormComponentExtended_Conditional_1_Conditional_23_Template, 3, 0, "button", 20);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(24, "div", 21)(25, "kendo-expansionpanel", 22);
    i0.ɵɵtemplate(26, MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_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(29, "kendo-expansionpanel", 22);
    i0.ɵɵtemplate(30, MJTemplateFormComponentExtended_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, "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.ɵɵconditionalCreate(44, MJTemplateFormComponentExtended_Conditional_1_Conditional_44_Template, 4, 3, "kendo-expansionpanel", 22);
    i0.ɵɵconditionalCreate(45, MJTemplateFormComponentExtended_Conditional_1_Conditional_45_Template, 4, 5, "kendo-expansionpanel", 22);
    i0.ɵɵconditionalCreate(46, MJTemplateFormComponentExtended_Conditional_1_Conditional_46_Template, 4, 5, "kendo-expansionpanel", 22);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(47, "mj-template-param-dialog", 37);
    i0.ɵɵtwoWayListener("isVisibleChange", function MJTemplateFormComponentExtended_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 MJTemplateFormComponentExtended_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();
    i0.ɵɵadvance(2);
    i0.ɵɵproperty("Form", ctx_r2);
    i0.ɵɵadvance(7);
    i0.ɵɵconditional(ctx_r2.EditMode ? 9 : 10);
    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.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();
    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);
    i0.ɵɵadvance();
    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();
    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();
    i0.ɵɵproperty("Record", ctx_r2.record)("ShowLabel", true)("EditMode", ctx_r2.EditMode);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 44 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 45 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.record.IsSaved ? 46 : -1);
    i0.ɵɵadvance();
    i0.ɵɵproperty("template", ctx_r2.record);
    i0.ɵɵtwoWayProperty("isVisible", ctx_r2.showParamDialog);
} }
let MJTemplateFormComponentExtended = class MJTemplateFormComponentExtended extends MJTemplateFormComponent {
    constructor() {
        super(...arguments);
        this.templateContents = [];
        this.selectedContentIndex = 0;
        this.isAddingNewContent = false;
        this.newTemplateContent = null;
        this.hasUnsavedChanges = false;
        this.templateInfoExpanded = true;
        this.templateContentsExpanded = true;
        this.categoryOptions = [
            { text: 'Select Category...', value: '' },
            // TODO: Load from database
        ];
        this.contentTypeOptions = [];
        this.supportedLanguages = languages;
        this.codeEditor = null;
        this.isUpdatingEditorValue = false;
        this.isRunningTemplate = false;
        this.templateTestResult = null;
        this.templateTestError = null;
        this.showParamDialog = false;
        // Template editor configuration for shared component
        this.templateEditorConfig = {
            allowEdit: true,
            showRunButton: true,
            compactMode: false
        };
        this.destroy$ = new Subject();
        this.activeTimeouts = [];
    }
    async ngOnInit() {
        await super.ngOnInit();
        await this.loadTemplateContents();
        await this.loadCategories();
        this.loadContentTypes();
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
        // Clean up any active timeouts
        this.activeTimeouts.forEach(timeoutId => clearTimeout(timeoutId));
        this.activeTimeouts.length = 0;
    }
    ngAfterViewInit() {
        // Initial sync when view is ready
        this.syncEditorValue();
    }
    async loadTemplateContents() {
        if (this.record && this.record.ID) {
            try {
                const rv = new RunView();
                const results = await rv.RunView({
                    EntityName: 'MJ: Template Contents',
                    ExtraFilter: `TemplateID='${this.record.ID}'`,
                    OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
                    ResultType: 'entity_object'
                });
                this.templateContents = results.Results;
                // If we have contents but no selection, select the first one
                if (this.templateContents.length > 0 && this.selectedContentIndex === 0) {
                    this.selectedContentIndex = 0;
                }
                // If no template contents exist, create a default one for single-content optimization
                if (this.templateContents.length === 0) {
                    await this.createDefaultTemplateContent();
                }
                // Entity change tracking is handled automatically by BaseEntity
                // Sync editor value after loading content
                this.syncEditorValue();
            }
            catch (error) {
                console.error('Error loading template contents:', error);
            }
        }
    }
    async createDefaultTemplateContent() {
        const md = new Metadata();
        const defaultContent = await md.GetEntityObject('MJ: Template Contents');
        defaultContent.TemplateID = this.record.ID;
        defaultContent.Priority = 1;
        defaultContent.IsActive = true;
        // Set default to first real content type (skip "Select Type..." if it exists)
        const validContentTypes = this.contentTypeOptions.filter(option => option.value !== '');
        if (validContentTypes.length > 0) {
            defaultContent.TypeID = validContentTypes[0].value;
        }
        this.templateContents = [defaultContent];
        this.selectedContentIndex = 0;
        // Sync editor value after creating default content
        this.syncEditorValue();
    }
    selectTemplateContent(index, confirmSwitch = true) {
        // If we're adding new content and user clicks on existing content, ask for confirmation
        if (this.isAddingNewContent && confirmSwitch) {
            if (!confirm('You have unsaved changes to a new content version. Are you sure you want to switch? Your changes will be lost.')) {
                return;
            }
        }
        if (index >= 0 && index < this.templateContents.length) {
            this.selectedContentIndex = index;
            this.isAddingNewContent = false;
            // Don't clear newTemplateContent to preserve the work in progress
            // Sync editor value when switching content
            this.syncEditorValue();
        }
    }
    async loadCategories() {
        try {
            const rv = new RunView();
            const results = await rv.RunView({
                EntityName: 'MJ: Template Categories'
            });
            this.categoryOptions = [
                { text: 'Select Category...', value: '' },
                ...results.Results.map((cat) => ({
                    text: cat.Name,
                    value: cat.ID
                }))
            ];
        }
        catch (error) {
            console.error('Error loading categories:', error);
            this.categoryOptions = [{ text: 'Select Category...', value: '' }];
        }
    }
    loadContentTypes() {
        try {
            // Get content types from TemplateEngine cache
            const contentTypes = TemplateEngineBase.Instance.TemplateContentTypes;
            this.contentTypeOptions = [
                { text: 'Select Type...', value: '' },
                ...contentTypes.map(ct => ({
                    text: ct.Name,
                    value: ct.ID
                }))
            ];
        }
        catch (error) {
            console.error('Error loading content types:', error);
            // Fallback to basic types
            this.contentTypeOptions = [
                { text: 'Select Type...', value: '' },
                { text: 'HTML', value: 'HTML' },
                { text: 'Plain Text', value: 'Text' },
                { text: 'Markdown', value: 'Markdown' }
            ];
        }
    }
    async onCategoryChange(value) {
        // If it's a new category (string but not in existing options)
        if (value && !this.categoryOptions.find(opt => opt.value === value)) {
            // Check for duplicate category names (case-insensitive, trimmed)
            if (this.isDuplicateCategory(value)) {
                const existingCategory = this.categoryOptions.find(option => option.text && option.text.trim().toLowerCase() === value.trim().toLowerCase());
                if (existingCategory) {
                    // Use the existing category instead
                    this.record.CategoryID = existingCategory.value;
                    MJNotificationService.Instance.CreateSimpleNotification(`Category "${existingCategory.text}" already exists. Using existing category.`, 'warning');
                }
                return;
            }
            try {
                // Create new category with trimmed name
                const md = new Metadata();
                const newCategory = await md.GetEntityObject('MJ: Template Categories');
                newCategory.Name = value.trim();
                newCategory.UserID = this.record.UserID || md.CurrentUser.ID;
                const saved = await newCategory.Save();
                if (saved) {
                    // Add to options and set the ID
                    this.categoryOptions.push({
                        text: newCategory.Name,
                        value: newCategory.ID
                    });
                    this.record.CategoryID = newCategory.ID;
                    MJNotificationService.Instance.CreateSimpleNotification(`New category "${newCategory.Name}" created successfully.`, 'success');
                }
                else {
                    MJNotificationService.Instance.CreateSimpleNotification(`Failed to create new category. ${newCategory.LatestResult?.CompleteMessage || ''}`, 'error');
                }
            }
            catch (error) {
                console.error('Error creating new category:', error);
                MJNotificationService.Instance.CreateSimpleNotification('Error creating new category. Please try again.', 'error');
            }
        }
    }
    async addNewTemplateContent() {
        const md = new Metadata();
        this.newTemplateContent = await md.GetEntityObject('MJ: Template Contents');
        this.newTemplateContent.TemplateID = this.record.ID;
        this.newTemplateContent.Priority = this.templateContents.length + 1;
        this.newTemplateContent.IsActive = true;
        // Set default to first real content type (skip "Select Type..." if it exists)
        const validContentTypes = this.contentTypeOptions.filter(option => option.value !== '');
        if (validContentTypes.length > 0) {
            this.newTemplateContent.TypeID = validContentTypes[0].value;
        }
        this.newTemplateContent.TemplateText = '';
        // Add immediately to the array
        this.templateContents.push(this.newTemplateContent);
        this.selectedContentIndex = this.templateContents.length - 1;
        this.isAddingNewContent = true;
        // Sync editor value when adding new content
        this.syncEditorValue();
    }
    cancelNewTemplateContent() {
        this.isAddingNewContent = false;
        this.newTemplateContent = null;
    }
    async deleteTemplateContent(index) {
        if (index >= 0 && index < this.templateContents.length) {
            const contentToDelete = this.templateContents[index];
            if (contentToDelete.ID) {
                try {
                    const result = await contentToDelete.Delete();
                    if (result) {
                        this.templateContents.splice(index, 1);
                        // Adjust selected index if necessary
                        if (this.selectedContentIndex >= this.templateContents.length) {
                            this.selectedContentIndex = Math.max(0, this.templateContents.length - 1);
                        }
                        // If no contents remain, create a default one
                        if (this.templateContents.length === 0) {
                            await this.createDefaultTemplateContent();
                        }
                    }
                    else {
                        console.error('Delete returned false');
                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to delete template content. ${contentToDelete.LatestResult.CompleteMessage}`, 'error');
                    }
                }
                catch (error) {
                    console.error('Error deleting template content:', error);
                }
            }
            else {
                // Not saved yet, just remove from array
                this.templateContents.splice(index, 1);
                if (this.selectedContentIndex >= this.templateContents.length) {
                    this.selectedContentIndex = Math.max(0, this.templateContents.length - 1);
                }
                // Reset adding new content state if we're deleting the new content
                if (this.isAddingNewContent && index === this.templateContents.length) {
                    this.isAddingNewContent = false;
                    this.newTemplateContent = null;
                }
            }
        }
        else {
            console.error('Invalid index for deletion:', index);
        }
    }
    get currentTemplateContent() {
        if (this.isAddingNewContent) {
            return this.newTemplateContent;
        }
        return this.templateContents[this.selectedContentIndex] || null;
    }
    get hasMultipleContents() {
        return this.templateContents.length > 1 || this.isAddingNewContent;
    }
    onContentTypeChange() {
        // Content type changes just modify the current content, no new record creation
        this.updateUnsavedChangesFlag();
    }
    onContentChange() {
        this.updateUnsavedChangesFlag();
    }
    /**
     * Updates the hasUnsavedChanges flag based on entity dirty states
     */
    updateUnsavedChangesFlag() {
        this.hasUnsavedChanges = this.templateContents.some(content => content.Dirty) ||
            this.isAddingNewContent ||
            this.record?.Dirty || false;
    }
    onTemplateTextChange(event) {
        if (this.isUpdatingEditorValue) {
            // Ignore change events when we're programmatically updating the editor
            return;
        }
        if (this.currentTemplateContent) {
            // Extract value from event - might be event.target.value or just event depending on component
            const value = typeof event === 'string' ? event : (event.target?.value || event);
            this.currentTemplateContent.TemplateText = value;
            // hasUnsavedChanges is automatically handled by entity's IsDirty flag
            this.updateUnsavedChangesFlag();
        }
    }
    /**
     * Helper method to track setTimeout calls for cleanup
     */
    setTrackedTimeout(callback, delay) {
        const timeoutId = setTimeout(() => {
            // Remove from tracking when it executes
            const index = this.activeTimeouts.indexOf(timeoutId);
            if (index > -1) {
                this.activeTimeouts.splice(index, 1);
            }
            callback();
        }, delay);
        this.activeTimeouts.push(timeoutId);
        return timeoutId;
    }
    /**
     * Manually sync the editor value without triggering change events
     */
    syncEditorValue() {
        // Use Promise.resolve() to wait for the next microtask after any pending changes
        Promise.resolve().then(() => {
            // Then tracked setTimeout for the next macrotask to ensure DOM is updated
            this.setTrackedTimeout(() => {
                if (!this.codeEditor) {
                    return;
                }
                this.isUpdatingEditorValue = true;
                const newValue = this.currentTemplateContent?.TemplateText || '';
                // Use the setValue method from mj-code-editor component
                this.codeEditor.setValue(newValue);
                this.isUpdatingEditorValue = false;
            }, 0);
        });
    }
    async saveTemplateContents() {
        try {
            // Save all template contents that have changes
            for (const content of this.templateContents) {
                content.TemplateID = this.record.ID; // Ensure FK is set
                if (content.Dirty || !content.ID) {
                    const contentResult = await content.Save();
                    if (!contentResult) {
                        console.error('Failed to save template content:', content);
                        return false;
                    }
                }
            }
            this.isAddingNewContent = false;
            this.newTemplateContent = null;
            this.updateUnsavedChangesFlag(); // Update based on current entity states
            return true;
        }
        catch (error) {
            console.error('Error saving template contents:', error);
            return false;
        }
    }
    async SaveRecord(StopEditModeAfterSave = true) {
        // Check if we need to create a new category first
        if (this.record.CategoryID && !this.categoryOptions.find(opt => opt.value === this.record.CategoryID)) {
            // Check for duplicate category names (case-insensitive, trimmed)
            if (this.isDuplicateCategory(this.record.CategoryID)) {
                const existingCategory = this.categoryOptions.find(option => option.text && option.text.trim().toLowerCase() === this.record.CategoryID?.trim().toLowerCase());
                if (existingCategory) {
                    // Use the existing category instead
                    this.record.CategoryID = existingCategory.value;
                    MJNotificationService.Instance.CreateSimpleNotification(`Category "${existingCategory.text}" already exists. Using existing category.`, 'warning');
                }
            }
            else {
                try {
                    // Create new category with trimmed name
                    const md = new Metadata();
                    const newCategory = await md.GetEntityObject('MJ: Template Categories');
                    newCategory.Name = this.record.CategoryID.trim(); // CategoryID contains the new category name, trim it
                    newCategory.UserID = this.record.UserID || md.CurrentUser.ID;
                    const saved = await newCategory.Save();
                    if (saved) {
                        // Add to options and set the ID
                        this.categoryOptions.push({
                            text: newCategory.Name,
                            value: newCategory.ID
                        });
                        this.record.CategoryID = newCategory.ID;
                    }
                    else {
                        console.error('Failed to create new category');
                        MJNotificationService.Instance.CreateSimpleNotification(`Failed to create new category. ${newCategory.LatestResult?.CompleteMessage || ''}`, 'error');
                        return false;
                    }
                }
                catch (error) {
                    console.error('Error creating new category during save:', error);
                    MJNotificationService.Instance.CreateSimpleNotification('Error creating new category during save. Please try again.', 'error');
                    return false;
                }
            }
        }
        // Call the parent save method to save the template
        // Before saving, if a new record, make sure the UserID is set
        if (!this.record.IsSaved && !this.record.UserID) {
            const md = new Metadata();
            this.record.UserID = md.CurrentUser.ID;
        }
        const templateSaved = await super.SaveRecord(StopEditModeAfterSave);
        if (templateSaved) {
            // Then save all template contents
            return await this.saveTemplateContents();
        }
        return false;
    }
    getContentTypeDisplayText(typeId) {
        if (!typeId)
            return '-';
        const option = this.contentTypeOptions.find(opt => opt.value === typeId);
        return option ? option.text : typeId;
    }
    getEditorLanguage() {
        if (!this.currentTemplateContent?.TypeID) {
            return 'jinja2'; // default to jinja2 for template syntax (compatible with Nunjucks)
        }
        const contentType = this.currentTemplateContent.TypeID.toLowerCase();
        // Map content types to CodeMirror language modes
        switch (contentType) {
            case 'html':
                return 'jinja2'; // Use jinja2 for HTML templates to get template syntax highlighting
            case 'markdown':
            case 'md':
                return 'markdown';
            case 'javascript':
            case 'js':
                return 'javascript';
            case 'css':
                return 'css';
            case 'json':
                return 'json';
            case 'xml':
                return 'xml';
            case 'sql':
                return 'sql';
            case 'text':
            case 'plain':
            default:
                return 'jinja2'; // Default to jinja2 since templates often contain template syntax
        }
    }
    isDuplicateCategory(categoryName) {
        const normalizedName = categoryName.trim().toLowerCase();
        return this.categoryOptions.some(option => option.text && option.text.trim().toLowerCase() === normalizedName);
    }
    /**
     * Test run the current template using the parameter dialog
     */
    async runTemplate() {
        if (!this.record?.IsSaved || !this.currentTemplateContent) {
            MJNotificationService.Instance.CreateSimpleNotification('Please save the template before running it.', 'warning');
            return;
        }
        // Save any unsaved changes first
        if (this.hasUnsavedChanges) {
            const saveResult = await this.SaveRecord(false); // Don't exit edit mode
            if (!saveResult) {
                MJNotificationService.Instance.CreateSimpleNotification('Failed to save template changes.', 'error');
                return;
            }
        }
        // Show the parameter dialog
        this.showParamDialog = true;
    }
    /**
     * Handle parameter dialog close
     */
    onParamDialogClose() {
        this.showParamDialog = false;
    }
    getContentTypeOptionsForContent() {
        // Always exclude "Select Type..." option for all content
        return this.contentTypeOptions.filter(option => option.value !== '');
    }
    /**
     * Handles template content changes from the shared editor
     */
    onSharedTemplateContentChange(content) {
        this.templateContents = content;
        this.updateUnsavedChangesFlag();
    }
    /**
     * Handles template run requests from the shared editor
     */
    onSharedTemplateRun(template) {
        this.runTemplate();
    }
    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJTemplateFormComponentExtended_BaseFactory; return function MJTemplateFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJTemplateFormComponentExtended_BaseFactory || (ɵMJTemplateFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJTemplateFormComponentExtended)))(__ngFactoryType__ || MJTemplateFormComponentExtended); }; })(); }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJTemplateFormComponentExtended, selectors: [["mj-templates-form"]], viewQuery: function MJTemplateFormComponentExtended_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
        } }, standalone: false, 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-area"], [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", "template-icon"], ["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"], [1, "description-text"], [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", "meta-icon"], [1, "meta-label"], [1, "meta-value"], [2, "display", "flex", "flex-direction", "column", "gap", "8px", "align-items", "flex-end"], ["title", "Run Template", 1, "run-template-btn"], [1, "configuration-sections"], [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"], [1, "active-badge"], [1, "inactive-badge"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "field-label"], ["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", "meta-icon"], ["title", "Run Template", 1, "run-template-btn", 3, "click"], [1, "fa-solid", "fa-play"], [1, "panel-title"], [1, "fa-solid", "fa-code"], [1, "count-badge"], [1, "fa-solid", "fa-cogs"], [2, "padding", "16px 0"], [3, "template", "editMode"], [1, "fa-solid", "fa-sliders"], [3, "Params", "NewRecordValues", "AllowLoad", "ShowToolbar"], [1, "fa-solid", "fa-robot"], [1, "fa-solid", "fa-file-text"]], template: function MJTemplateFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 1);
            i0.ɵɵconditionalCreate(1, MJTemplateFormComponentExtended_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.ExpansionPanelComponent, i2.ExpansionPanelTitleDirective, i3.TextBoxComponent, i3.TextAreaComponent, i3.SwitchComponent, i4.ComboBoxComponent, i5.MjFormToolbarComponent, i5.MjFormFieldComponent, i5.ExplorerEntityDataGridComponent, i6.TemplateParamDialogComponent, i7.TemplateParamsGridComponent, i8.TemplateEditorComponent], styles: [".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\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: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\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.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@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: var(--mj-bg-surface);\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: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\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: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\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 var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\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 var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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: var(--mj-status-warning);\n  color: var(--mj-text-primary);\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: var(--mj-status-success);\n  color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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    background: var(--mj-bg-surface);\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 var(--mj-border-default);\n}\n\n\n\n.template-header-area[_ngcontent-%COMP%] {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .template-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .active-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .inactive-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area[_ngcontent-%COMP%]   .meta-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n\n\n.run-template-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.configuration-sections[_ngcontent-%COMP%] {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n}\n\n.panel-title[_ngcontent-%COMP%]   .count-badge[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\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: 1px solid var(--mj-border-default) !important;\n    border-radius: 12px !important;\n    margin-bottom: 12px !important;\n    box-shadow: none !important;\n    background: var(--mj-bg-surface-card) !important;\n    overflow: hidden !important;\n}\n\n  .configuration-sections .k-expander-header {\n    background: var(--mj-bg-surface-card) !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: var(--mj-text-primary) !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: var(--mj-bg-surface-sunken) !important;\n}\n\n\n\n  .configuration-sections kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-text-inverse) !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: var(--mj-bg-surface-card) !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}"] }); }
};
MJTemplateFormComponentExtended = __decorate([
    RegisterClass(BaseFormComponent, 'MJ: Templates')
], MJTemplateFormComponentExtended);
export { MJTemplateFormComponentExtended };
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJTemplateFormComponentExtended, [{
        type: Component,
        args: [{ standalone: false, 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-area\">\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 template-icon\"></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>{{ record.Name || 'Unnamed Template' }}</h4>\n                                @if (record.IsActive) {\n                                    <span class=\"active-badge\">\n                                        <i class=\"fa-solid fa-check-circle\"></i> Active\n                                    </span>\n                                } @else {\n                                    <span class=\"inactive-badge\">\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 class=\"field-label\">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 class=\"field-label\">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 class=\"description-text\">{{ 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 meta-icon\"></i>\n                                    <span class=\"meta-label\">Category:</span>\n                                    <span class=\"meta-value\">{{ 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 meta-icon\"></i>\n                                <span class=\"meta-label\">Contents:</span>\n                                <span class=\"meta-value\">{{ 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 class=\"run-template-btn\"\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\">\n\n                <!-- Template Editor Section -->\n                <kendo-expansionpanel\n                    [expanded]=\"true\"\n                    style=\"margin-bottom: 12px;\">\n                    <ng-template kendoExpansionPanelTitleDirective>\n                        <span class=\"panel-title\">\n                            <i class=\"fa-solid fa-code\"></i>\n                            Template Editor\n                            @if (templateContents.length > 0) {\n                                <span class=\"count-badge\">\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 class=\"panel-title\">\n                            <i class=\"fa-solid fa-cogs\"></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 class=\"panel-title\">\n                                <i class=\"fa-solid fa-sliders\"></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 class=\"panel-title\">\n                                <i class=\"fa-solid fa-robot\"></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('MJ: AI Prompts','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: 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 class=\"panel-title\">\n                                <i class=\"fa-solid fa-file-text\"></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('MJ: Entity Documents','TemplateID')\"\n                                [NewRecordValues]=\"NewRecordValues('MJ: 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: var(--mj-bg-surface);\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: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\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.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@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: var(--mj-bg-surface);\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: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\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: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\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: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\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: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\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 var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\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 var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\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: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\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: var(--mj-status-warning);\n  color: var(--mj-text-primary);\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: var(--mj-status-success);\n  color: var(--mj-text-inverse);\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: var(--mj-text-muted);\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    background: var(--mj-bg-surface);\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 var(--mj-border-default);\n}\n\n/* Header section */\n.template-header-area {\n    flex-shrink: 0;\n    padding: 20px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 2px solid var(--mj-border-default);\n}\n\n.template-header-area .template-icon {\n    color: var(--mj-brand-primary);\n    font-size: 1.4em;\n}\n\n.template-header-area h4 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n    flex: 1;\n}\n\n.template-header-area .active-badge {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .inactive-badge {\n    background: color-mix(in srgb, var(--mj-text-muted) 15%, var(--mj-bg-surface));\n    color: var(--mj-text-muted);\n    border: 1px solid color-mix(in srgb, var(--mj-text-muted) 30%, transparent);\n    padding: 4px 12px;\n    border-radius: 16px;\n    font-size: 0.8em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.template-header-area .field-label {\n    display: block;\n    margin-bottom: 4px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    font-size: 0.9em;\n}\n\n.template-header-area .description-text {\n    margin: 0 0 12px 0;\n    color: var(--mj-text-muted);\n    font-size: 0.9em;\n    line-height: 1.4;\n}\n\n.template-header-area .meta-icon {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-label {\n    color: var(--mj-text-muted);\n}\n\n.template-header-area .meta-value {\n    color: var(--mj-text-secondary);\n    font-weight: 500;\n}\n\n/* Run template button */\n.run-template-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 10px 20px;\n    border-radius: 8px;\n    font-size: 0.95em;\n    font-weight: 600;\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.run-template-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Configuration sections */\n.configuration-sections {\n    flex: 1;\n    background: var(--mj-bg-surface);\n    border-top: 2px solid var(--mj-border-default);\n    padding: 16px;\n    min-height: 0;\n}\n\n/* Expansion panel titles */\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n}\n\n.panel-title i {\n    color: var(--mj-text-muted);\n}\n\n.panel-title .count-badge {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.7em;\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: 1px solid var(--mj-border-default) !important;\n    border-radius: 12px !important;\n    margin-bottom: 12px !important;\n    box-shadow: none !important;\n    background: var(--mj-bg-surface-card) !important;\n    overflow: hidden !important;\n}\n\n::ng-deep .configuration-sections .k-expander-header {\n    background: var(--mj-bg-surface-card) !important;\n    border: none !important;\n    padding: 16px 20px !important;\n    border-radius: 12px !important;\n    color: var(--mj-text-primary) !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: var(--mj-bg-surface-sunken) !important;\n}\n\n/* Expanded state header */\n::ng-deep .configuration-sections kendo-expansionpanel[aria-expanded=\"true\"] .k-expander-header {\n    background: var(--mj-brand-primary) !important;\n    color: var(--mj-text-inverse) !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: var(--mj-bg-surface-card) !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']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJTemplateFormComponentExtended, { className: "MJTemplateFormComponentExtended", filePath: "src/lib/custom/Templates/templates-form.component.ts", lineNumber: 23 }); })();
//# sourceMappingURL=templates-form.component.js.map