import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core';
import { Metadata, RunView } from '@memberjunction/core';
import { MJNotificationService } from '@memberjunction/ng-notifications';
import { TemplateEngineBase } from '@memberjunction/templates-base-types';
import { languages } from '@codemirror/language-data';
import { Subject } from 'rxjs';
import { DEFAULT_SYSTEM_PLACEHOLDERS, SYSTEM_PLACEHOLDER_CATEGORIES } from '@memberjunction/ai-core-plus';
import * as i0 from "@angular/core";
import * as i1 from "@memberjunction/ng-notifications";
import * as i2 from "@angular/forms";
import * as i3 from "@progress/kendo-angular-inputs";
import * as i4 from "@progress/kendo-angular-dropdowns";
import * as i5 from "@memberjunction/ng-code-editor";
const _c0 = ["codeEditor"];
const _forTrack0 = ($index, $item) => $item.ID || $index;
const _forTrack1 = ($index, $item) => $item.category.name;
const _forTrack2 = ($index, $item) => $item.name;
function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0, " \u2022 ");
    i0.ɵɵelementStart(1, "span", 14);
    i0.ɵɵtext(2, "Inactive");
    i0.ɵɵelementEnd();
} }
function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 15);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r4); const ɵ$index_9_r2 = i0.ɵɵnextContext().$index; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.deleteTemplateContent(ɵ$index_9_r2); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelement(1, "i", 16);
    i0.ɵɵelementEnd();
} }
function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template_div_click_0_listener() { const ɵ$index_9_r2 = i0.ɵɵrestoreView(_r1).$index; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.selectTemplateContent(ɵ$index_9_r2, false)); });
    i0.ɵɵelementStart(1, "div", 10)(2, "div", 11);
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 12);
    i0.ɵɵtext(5);
    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_6_Template, 3, 0);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Conditional_7_Template, 2, 0, "button", 13);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const content_r5 = ctx.$implicit;
    const ɵ$index_9_r2 = ctx.$index;
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵclassProp("active", ctx_r2.selectedContentIndex === ɵ$index_9_r2 && !ctx_r2.isAddingNewContent);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", content_r5.Type || "Version " + (ɵ$index_9_r2 + 1), " ");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" P:", content_r5.Priority, " ");
    i0.ɵɵadvance();
    i0.ɵɵconditional(!content_r5.IsActive ? 6 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.templateContents.length > 1 && ctx_r2.config.allowEdit ? 7 : -1);
} }
function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_4_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 7);
    i0.ɵɵelement(1, "i", 17);
    i0.ɵɵelementStart(2, "span", 18);
    i0.ɵɵtext(3, "New");
    i0.ɵɵelementEnd()();
} }
function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 19);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
    i0.ɵɵelement(1, "i", 20);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "New");
    i0.ɵɵelementEnd()();
} }
function TemplateEditorComponent_Conditional_0_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 2)(1, "div", 5);
    i0.ɵɵrepeaterCreate(2, TemplateEditorComponent_Conditional_0_Conditional_1_For_3_Template, 8, 6, "div", 6, _forTrack0);
    i0.ɵɵconditionalCreate(4, TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_4_Template, 4, 0, "div", 7);
    i0.ɵɵconditionalCreate(5, TemplateEditorComponent_Conditional_0_Conditional_1_Conditional_5_Template, 4, 0, "div", 8);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵrepeater(ctx_r2.templateContents);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.isAddingNewContent ? 4 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.config.allowEdit && !ctx_r2.isAddingNewContent ? 5 : -1);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "kendo-dropdownlist", 44);
    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template_kendo_dropdownlist_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.TypeID, $event) || (ctx_r2.currentTemplateContent.TypeID = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("valueChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template_kendo_dropdownlist_valueChange_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onContentTypeChange()); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.TypeID);
    i0.ɵɵproperty("data", ctx_r2.getContentTypeOptionsForContent())("valuePrimitive", true);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r2.getContentTypeDisplayText(ctx_r2.currentTemplateContent.TypeID), " ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "kendo-numerictextbox", 45);
    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template_kendo_numerictextbox_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.Priority, $event) || (ctx_r2.currentTemplateContent.Priority = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.Priority);
    i0.ɵɵproperty("min", 1)("step", 1)("format", "n0");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r2.currentTemplateContent.Priority || "-", " ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 33)(1, "input", 46);
    i0.ɵɵtwoWayListener("ngModelChange", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template_input_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); i0.ɵɵtwoWayBindingSet(ctx_r2.currentTemplateContent.IsActive, $event) || (ctx_r2.currentTemplateContent.IsActive = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(2, "label", 47);
    i0.ɵɵtext(3, " Active ");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.currentTemplateContent.IsActive);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 48);
    i0.ɵɵelement(1, "i", 50);
    i0.ɵɵtext(2, " Active ");
    i0.ɵɵelementEnd();
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 49);
    i0.ɵɵelement(1, "i", 51);
    i0.ɵɵtext(2, " Inactive ");
    i0.ɵɵelementEnd();
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 27);
    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_1_Template, 3, 0, "span", 48)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Conditional_2_Template, 3, 0, "span", 49);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.currentTemplateContent.IsActive ? 1 : 2);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_27_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0, " New ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtext(0);
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵtextInterpolate1(" ", ctx_r2.getContentTypeDisplayText(ctx_r2.currentTemplateContent.TypeID), " ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 40);
    i0.ɵɵelement(1, "i", 52);
    i0.ɵɵtext(2, " Unsaved changes ");
    i0.ɵɵelementEnd();
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 54);
    i0.ɵɵtext(1, " Running... ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 55);
    i0.ɵɵtext(1, " Run ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 53);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onRunTemplate()); });
    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_1_Template, 2, 0)(2, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Conditional_2_Template, 2, 0);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵproperty("disabled", ctx_r2.isRunningTemplate);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.isRunningTemplate ? 1 : 2);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 60)(1, "div", 62);
    i0.ɵɵelement(2, "i", 63);
    i0.ɵɵtext(3, " Template Syntax Quick Reference ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 64)(5, "div")(6, "div", 65)(7, "strong");
    i0.ɵɵtext(8, "Parameters:");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(9, "br");
    i0.ɵɵelementStart(10, "code");
    i0.ɵɵtext(11);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(12, "div")(13, "strong");
    i0.ɵɵtext(14, "Template Includes:");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(15, "br");
    i0.ɵɵelementStart(16, "code");
    i0.ɵɵtext(17);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(18, "div")(19, "div", 65)(20, "strong");
    i0.ɵɵtext(21, "Conditionals:");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(22, "br");
    i0.ɵɵelementStart(23, "code");
    i0.ɵɵtext(24);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(25, "div")(26, "strong");
    i0.ɵɵtext(27, "Loops:");
    i0.ɵɵelementEnd();
    i0.ɵɵelement(28, "br");
    i0.ɵɵelementStart(29, "code");
    i0.ɵɵtext(30);
    i0.ɵɵelementEnd()()()()();
} if (rf & 2) {
    i0.ɵɵadvance(11);
    i0.ɵɵtextInterpolate2("", "{{", " paramName ", "}}");
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate("{% template \"TemplateName\" %}");
    i0.ɵɵadvance(7);
    i0.ɵɵtextInterpolate2("", "{% if condition %}", " ... ", "{% endif %}");
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate2("", "{% for item in items %}", " ... ", "{% endfor %}");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 74);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template_button_click_0_listener() { const categoryGroup_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.activePlaceholderCategory = categoryGroup_r14.category.name); });
    i0.ɵɵelement(1, "i", 75);
    i0.ɵɵtext(2);
    i0.ɵɵelementStart(3, "span", 76);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const categoryGroup_r14 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(5);
    i0.ɵɵclassProp("active", ctx_r2.activePlaceholderCategory === categoryGroup_r14.category.name);
    i0.ɵɵadvance();
    i0.ɵɵclassMap("fa-solid " + categoryGroup_r14.category.icon);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", categoryGroup_r14.category.name, " ");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", categoryGroup_r14.placeholders.length, " ");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 85);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const placeholder_r16 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(placeholder_r16.description);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
    const _r15 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 79)(1, "div", 80)(2, "div")(3, "div", 81)(4, "code", 82);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "button", 83);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template_button_click_6_listener() { const placeholder_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(7); return i0.ɵɵresetView(ctx_r2.copyPlaceholder(placeholder_r16.name)); });
    i0.ɵɵelement(7, "i", 84);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(8, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Conditional_8_Template, 2, 1, "div", 85);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const placeholder_r16 = ctx.$implicit;
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate3("", "{{", " ", placeholder_r16.name, " ", "}}");
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(placeholder_r16.description ? 8 : -1);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 77);
    i0.ɵɵelement(1, "i");
    i0.ɵɵelementStart(2, "h5");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(4, "div", 78);
    i0.ɵɵrepeaterCreate(5, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_For_6_Template, 9, 4, "div", 79, _forTrack2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const categoryGroup_r17 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵclassMap("fa-solid " + categoryGroup_r17.category.icon);
    i0.ɵɵstyleProp("color", categoryGroup_r17.category.color);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(categoryGroup_r17.category.name);
    i0.ɵɵadvance(2);
    i0.ɵɵrepeater(categoryGroup_r17.placeholders);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Conditional_0_Template, 7, 5);
} if (rf & 2) {
    const categoryGroup_r17 = ctx.$implicit;
    const ctx_r2 = i0.ɵɵnextContext(5);
    i0.ɵɵconditional(ctx_r2.activePlaceholderCategory === categoryGroup_r17.category.name ? 0 : -1);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 61)(1, "div", 62);
    i0.ɵɵelement(2, "i", 58);
    i0.ɵɵtext(3, " System Placeholders Reference ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p", 66);
    i0.ɵɵtext(5, " System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time. ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "div", 67);
    i0.ɵɵrepeaterCreate(7, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_8_Template, 5, 6, "button", 68, _forTrack1);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "div", 69);
    i0.ɵɵrepeaterCreate(10, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_For_11_Template, 1, 1, null, null, _forTrack1);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "div", 70)(13, "div", 71);
    i0.ɵɵelement(14, "i", 72);
    i0.ɵɵelementStart(15, "div", 73)(16, "strong");
    i0.ɵɵtext(17, "Usage Example:");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(18, " To use a system placeholder in your template, simply include it in double curly braces. For example: ");
    i0.ɵɵelementStart(19, "code");
    i0.ɵɵtext(20);
    i0.ɵɵelementEnd()()()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(4);
    i0.ɵɵadvance(7);
    i0.ɵɵrepeater(ctx_r2.placeholderCategories);
    i0.ɵɵadvance(3);
    i0.ɵɵrepeater(ctx_r2.placeholderCategories);
    i0.ɵɵadvance(10);
    i0.ɵɵtextInterpolate4("\"Today is ", "{{", " _CURRENT_DATE ", "}}", " and the current user is ", "{{", " _USER_NAME ", "}}", "\"");
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template(rf, ctx) { if (rf & 1) {
    const _r12 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 43)(1, "div", 56)(2, "button", 57);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "syntax"); });
    i0.ɵɵelement(3, "i", 37);
    i0.ɵɵtext(4, " Template Syntax ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "button", 57);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.activeHelpTab = "placeholders"); });
    i0.ɵɵelement(6, "i", 58);
    i0.ɵɵtext(7, " System Placeholders ");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 59);
    i0.ɵɵconditionalCreate(9, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_9_Template, 31, 7, "div", 60);
    i0.ɵɵconditionalCreate(10, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Conditional_10_Template, 21, 4, "div", 61);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(2);
    i0.ɵɵclassProp("active", ctx_r2.activeHelpTab === "syntax");
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("active", ctx_r2.activeHelpTab === "placeholders");
    i0.ɵɵadvance(4);
    i0.ɵɵconditional(ctx_r2.activeHelpTab === "syntax" ? 9 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.activeHelpTab === "placeholders" ? 10 : -1);
} }
function TemplateEditorComponent_Conditional_0_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 3)(1, "div", 21)(2, "div", 22)(3, "div", 23)(4, "label", 24);
    i0.ɵɵelement(5, "i", 25);
    i0.ɵɵtext(6, " Content Type ");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(7, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_7_Template, 1, 3, "kendo-dropdownlist", 26)(8, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_8_Template, 2, 1, "div", 27);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "div", 23)(10, "label", 28);
    i0.ɵɵelement(11, "i", 29);
    i0.ɵɵtext(12, " Priority ");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(13, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_13_Template, 1, 4, "kendo-numerictextbox", 30)(14, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_14_Template, 2, 1, "div", 27);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(15, "div", 23)(16, "label", 31);
    i0.ɵɵelement(17, "i", 32);
    i0.ɵɵtext(18, " Status ");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(19, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_19_Template, 4, 1, "div", 33)(20, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_20_Template, 3, 1, "div", 27);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(21, "div", 34)(22, "div", 35)(23, "label", 36);
    i0.ɵɵelement(24, "i", 37);
    i0.ɵɵtext(25, " Template Content ");
    i0.ɵɵelementStart(26, "span", 38);
    i0.ɵɵconditionalCreate(27, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_27_Template, 1, 0)(28, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_28_Template, 1, 1);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(29, "div", 39);
    i0.ɵɵconditionalCreate(30, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_30_Template, 3, 0, "span", 40);
    i0.ɵɵconditionalCreate(31, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_31_Template, 3, 2, "button", 41);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(32, "mj-code-editor", 42, 0);
    i0.ɵɵlistener("change", function TemplateEditorComponent_Conditional_0_Conditional_2_Template_mj_code_editor_change_32_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onTemplateTextChange($event)); });
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(34, TemplateEditorComponent_Conditional_0_Conditional_2_Conditional_34_Template, 11, 6, "div", 43);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(7);
    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 7 : 8);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 13 : 14);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 19 : 20);
    i0.ɵɵadvance(7);
    i0.ɵɵclassProp("new", !ctx_r2.currentTemplateContent.ID)("existing", !!ctx_r2.currentTemplateContent.ID);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r2.currentTemplateContent.ID ? 27 : 28);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(!ctx_r2.isAddingNewContent && ctx_r2.hasUnsavedChanges ? 30 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.template.IsSaved && ctx_r2.currentTemplateContent && ctx_r2.config.showRunButton ? 31 : -1);
    i0.ɵɵadvance();
    i0.ɵɵproperty("readonly", !ctx_r2.config.allowEdit)("language", ctx_r2.getEditorLanguage())("languages", ctx_r2.supportedLanguages);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(!ctx_r2.config.compactMode ? 34 : -1);
} }
function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    const _r18 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 88);
    i0.ɵɵlistener("click", function TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.addNewTemplateContent()); });
    i0.ɵɵelement(1, "i", 20);
    i0.ɵɵtext(2, " Create First Content Version ");
    i0.ɵɵelementEnd();
} }
function TemplateEditorComponent_Conditional_0_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 4);
    i0.ɵɵelement(1, "i", 86);
    i0.ɵɵelementStart(2, "h5");
    i0.ɵɵtext(3, "No Template Content");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "Create your first template content version to get started.");
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(6, TemplateEditorComponent_Conditional_0_Conditional_3_Conditional_6_Template, 3, 0, "button", 87);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(ctx_r2.config.allowEdit ? 6 : -1);
} }
function TemplateEditorComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 1);
    i0.ɵɵconditionalCreate(1, TemplateEditorComponent_Conditional_0_Conditional_1_Template, 6, 2, "div", 2);
    i0.ɵɵconditionalCreate(2, TemplateEditorComponent_Conditional_0_Conditional_2_Template, 35, 14, "div", 3)(3, TemplateEditorComponent_Conditional_0_Conditional_3_Template, 7, 1, "div", 4);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.templateContents.length > 0 ? 1 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.currentTemplateContent ? 2 : 3);
} }
export class TemplateEditorComponent {
    constructor(notificationService) {
        this.notificationService = notificationService;
        this.template = null;
        this.config = {
            allowEdit: true,
            showRunButton: false,
            compactMode: false
        };
        this.contentChange = new EventEmitter();
        this.runTemplate = new EventEmitter();
        this.templateContents = [];
        this.selectedContentIndex = 0;
        this.isAddingNewContent = false;
        this.newTemplateContent = null;
        this.hasUnsavedChanges = false;
        this.contentTypeOptions = [];
        this.supportedLanguages = languages;
        this.isRunningTemplate = false;
        this.activeHelpTab = 'syntax';
        this.activePlaceholderCategory = '';
        // System placeholders organized by category
        this.placeholderCategories = [];
        this.codeEditor = null;
        this.isUpdatingEditorValue = false;
        this.destroy$ = new Subject();
        this._metadata = new Metadata();
        this.activeTimeouts = [];
    }
    async ngOnInit() {
        this.loadContentTypes();
        this.organizePlaceholdersByCategory();
        if (this.template) {
            await this.loadTemplateContents();
        }
    }
    async ngOnChanges(changes) {
        if (changes['template']) {
            // Template input has changed, reload contents
            if (this.template) {
                await this.loadTemplateContents();
            }
            else {
                // Template cleared, reset state
                this.templateContents = [];
                this.selectedContentIndex = 0;
                this.isAddingNewContent = false;
                this.newTemplateContent = null;
                this.hasUnsavedChanges = false;
            }
        }
    }
    organizePlaceholdersByCategory() {
        // Group placeholders by their category
        this.placeholderCategories = SYSTEM_PLACEHOLDER_CATEGORIES.map(category => {
            const categoryPlaceholders = DEFAULT_SYSTEM_PLACEHOLDERS.filter(placeholder => placeholder.category === category.name);
            return {
                category: category,
                placeholders: categoryPlaceholders
            };
        }).filter(cat => cat.placeholders.length > 0); // Only include categories that have placeholders
        // Add any uncategorized placeholders to a misc category if needed
        const categorized = DEFAULT_SYSTEM_PLACEHOLDERS.filter(p => p.category);
        const uncategorized = DEFAULT_SYSTEM_PLACEHOLDERS.filter(p => !p.category);
        if (uncategorized.length > 0) {
            this.placeholderCategories.push({
                category: {
                    name: 'Other',
                    icon: 'fa-ellipsis-h',
                    color: 'var(--mj-text-muted)'
                },
                placeholders: uncategorized
            });
        }
        // Set the first category as active
        if (this.placeholderCategories.length > 0) {
            this.activePlaceholderCategory = this.placeholderCategories[0].category.name;
        }
    }
    /**
     * Copies a placeholder to the clipboard
     */
    async copyPlaceholder(placeholderName) {
        try {
            await navigator.clipboard.writeText(`{{ ${placeholderName} }}`);
            this.notificationService.CreateSimpleNotification('Placeholder copied to clipboard!', 'success', 2000);
        }
        catch (error) {
            console.error('Failed to copy placeholder:', error);
            this.notificationService.CreateSimpleNotification('Failed to copy placeholder', 'error', 3000);
        }
    }
    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.template) {
            // Reset state first
            this.templateContents = [];
            this.selectedContentIndex = 0;
            this.isAddingNewContent = false;
            this.newTemplateContent = null;
            this.hasUnsavedChanges = false;
            if (this.template.IsSaved && this.template.ID) {
                // Load existing template contents for saved templates
                try {
                    const rv = new RunView();
                    const results = await rv.RunView({
                        EntityName: 'MJ: Template Contents',
                        ExtraFilter: `TemplateID='${this.template.ID}'`,
                        OrderBy: 'Priority ASC, __mj_CreatedAt ASC',
                        ResultType: 'entity_object'
                    });
                    this.templateContents = results.Results;
                }
                catch (error) {
                    console.error('Error loading template contents:', error);
                }
            }
            // If we have contents but no selection, select the first one
            if (this.templateContents.length > 0) {
                this.selectedContentIndex = 0;
            }
            // If no template contents exist (either new template or saved template with no content), 
            // create a default one for single-content optimization
            if (this.templateContents.length === 0) {
                await this.createDefaultTemplateContent();
            }
            // Sync editor value after loading content
            this.syncEditorValue();
            this.contentChange.emit(this.templateContents);
        }
    }
    /**
     * Public method to refresh the template editor and discard unsaved changes
     * This should be called when canceling edits to restore the original state
     */
    async refreshAndDiscardChanges() {
        await this.loadTemplateContents();
    }
    async createDefaultTemplateContent() {
        const defaultContent = await this._metadata.GetEntityObject('MJ: Template Contents');
        defaultContent.TemplateID = this.template.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();
        }
    }
    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 addNewTemplateContent() {
        if (!this.config.allowEdit)
            return;
        this.newTemplateContent = await this._metadata.GetEntityObject('MJ: Template Contents');
        this.newTemplateContent.TemplateID = this.template.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();
    }
    async deleteTemplateContent(index) {
        if (!this.config.allowEdit || index < 0 || index >= this.templateContents.length)
            return;
        const contentToDelete = this.templateContents[index];
        // Check if the entity is actually saved, not just if it has an ID
        if (contentToDelete.IsSaved) {
            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();
                    }
                    this.contentChange.emit(this.templateContents);
                }
                else {
                    MJNotificationService.Instance.CreateSimpleNotification(`Failed to delete template content. ${contentToDelete.LatestResult?.Message}`, 'error');
                }
            }
            catch (error) {
                console.error('Error deleting template content:', error);
                MJNotificationService.Instance.CreateSimpleNotification(`Error deleting template content: ${error}`, '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;
            }
            this.contentChange.emit(this.templateContents);
        }
    }
    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;
    }
    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;
            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() {
        if (!this.config.allowEdit)
            return false;
        try {
            // Save all template contents that have changes
            for (const content of this.templateContents) {
                content.TemplateID = this.template.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();
            this.contentChange.emit(this.templateContents);
            return true;
        }
        catch (error) {
            console.error('Error saving template contents:', error);
            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
        }
    }
    /**
     * Test run the current template using the parameter dialog
     */
    async onRunTemplate() {
        if (!this.template?.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.saveTemplateContents();
            if (!saveResult) {
                MJNotificationService.Instance.CreateSimpleNotification('Failed to save template changes.', 'error');
                return;
            }
        }
        // Emit the run template event
        this.runTemplate.emit(this.template);
    }
    getContentTypeOptionsForContent() {
        // Always exclude "Select Type..." option for all content
        return this.contentTypeOptions.filter(option => option.value !== '');
    }
    static { this.ɵfac = function TemplateEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TemplateEditorComponent)(i0.ɵɵdirectiveInject(i1.MJNotificationService)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TemplateEditorComponent, selectors: [["mj-template-editor"]], viewQuery: function TemplateEditorComponent_Query(rf, ctx) { if (rf & 1) {
            i0.ɵɵviewQuery(_c0, 5);
        } if (rf & 2) {
            let _t;
            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.codeEditor = _t.first);
        } }, inputs: { template: "template", config: "config" }, outputs: { contentChange: "contentChange", runTemplate: "runTemplate" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["codeEditor", ""], [1, "template-editor", 2, "height", "100%", "display", "flex", "flex-direction", "column"], [1, "content-versions-tabs"], [1, "content-editor-container"], [1, "no-content-state"], [1, "content-tabs"], [1, "content-version-tab", 3, "active"], [1, "content-version-tab", "adding-new"], ["title", "Add new template content", 1, "content-version-tab", "add-new"], [1, "content-version-tab", 3, "click"], [2, "flex", "1"], [1, "tab-label"], [1, "tab-meta"], ["type", "button", "title", "Delete this content version", 1, "delete-btn"], [1, "inactive-label"], ["type", "button", "title", "Delete this content version", 1, "delete-btn", 3, "click"], [1, "fa-solid", "fa-trash", "fa-xs"], [1, "fa-solid", "fa-plus", "text-success"], [1, "new-label"], ["title", "Add new template content", 1, "content-version-tab", "add-new", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "content-metadata-bar"], [1, "metadata-grid"], [1, "form-group"], ["for", "contentType", 1, "form-label"], [1, "fa-solid", "fa-tag"], ["name", "contentType", "textField", "text", "valueField", "value", 3, "ngModel", "data", "valuePrimitive"], [1, "form-control-plaintext"], ["for", "priority", 1, "form-label"], [1, "fa-solid", "fa-sort-numeric-up"], ["name", "priority", 3, "ngModel", "min", "step", "format"], [1, "form-label"], [1, "fa-solid", "fa-toggle-on"], [1, "form-check"], [1, "content-text-editor"], [1, "editor-header"], ["for", "templateContent", 1, "editor-label"], [1, "fa-solid", "fa-code"], [1, "content-type-badge"], [1, "editor-actions"], [1, "unsaved-indicator"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "disabled"], [1, "code-editor-wrapper", 3, "change", "readonly", "language", "languages"], [1, "template-help-section"], ["name", "contentType", "textField", "text", "valueField", "value", 3, "ngModelChange", "valueChange", "ngModel", "data", "valuePrimitive"], ["name", "priority", 3, "ngModelChange", "ngModel", "min", "step", "format"], ["type", "checkbox", "id", "isActive", "name", "isActive", 1, "form-check-input", 3, "ngModelChange", "ngModel"], ["for", "isActive", 1, "form-check-label"], [1, "badge-success"], [1, "badge-secondary"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-pause-circle"], [1, "fa-solid", "fa-circle"], ["type", "button", "title", "Test run this template", 1, "run-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-play"], [1, "help-tabs"], ["type", "button", 1, "help-tab", 3, "click"], [1, "fa-solid", "fa-at"], [1, "help-content"], [1, "syntax-help"], [1, "placeholders-help"], [1, "section-title"], [1, "fa-solid", "fa-lightbulb"], [1, "syntax-grid"], [1, "syntax-item"], [1, "placeholders-description"], [1, "category-tabs"], ["type", "button", 1, "category-tab", 3, "active"], [1, "placeholder-content"], [1, "usage-example"], [1, "usage-example-inner"], [1, "fa-solid", "fa-info-circle"], [1, "usage-example-text"], ["type", "button", 1, "category-tab", 3, "click"], [2, "font-size", "0.9em"], [1, "tab-badge"], [1, "category-header"], [1, "placeholder-grid"], [1, "placeholder-item"], [1, "placeholder-item-inner"], [1, "placeholder-name-row"], [1, "placeholder-code"], ["type", "button", "title", "Copy placeholder to clipboard", 1, "copy-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "placeholder-description"], [1, "fa-solid", "fa-file-plus"], ["type", "button", 1, "btn", "btn-primary"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function TemplateEditorComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵconditionalCreate(0, TemplateEditorComponent_Conditional_0_Template, 4, 2, "div", 1);
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.template ? 0 : -1);
        } }, dependencies: [i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.NumericTextBoxComponent, i4.DropDownListComponent, i5.CodeEditorComponent], styles: [".template-editor[_ngcontent-%COMP%] {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header[_ngcontent-%COMP%]   h6[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.param-row[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item[_ngcontent-%COMP%] {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item[_ngcontent-%COMP%]:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n\n\n.template-editor[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   kendo-textarea[_ngcontent-%COMP%], \n.template-editor[_ngcontent-%COMP%]   kendo-dropdownlist[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.template-editor[_ngcontent-%COMP%]   kendo-button[_ngcontent-%COMP%] {\n    min-width: auto;\n}\n\n\n\n.content-versions-tabs[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-meta[_ngcontent-%COMP%] {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .tab-meta[_ngcontent-%COMP%]   .inactive-label[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab[_ngcontent-%COMP%]   .delete-btn[_ngcontent-%COMP%]:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n\n\n.content-version-tab.adding-new[_ngcontent-%COMP%] {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new[_ngcontent-%COMP%]   .new-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n\n\n.content-version-tab.add-new[_ngcontent-%COMP%] {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n\n\n.content-editor-container[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n\n\n.content-metadata-bar[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check[_ngcontent-%COMP%] {\n    margin-top: 8px;\n}\n\n.form-check-label[_ngcontent-%COMP%] {\n    font-size: 0.9em;\n}\n\n.badge-success[_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: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary[_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: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n\n\n.content-text-editor[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label[_ngcontent-%COMP%] {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge[_ngcontent-%COMP%] {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing[_ngcontent-%COMP%] {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.5em;\n}\n\n.run-btn[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n\n\n.code-editor-wrapper[_ngcontent-%COMP%] {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n\n\n.template-help-section[_ngcontent-%COMP%] {\n    margin-top: 16px;\n}\n\n.help-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n\n\n.help-content[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n\n\n.syntax-help[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.syntax-help[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item[_ngcontent-%COMP%] {\n    margin-bottom: 8px;\n}\n\n.syntax-help[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n\n\n.placeholders-help[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.placeholders-help[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n\n\n.category-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab[_ngcontent-%COMP%] {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n\n\n.placeholder-content[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 1.2em;\n}\n\n.category-header[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid[_ngcontent-%COMP%] {\n    display: grid;\n    gap: 10px;\n}\n\n\n\n.placeholder-item[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item[_ngcontent-%COMP%]:hover   .copy-btn[_ngcontent-%COMP%] {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.85em;\n}\n\n.placeholder-description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n\n.usage-example[_ngcontent-%COMP%] {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n\n\n.no-content-state[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateEditorComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-template-editor', template: "@if (template) {\n  <div class=\"template-editor\" style=\"height: 100%; display: flex; flex-direction: column;\">\n    <!-- Content Versions List/Tabs -->\n    @if (templateContents.length > 0) {\n      <div class=\"content-versions-tabs\">\n        <div class=\"content-tabs\">\n          @for (content of templateContents; track content.ID || $index; let i = $index) {\n            <div class=\"content-version-tab\"\n              [class.active]=\"selectedContentIndex === i && !isAddingNewContent\"\n              (click)=\"selectTemplateContent(i, false)\">\n              <div style=\"flex: 1;\">\n                <div class=\"tab-label\">\n                  {{ content.Type || 'Version ' + (i + 1) }}\n                </div>\n                <div class=\"tab-meta\">\n                  P:{{ content.Priority }}\n                  @if (!content.IsActive) {\n                    \u2022 <span class=\"inactive-label\">Inactive</span>\n                  }\n                </div>\n              </div>\n              @if (templateContents.length > 1 && config.allowEdit) {\n                <button type=\"button\"\n                  (click)=\"deleteTemplateContent(i); $event.stopPropagation()\"\n                  class=\"delete-btn\"\n                  title=\"Delete this content version\">\n                  <i class=\"fa-solid fa-trash fa-xs\"></i>\n                </button>\n              }\n            </div>\n          }\n          @if (isAddingNewContent) {\n            <div class=\"content-version-tab adding-new\">\n              <i class=\"fa-solid fa-plus text-success\"></i>\n              <span class=\"new-label\">New</span>\n            </div>\n          }\n          <!-- Add New Content (Edit Mode Only) -->\n          @if (config.allowEdit && !isAddingNewContent) {\n            <div class=\"content-version-tab add-new\"\n              (click)=\"addNewTemplateContent()\"\n              title=\"Add new template content\">\n              <i class=\"fa-solid fa-plus\"></i>\n              <span>New</span>\n            </div>\n          }\n        </div>\n      </div>\n    }\n    <!-- Content Editor -->\n    @if (currentTemplateContent) {\n      <div class=\"content-editor-container\">\n        <!-- Content Metadata Bar -->\n        <div class=\"content-metadata-bar\">\n          <div class=\"metadata-grid\">\n            <div class=\"form-group\">\n              <label for=\"contentType\" class=\"form-label\">\n                <i class=\"fa-solid fa-tag\"></i> Content Type\n              </label>\n              @if (config.allowEdit) {\n                <kendo-dropdownlist [(ngModel)]=\"currentTemplateContent.TypeID\"\n                  name=\"contentType\"\n                  [data]=\"getContentTypeOptionsForContent()\"\n                  textField=\"text\"\n                  valueField=\"value\"\n                  [valuePrimitive]=\"true\"\n                  (valueChange)=\"onContentTypeChange()\">\n                </kendo-dropdownlist>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label for=\"priority\" class=\"form-label\">\n                <i class=\"fa-solid fa-sort-numeric-up\"></i> Priority\n              </label>\n              @if (config.allowEdit) {\n                <kendo-numerictextbox [(ngModel)]=\"currentTemplateContent.Priority\"\n                  name=\"priority\"\n                  [min]=\"1\"\n                  [step]=\"1\"\n                  [format]=\"'n0'\">\n                </kendo-numerictextbox>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  {{ currentTemplateContent.Priority || '-' }}\n                </div>\n              }\n            </div>\n            <div class=\"form-group\">\n              <label class=\"form-label\">\n                <i class=\"fa-solid fa-toggle-on\"></i> Status\n              </label>\n              @if (config.allowEdit) {\n                <div class=\"form-check\">\n                  <input type=\"checkbox\"\n                    id=\"isActive\"\n                    class=\"form-check-input\"\n                    [(ngModel)]=\"currentTemplateContent.IsActive\"\n                    name=\"isActive\">\n                  <label class=\"form-check-label\" for=\"isActive\">\n                    Active\n                  </label>\n                </div>\n              } @else {\n                <div class=\"form-control-plaintext\">\n                  @if (currentTemplateContent.IsActive) {\n                    <span class=\"badge-success\">\n                      <i class=\"fa-solid fa-check-circle\"></i> Active\n                    </span>\n                  } @else {\n                    <span class=\"badge-secondary\">\n                      <i class=\"fa-solid fa-pause-circle\"></i> Inactive\n                    </span>\n                  }\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n        <!-- Content Text Editor -->\n        <div class=\"content-text-editor\">\n          <div class=\"editor-header\">\n            <label for=\"templateContent\" class=\"editor-label\">\n              <i class=\"fa-solid fa-code\"></i> Template Content\n              <span class=\"content-type-badge\"\n                [class.new]=\"!currentTemplateContent.ID\"\n                [class.existing]=\"!!currentTemplateContent.ID\">\n                @if (!currentTemplateContent.ID) {\n                  New\n                } @else {\n                  {{ getContentTypeDisplayText(currentTemplateContent.TypeID) }}\n                }\n              </span>\n            </label>\n            <div class=\"editor-actions\">\n              @if (!isAddingNewContent && hasUnsavedChanges) {\n                <span class=\"unsaved-indicator\">\n                  <i class=\"fa-solid fa-circle\"></i>\n                  Unsaved changes\n                </span>\n              }\n              @if (template.IsSaved && currentTemplateContent && config.showRunButton) {\n                <button type=\"button\"\n                  class=\"run-btn\"\n                  [disabled]=\"isRunningTemplate\"\n                  (click)=\"onRunTemplate()\"\n                  title=\"Test run this template\">\n                  @if (isRunningTemplate) {\n                    <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                    Running...\n                  } @else {\n                    <i class=\"fa-solid fa-play\"></i>\n                    Run\n                  }\n                </button>\n              }\n            </div>\n          </div>\n          <mj-code-editor\n            #codeEditor\n            (change)=\"onTemplateTextChange($event)\"\n            [readonly]=\"!config.allowEdit\"\n            [language]=\"getEditorLanguage()\"\n            [languages]=\"supportedLanguages\"\n            class=\"code-editor-wrapper\">\n          </mj-code-editor>\n          <!-- Template Help Section with Tabs -->\n          @if (!config.compactMode) {\n            <div class=\"template-help-section\">\n              <!-- Tab Navigation -->\n              <div class=\"help-tabs\">\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'syntax'\"\n                  (click)=\"activeHelpTab = 'syntax'\">\n                  <i class=\"fa-solid fa-code\"></i> Template Syntax\n                </button>\n                <button type=\"button\"\n                  class=\"help-tab\"\n                  [class.active]=\"activeHelpTab === 'placeholders'\"\n                  (click)=\"activeHelpTab = 'placeholders'\">\n                  <i class=\"fa-solid fa-at\"></i> System Placeholders\n                </button>\n              </div>\n              <!-- Tab Content -->\n              <div class=\"help-content\">\n                <!-- Template Syntax Tab -->\n                @if (activeHelpTab === 'syntax') {\n                  <div class=\"syntax-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-lightbulb\"></i> Template Syntax Quick Reference\n                    </div>\n                    <div class=\"syntax-grid\">\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Parameters:</strong><br>\n                          <code>{{'{{'}} paramName {{'}}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Template Includes:</strong><br>\n                          <code>{{'{% template \"TemplateName\" %}'}}</code>\n                        </div>\n                      </div>\n                      <div>\n                        <div class=\"syntax-item\">\n                          <strong>Conditionals:</strong><br>\n                          <code>{{'{% if condition %}'}} ... {{'{% endif %}'}}</code>\n                        </div>\n                        <div>\n                          <strong>Loops:</strong><br>\n                          <code>{{'{% for item in items %}'}} ... {{'{% endfor %}'}}</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n                <!-- System Placeholders Tab -->\n                @if (activeHelpTab === 'placeholders') {\n                  <div class=\"placeholders-help\">\n                    <div class=\"section-title\">\n                      <i class=\"fa-solid fa-at\"></i> System Placeholders Reference\n                    </div>\n                    <p class=\"placeholders-description\">\n                      System placeholders are automatically available in all AI prompt templates. Simply use them in your template text and they will be replaced with their current values at execution time.\n                    </p>\n                    <!-- Category Sub-tabs -->\n                    <div class=\"category-tabs\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        <button type=\"button\"\n                          class=\"category-tab\"\n                          [class.active]=\"activePlaceholderCategory === categoryGroup.category.name\"\n                          (click)=\"activePlaceholderCategory = categoryGroup.category.name\">\n                          <i [class]=\"'fa-solid ' + categoryGroup.category.icon\" style=\"font-size: 0.9em;\"></i>\n                          {{ categoryGroup.category.name }}\n                          <span class=\"tab-badge\">\n                            {{ categoryGroup.placeholders.length }}\n                          </span>\n                        </button>\n                      }\n                    </div>\n                    <!-- Active Category Content -->\n                    <div class=\"placeholder-content\">\n                      @for (categoryGroup of placeholderCategories; track categoryGroup.category.name) {\n                        @if (activePlaceholderCategory === categoryGroup.category.name) {\n                          <div class=\"category-header\">\n                            <i [class]=\"'fa-solid ' + categoryGroup.category.icon\"\n                              [style.color]=\"categoryGroup.category.color\"></i>\n                            <h5>{{ categoryGroup.category.name }}</h5>\n                          </div>\n                          <div class=\"placeholder-grid\">\n                            @for (placeholder of categoryGroup.placeholders; track placeholder.name) {\n                              <div class=\"placeholder-item\">\n                                <div class=\"placeholder-item-inner\">\n                                  <div>\n                                    <div class=\"placeholder-name-row\">\n                                      <code class=\"placeholder-code\">{{'{{'}} {{ placeholder.name }} {{'}}'}}</code>\n                                      <button type=\"button\"\n                                        class=\"copy-btn\"\n                                        (click)=\"copyPlaceholder(placeholder.name)\"\n                                        title=\"Copy placeholder to clipboard\">\n                                        <i class=\"fa-solid fa-copy\"></i>\n                                      </button>\n                                    </div>\n                                    @if (placeholder.description) {\n                                      <div class=\"placeholder-description\">{{ placeholder.description }}</div>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        }\n                      }\n                    </div>\n                    <!-- Usage Example -->\n                    <div class=\"usage-example\">\n                      <div class=\"usage-example-inner\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        <div class=\"usage-example-text\">\n                          <strong>Usage Example:</strong> To use a system placeholder in your template, simply include it in double curly braces.\n                          For example: <code>\"Today is {{'{{'}} _CURRENT_DATE {{'}}'}} and the current user is {{'{{'}} _USER_NAME {{'}}'}}\"</code>\n                        </div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else {\n      <!-- No Content State -->\n      <div class=\"no-content-state\">\n        <i class=\"fa-solid fa-file-plus\"></i>\n        <h5>No Template Content</h5>\n        <p>Create your first template content version to get started.</p>\n        @if (config.allowEdit) {\n          <button type=\"button\"\n            (click)=\"addNewTemplateContent()\"\n            class=\"btn btn-primary\">\n            <i class=\"fa-solid fa-plus\"></i> Create First Content Version\n          </button>\n        }\n      </div>\n    }\n  </div>\n}\n", styles: [".template-editor {\n    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n}\n\n.section-header h6 {\n    font-size: 0.9em;\n}\n\n.param-row:hover {\n    background-color: var(--mj-bg-surface-card) !important;\n}\n\n.content-item {\n    transition: box-shadow 0.2s ease;\n}\n\n.content-item:hover {\n    box-shadow: 0 2px 4px var(--mj-shadow-sm);\n}\n\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n}\n\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n}\n\n.badge {\n    display: inline-block;\n    font-size: 0.7em;\n    line-height: 1;\n}\n\n/* Kendo UI overrides for better integration */\n.template-editor kendo-textbox,\n.template-editor kendo-textarea,\n.template-editor kendo-dropdownlist {\n    width: 100%;\n}\n\n.template-editor kendo-button {\n    min-width: auto;\n}\n\n/* Content version tabs */\n.content-versions-tabs {\n    margin-bottom: 16px;\n    border-bottom: 2px solid var(--mj-border-default);\n    padding-bottom: 8px;\n}\n\n.content-tabs {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.content-version-tab {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 6px;\n    cursor: pointer;\n    background: var(--mj-bg-surface);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.content-version-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab .tab-label {\n    font-weight: 600;\n    font-size: 0.85em;\n    color: var(--mj-text-secondary);\n}\n\n.content-version-tab .tab-meta {\n    font-size: 0.7em;\n    color: var(--mj-text-muted);\n}\n\n.content-version-tab .tab-meta .inactive-label {\n    color: var(--mj-status-error);\n}\n\n.content-version-tab .delete-btn {\n    background: none;\n    border: none;\n    color: var(--mj-status-error);\n    padding: 4px;\n    border-radius: 3px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.content-version-tab .delete-btn:hover {\n    background-color: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n/* New content tab (adding state) */\n.content-version-tab.adding-new {\n    border-color: var(--mj-status-success);\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.content-version-tab.adding-new .new-label {\n    font-weight: 600;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Add new content button */\n.content-version-tab.add-new {\n    border: 1px dashed var(--mj-status-success);\n    background: var(--mj-bg-surface-card);\n}\n\n.content-version-tab.add-new:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 8%, var(--mj-bg-surface));\n    border-style: solid;\n}\n\n.content-version-tab.add-new i {\n    color: var(--mj-status-success);\n    font-size: 0.75em;\n}\n\n.content-version-tab.add-new span {\n    font-weight: 500;\n    color: var(--mj-status-success);\n    font-size: 0.85em;\n}\n\n/* Content editor container */\n.content-editor-container {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    overflow: hidden;\n}\n\n/* Content metadata bar */\n.content-metadata-bar {\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n    padding: 16px 20px;\n}\n\n.metadata-grid {\n    display: grid;\n    grid-template-columns: 2fr 1fr 1fr auto;\n    gap: 20px;\n    align-items: end;\n}\n\n.form-group {\n    margin: 0;\n}\n\n.form-label {\n    margin-bottom: 4px;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.form-control-plaintext {\n    font-size: 0.9em;\n    padding: 4px 0;\n}\n\n.form-check {\n    margin-top: 8px;\n}\n\n.form-check-label {\n    font-size: 0.9em;\n}\n\n.badge-success {\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: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n.badge-secondary {\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: 3px 8px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    font-weight: 600;\n}\n\n/* Content text editor area */\n.content-text-editor {\n    flex: 1;\n    padding: 20px;\n    display: flex;\n    flex-direction: column;\n}\n\n.editor-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 12px;\n}\n\n.editor-label {\n    margin: 0;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.content-type-badge {\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 0.75em;\n    color: var(--mj-text-inverse);\n}\n\n.content-type-badge.new {\n    background: var(--mj-status-success);\n}\n\n.content-type-badge.existing {\n    background: var(--mj-text-muted);\n}\n\n.editor-actions {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.unsaved-indicator {\n    color: var(--mj-status-warning);\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.unsaved-indicator i {\n    font-size: 0.5em;\n}\n\n.run-btn {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    padding: 6px 12px;\n    border-radius: 4px;\n    font-size: 0.85em;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    cursor: pointer;\n}\n\n.run-btn:hover {\n    background: var(--mj-brand-primary-hover);\n}\n\n/* Code editor border */\n.code-editor-wrapper {\n    flex: 1;\n    height: 350px;\n    border: 1px solid var(--mj-border-strong);\n    border-radius: 4px;\n}\n\n/* Help section tabs */\n.template-help-section {\n    margin-top: 16px;\n}\n\n.help-tabs {\n    display: flex;\n    border-bottom: 2px solid var(--mj-border-default);\n    margin-bottom: 0;\n}\n\n.help-tab {\n    padding: 8px 16px;\n    border: none;\n    background: none;\n    cursor: pointer;\n    font-size: 0.9em;\n    font-weight: 600;\n    color: var(--mj-text-muted);\n    border-bottom: 3px solid transparent;\n    transition: all 0.2s;\n}\n\n.help-tab.active {\n    color: var(--mj-status-success);\n    border-bottom-color: var(--mj-status-success);\n}\n\n/* Help content area */\n.help-content {\n    padding: 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-top: none;\n    border-radius: 0 0 4px 4px;\n}\n\n/* Syntax help */\n.syntax-help {\n    font-size: 0.85em;\n}\n\n.syntax-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.syntax-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 16px;\n}\n\n.syntax-item {\n    margin-bottom: 8px;\n}\n\n.syntax-help code {\n    background: var(--mj-bg-surface);\n    padding: 4px 6px;\n    border-radius: 3px;\n    display: inline-block;\n    margin-top: 4px;\n    color: var(--mj-text-primary);\n}\n\n/* Placeholders help */\n.placeholders-help {\n    font-size: 0.85em;\n}\n\n.placeholders-help .section-title {\n    font-weight: 600;\n    margin-bottom: 12px;\n    color: var(--mj-status-success);\n}\n\n.placeholders-description {\n    margin-bottom: 16px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n/* Category tabs */\n.category-tabs {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n}\n\n.category-tab {\n    padding: 6px 14px;\n    border: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n    border-radius: 20px;\n    cursor: pointer;\n    font-size: 0.85em;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: all 0.2s;\n    color: var(--mj-text-muted);\n}\n\n.category-tab.active {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.category-tab .tab-badge {\n    background: color-mix(in srgb, var(--mj-text-primary) 10%, transparent);\n    color: inherit;\n    padding: 2px 6px;\n    border-radius: 10px;\n    font-size: 0.75em;\n    margin-left: 4px;\n}\n\n/* Placeholder content area */\n.placeholder-content {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 16px;\n}\n\n.category-header i {\n    font-size: 1.2em;\n}\n\n.category-header h5 {\n    margin: 0;\n    color: var(--mj-text-primary);\n    font-weight: 600;\n}\n\n.placeholder-grid {\n    display: grid;\n    gap: 10px;\n}\n\n/* Placeholder item */\n.placeholder-item {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    position: relative;\n    transition: all 0.2s;\n    max-width: 800px;\n}\n\n.placeholder-item:hover {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.placeholder-item:hover .copy-btn {\n    opacity: 1 !important;\n}\n\n.placeholder-item-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.placeholder-name-row {\n    display: inline-flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.placeholder-code {\n    color: var(--mj-status-error);\n    font-weight: 600;\n    font-size: 0.95em;\n}\n\n.copy-btn {\n    opacity: 0;\n    transition: opacity 0.2s;\n    background: none;\n    border: none;\n    padding: 4px 8px;\n    cursor: pointer;\n    color: var(--mj-brand-primary);\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n}\n\n.copy-btn:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.copy-btn i {\n    font-size: 0.85em;\n}\n\n.placeholder-description {\n    color: var(--mj-text-muted);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Usage example box */\n.usage-example {\n    margin-top: 20px;\n    padding: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n    border-radius: 6px;\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.usage-example-inner {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n}\n\n.usage-example i {\n    color: var(--mj-brand-primary);\n    margin-top: 2px;\n}\n\n.usage-example-text {\n    flex: 1;\n    font-size: 0.85em;\n    color: var(--mj-brand-primary);\n    line-height: 1.5;\n}\n\n.usage-example code {\n    background: var(--mj-bg-surface);\n    padding: 2px 4px;\n    border-radius: 3px;\n}\n\n/* No content state */\n.no-content-state {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface-card);\n    border: 2px dashed var(--mj-border-default);\n    border-radius: 8px;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-content-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    color: var(--mj-text-muted);\n    opacity: 0.6;\n}\n\n.no-content-state h5 {\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.no-content-state p {\n    color: var(--mj-text-muted);\n    margin-bottom: 20px;\n}\n"] }]
    }], () => [{ type: i1.MJNotificationService }], { template: [{
            type: Input
        }], config: [{
            type: Input
        }], contentChange: [{
            type: Output
        }], runTemplate: [{
            type: Output
        }], codeEditor: [{
            type: ViewChild,
            args: ['codeEditor']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateEditorComponent, { className: "TemplateEditorComponent", filePath: "src/lib/shared/components/template-editor.component.ts", lineNumber: 24 }); })();
//# sourceMappingURL=template-editor.component.js.map