@dataclouder/ngx-lessons 0.1.4 → 0.1.6

package/fesm2022/dataclouder-ngx-lessons.mjs

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Pipe, InjectionToken, inject, Input, Component, ChangeDetectionStrategy, signal, EventEmitter, Output, Injectable, effect, ViewChildren, input, Renderer2, ViewContainerRef, computed, ViewChild, ChangeDetectorRef, output } from '@angular/core';
+import { Pipe, InjectionToken, inject, Input, Component, ChangeDetectionStrategy, signal, EventEmitter, Output, Injectable, effect, ViewChildren, input, viewChild, Renderer2, ViewContainerRef, computed, ChangeDetectorRef, output } from '@angular/core';
 import { DatePipe, NgComponentOutlet, KeyValuePipe, CommonModule, SlicePipe } from '@angular/common';
-import * as i1$3 from '@angular/router';
-import { RouterModule, ActivatedRoute, Router } from '@angular/router';
-import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, UiStateService, EModelQuality, LoadingBarService, PromptService, DcExtensionsViewerComponent, DcLearnableViewerComponent, DcAuditableViewerComponent, DcManageableViewerComponent, DcReactionsViewerComponent, HttpCoreService, PaginationBase, EntityBaseFormComponent, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
+import * as i1$4 from '@angular/router';
+import { RouterModule, ActivatedRoute, RouterOutlet, RouterLink } from '@angular/router';
+import { EntityCommunicationService, EntityBaseListComponent, DCFilterBarComponent, QuickTableComponent, TOAST_ALERTS_TOKEN, EModelQuality, UiStateService, LoadingBarService, LangDescTranslation, FormUtilsService, EntityBaseFormComponent, PromptService, DcExtensionsViewerComponent, DcLearnableViewerComponent, DcAuditableViewerComponent, DcReactionsViewerComponent, DcManageableFormComponent, DcLearnableFormComponent, HttpCoreService, PaginationBase, getSupportedLanguageOptions } from '@dataclouder/ngx-core';
 import * as i1 from '@angular/forms';
 import { FormBuilder, FormControl, FormArray, FormsModule, ReactiveFormsModule, UntypedFormControl, FormGroup, Validators } from '@angular/forms';
 import * as i1$1 from 'primeng/button';
@@ -22,24 +22,25 @@ import * as i4$1 from 'primeng/tag';
 import { TagModule } from 'primeng/tag';
 import * as i2$1 from 'primeng/speeddial';
 import { SpeedDialModule } from 'primeng/speeddial';
-import * as i3$1 from 'primeng/card';
+import * as i1$2 from 'primeng/card';
 import { CardModule } from 'primeng/card';
-import * as i1$2 from 'primeng/paginator';
+import { UserService } from '@dataclouder/ngx-users';
+import * as i1$3 from 'primeng/paginator';
 import { PaginatorModule } from 'primeng/paginator';
-import { toSignal } from '@angular/core/rxjs-interop';
-import { map } from 'rxjs';
 import BalloonEditor from '@ckeditor/ckeditor5-build-balloon-block';
-import * as i3$2 from '@ckeditor/ckeditor5-angular';
+import * as i3$1 from '@ckeditor/ckeditor5-angular';
 import { CKEditorModule } from '@ckeditor/ckeditor5-angular';
-import * as i5$1 from 'primeng/splitter';
+import * as i5$1 from 'primeng/selectbutton';
+import { SelectButtonModule } from 'primeng/selectbutton';
+import * as i6$1 from 'primeng/splitter';
 import { SplitterModule } from 'primeng/splitter';
-import * as i2$3 from 'primeng/tooltip';
+import * as i7 from 'primeng/tooltip';
 import { TooltipModule } from 'primeng/tooltip';
 import { ResolutionType, AspectType, AssetsLoaderComponent, CropperComponentModal } from '@dataclouder/ngx-cloud-storage';
 import { TextEngines, ConversationType, USER_DATA_EXCHANGE, SystemPromptType, ChatRole, EvalResultStringDefinition, EDoActionType, ConditionOperator, ConditionType, ConversationEvents, ChatEventType, DCChatComponent, CONVERSATION_AI_TOKEN } from '@dataclouder/ngx-agent-cards';
 import * as i2$2 from 'primeng/drawer';
 import { DrawerModule } from 'primeng/drawer';
-import * as i7 from 'primeng/dialog';
+import { MarkdownComponent, MarkdownService } from 'ngx-markdown';
 import { DialogModule } from 'primeng/dialog';
 import TurndownService from 'turndown';
 import { marked } from 'marked';
@@ -47,8 +48,14 @@ import * as i5 from 'primeng/inputgroup';
 import { InputGroupModule } from 'primeng/inputgroup';
 import * as i6 from 'primeng/divider';
 import { DividerModule } from 'primeng/divider';
-import * as i2$4 from 'primeng/api';
+import * as i2$3 from 'primeng/api';
+import { MessageService } from 'primeng/api';
 import { TableModule } from 'primeng/table';
+import * as i3$2 from 'primeng/panel';
+import { PanelModule } from 'primeng/panel';
+import * as i5$2 from 'primeng/progressspinner';
+import { ProgressSpinnerModule } from 'primeng/progressspinner';
+import { ToastModule } from 'primeng/toast';
 import * as i3$3 from 'primeng/textarea';
 import { TextareaModule } from 'primeng/textarea';
 import { ChipModule } from 'primeng/chip';
@@ -71,25 +78,6 @@ const LangCodeDescriptionEs = {
     fr: 'Frances',
     ja: 'Japonés',
 };
-class LangDescTranslationPipe {
-    transform(value, lang) {
-        if (lang === 'es') {
-            return LangCodeDescriptionEs[value];
-        }
-        else {
-            return LangCodeDescription[value];
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslationPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslationPipe, isStandalone: true, name: "langDesc" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LangDescTranslationPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'langDesc',
-                    standalone: true,
-                }]
-        }] });
 class FlagLanguagePipe {
     transform(lang) {
         if (lang === 'en') {
@@ -627,6 +615,7 @@ var EventCard;
 })(EventCard || (EventCard = {}));
 class DcLessonCardComponent {
     constructor() {
+        this.userService = inject(UserService);
         this.showOptions = true;
         this.cardHeight = '200px';
         this.onAction = new EventEmitter();
@@ -639,18 +628,18 @@ class DcLessonCardComponent {
         ];
     }
     ngOnInit() {
-        this.coverUrl =
-            this.lesson?.banner?.url || this.lesson?.metadata?.banner?.url || this.lesson?.media?.images?.[0]?.url || 'assets/background/default-background.webp';
+        this.coverUrl = this.lesson?.assets?.banner?.url || this.lesson?.media?.images?.[0]?.url || 'assets/background/default-background.webp';
+        console.log(this.lesson);
     }
     eventCard(eventType) {
         this.onAction.emit({ action: eventType, item: this.lesson });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\n            @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if (!lesson.metadata?.isPublished) {\n            <p-tag severity=\"danger\" value=\"No publicada\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DcLessonCardComponent, isStandalone: true, selector: "dc-lesson-card", inputs: { lesson: "lesson", showOptions: "showOptions", cardHeight: "cardHeight" }, outputs: { onAction: "onAction" }, ngImport: i0, template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: PopoverModule }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DcLessonCardComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            <span class=\"level-tag\">Nivel {{ lesson.level }}</span>\n            @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if (!lesson.metadata?.isPublished) {\n            <p-tag severity=\"danger\" value=\"No publicada\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"] }]
+            args: [{ selector: 'dc-lesson-card', standalone: true, imports: [DatePipe, ButtonModule, PopoverModule, SpeedDialModule, CardModule, TagModule], template: "<div class=\"card-container\">\n  @if(showOptions){\n  <p-speeddial\n    class=\"dial-button\"\n    [model]=\"items\"\n    [radius]=\"70\"\n    type=\"quarter-circle\"\n    direction=\"down-left\"\n    [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true, raised: true }\"\n    [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n  }\n  <p-card>\n    <div class=\"lesson-card\" [style.height]=\"cardHeight\">\n      <div class=\"photo\">\n        <img [src]=\"coverUrl\" alt=\"\" />\n      </div>\n\n      <span class=\"date\">{{ lesson.createdAt | date : 'dd/MM/yyyy' }}</span>\n\n      <div class=\"description\">\n        <h1>{{ lesson.title || lesson.metadata?.title || 'No title available' }}</h1>\n        <p>{{ lesson.description || lesson.metadata?.description || 'No description available' }}</p>\n        <div class=\"card-footer\">\n          <div class=\"status-tags\">\n            @if (lesson.learnable?.level){\n            <p-tag>Nivel {{ lesson.learnable?.level }}</p-tag>\n            } @if (lesson.taken?.status == 'passed') {\n            <p-tag severity=\"success\" value=\"Tomada\" [rounded]=\"true\" />\n            } @if (lesson.taken?.status == 'failed') {\n            <p-tag severity=\"danger\" value=\"Fallida\" [rounded]=\"true\" />\n            } @if (lesson.taken) {\n            <p-tag severity=\"success\" value=\"Tomada \uD83D\uDCD6\" [rounded]=\"true\" />\n            } @if ( userService.isAdmin()) {\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.isPublic ? 'P\u00FAblica' : 'No p\u00FAblica'\" [rounded]=\"true\" />\n            <p-tag severity=\"contrast\" [value]=\"lesson.manageable?.status\" [rounded]=\"true\" />\n            }\n          </div>\n\n          <div style=\"position: absolute; bottom: 0px; right: 0px\">\n            <p-button label=\"Tomar lecci\u00F3n\" (onClick)=\"eventCard(eventType.Select)\" severity=\"primary\"> </p-button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </p-card>\n</div>\n", styles: [".card-container{position:relative;margin-bottom:20px;margin-left:10px}.dial-button{position:absolute;top:10px;right:20px;z-index:10}.lesson-card{border-radius:.5rem;height:100%}.lesson-card .photo{position:absolute;inset:0;z-index:1}.lesson-card .photo img{width:100%;height:100%;object-fit:cover;object-position:center}.lesson-card .photo:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,rgb(0,0,0) 50%,var(--p-primary-color) 100%);opacity:.4;z-index:2;pointer-events:none}.description{position:relative;z-index:2;color:#fff;height:100%;display:flex;flex-direction:column}.description h1{margin-top:0;margin-bottom:.5rem;font-size:1.5rem;font-weight:900;text-shadow:1px 1px 2px rgba(0,0,0,.7)}.description p{margin-bottom:1rem;flex-grow:1;font-weight:500;text-shadow:1px 1px 2px rgba(0,0,0,.9)}.date{position:absolute;top:1rem;left:1rem;z-index:3;background-color:#000000b3;color:#fff;padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.card-footer{display:flex;justify-content:space-between;align-items:center;margin-top:auto}.status-tags{display:flex;gap:.5rem}.status-tags .level-tag,.status-tags .status-tag{padding:.3rem .6rem;border-radius:.25rem;font-size:.8rem}.status-tags .level-tag{background-color:#fff3}.status-tags .status-tag.success{background-color:#28a745b3}.status-tags .status-tag.danger{background-color:#dc3545b3}\n"] }]
         }], propDecorators: { lesson: [{
                 type: Input
             }], showOptions: [{
@@ -679,12 +668,16 @@ class DefaultLessonsService extends EntityCommunicationService {
             filters.returnProps = {
                 level: 1,
                 title: 1,
+                name: 1,
                 description: 1,
                 createdDate: 1,
-                banner: 1,
-                metadata: 1,
+                banner: 1, // deprecated
+                metadata: 1, // deprecated
+                manageable: 1,
+                assets: 1,
+                learnable: 1,
                 appExtensions: 1,
-                media: 1,
+                media: 1, // deprecated
             };
         }
         return this.query(filters);
@@ -774,6 +767,9 @@ class DCLessonListComponent extends EntityBaseListComponent {
             title: 1,
             description: 1,
             media: 1,
+            manageable: 1,
+            learnable: 1,
+            assets: 1,
             _id: 1,
             id: 1,
         };
@@ -845,11 +841,11 @@ class DCLessonListComponent extends EntityBaseListComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { customCardComponent: "customCardComponent", customFilters: "customFilters" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonListComponent, isStandalone: true, selector: "dc-lesson-list", inputs: { customCardComponent: "customCardComponent", customFilters: "customFilters" }, viewQueries: [{ propertyName: "outlets", predicate: ["outlet"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, NgComponentOutlet, QuickTableComponent, PaginatorModule], template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}\n"] }]
+            args: [{ selector: 'dc-lesson-list', standalone: true, imports: [RouterModule, DCFilterBarComponent, NgComponentOutlet, QuickTableComponent, PaginatorModule], template: "<dc-filter-bar [options]=\"filterBarOptions\" [customFilters]=\"customFilters\" (onFilterAction)=\"applyFilterBarEvent($event)\" (onNew)=\"onNew()\"></dc-filter-bar>\n@if(viewType() === 'table') {\n\n<app-quick-table [tableData]=\"items()\" (onAction)=\"doAction($event)\"></app-quick-table>\n\n} @else {\n<div class=\"lesson-list-container\">\n  @if (items()?.length > 0) { @for (lesson of items(); track lesson._id) {\n  <ng-container\n    #outlet=\"ngComponentOutlet\"\n    [ngComponentOutlet]=\"cardComponent\"\n    [ngComponentOutletInputs]=\"{\n      lesson: lesson,\n      showOptions: true\n    }\">\n  </ng-container>\n\n  } } @else {\n  <p>No se encontraron lecciones disponibles</p>\n  }\n</div>\n}\n\n<p-paginator\n  class=\"paginator-container\"\n  currentPageReportTemplate=\"{{ totalRecords }} lecciones\"\n  [showCurrentPageReport]=\"true\"\n  (onPageChange)=\"onPageChange($event)\"\n  [totalRecords]=\"totalRecords\"\n  [first]=\"first\"\n  [rows]=\"rows\"\n  [rowsPerPageOptions]=\"[10, 20, 30]\">\n</p-paginator>\n", styles: [":host{display:flex;flex-direction:column;height:100%}.lesson-list-container{padding:1.5rem;flex:1;overflow-y:auto;min-height:0}@media (max-width: 768px){.lesson-list-container{margin-top:1rem;padding:0rem}}p-paginator{margin-top:auto;padding:.5rem 1rem}.paginator-container{background:transparent}\n"] }]
         }], ctorParameters: () => [], propDecorators: { customCardComponent: [{
                 type: Input
             }], customFilters: [{
@@ -868,6 +864,216 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
             args: [{ selector: 'dc-lesson-form', standalone: true, imports: [ReactiveFormsModule], template: "<div class=\"lesson-form-container\">\n  <h2>Lesson Form</h2>\n  <p>Esto es dentro del componente de la leccion</p>\n  <!-- Form implementation will go here -->\n</div>\n", styles: [".lesson-form-container{padding:1rem}\n"] }]
         }] });
 
+// TODO: check LessonComponentBuilders in lessons.clases.ts for origianl implementation
+const DynamicComponentBuilders = {
+    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
+};
+const DynamicComponents = {
+    [LessonComponentEnum.Speaker]: SpeakerComponent,
+};
+class DynamicComponentsService {
+    constructor() {
+        this._dynamicComponentBuilders = { ...DynamicComponentBuilders };
+        this._dynamicComponents = { ...DynamicComponents };
+    }
+    registerCustomComponent(component, name) {
+        // this._dynamicComponentBuilders[name || component.name] = component;
+        this._dynamicComponents[name || component.name] = component;
+    }
+    registerCustomComponentBuilder(component, name) {
+        this._dynamicComponentBuilders[name || component.name] = component;
+    }
+    getDynamicComponentBuilders(type) {
+        return this._dynamicComponentBuilders[type];
+    }
+    getDynamicComponentClass(type) {
+        return this._dynamicComponents[type];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class LessonRendererService {
+    constructor() {
+        this.dynamicComponentsService = inject(DynamicComponentsService);
+        this.toastrService = inject(TOAST_ALERTS_TOKEN);
+        this.components = {};
+        this.mainForm = new FormGroup({});
+    }
+    renderLesson(lessonData, viewContainerRef, dynamicLessonElement, renderer) {
+        this.clearLessonRendering(dynamicLessonElement);
+        console.log('Rendering lesson:', lessonData.id);
+        const { htmlContent, components } = this.parseAndCreateComponents(lessonData, viewContainerRef);
+        this.components = components;
+        this.aggregateFormControls(this.components);
+        dynamicLessonElement.innerHTML = htmlContent;
+        this.injectComponentsIntoDom(this.components, renderer);
+        return this.components;
+    }
+    clearLessonRendering(dynamicLessonElement) {
+        Object.values(this.components).forEach((compRef) => compRef.destroy());
+        this.components = {};
+        this.mainForm = new FormGroup({});
+        if (dynamicLessonElement) {
+            dynamicLessonElement.innerHTML = '';
+        }
+    }
+    parseAndCreateComponents(lessonData, viewContainerRef) {
+        const r1 = new RegExp('~(.+?)~', 'g');
+        let count = 0;
+        const createdComponents = {};
+        const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
+            const componentName = `dynamicComp${count}`;
+            count++;
+            const componentRef = this.createComponentReferenceWithJson(jsonCoded, lessonData, viewContainerRef);
+            if (!componentRef) {
+                console.error(`Failed to create component for: ${jsonCoded}`);
+                return '<!-- component creation failed -->';
+            }
+            createdComponents[componentName] = componentRef;
+            return `<span id="${componentName}"></span>`;
+        });
+        return { htmlContent, components: createdComponents };
+    }
+    createComponentReferenceWithJson(json, currentLesson, viewContainerRef) {
+        try {
+            let lessonCodedConfig = JSON.parse(json);
+            if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
+                const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
+                if (foundConfig) {
+                    lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
+                }
+            }
+            const LessonClass = this.dynamicComponentsService.getDynamicComponentClass(lessonCodedConfig.component);
+            if (!LessonClass) {
+                console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
+                return null;
+            }
+            const componentRef = viewContainerRef.createComponent(LessonClass);
+            if (lessonCodedConfig.inputs) {
+                for (const key in lessonCodedConfig.inputs) {
+                    if (lessonCodedConfig.inputs.hasOwnProperty(key)) {
+                        componentRef.instance[key] = lessonCodedConfig.inputs[key];
+                    }
+                }
+            }
+            if (lessonCodedConfig.settings) {
+                componentRef.instance.config = lessonCodedConfig;
+            }
+            return componentRef;
+        }
+        catch (error) {
+            console.error(`Error processing component JSON: ${json}`, error);
+            return null;
+        }
+    }
+    aggregateFormControls(components) {
+        const newFormControls = {};
+        Object.entries(components).forEach(([name, componentRef]) => {
+            if (componentRef.instance?.control instanceof FormControl) {
+                newFormControls[name] = componentRef.instance.control;
+                newFormControls[name].addValidators(Validators.required);
+            }
+        });
+        this.mainForm = new FormGroup(newFormControls);
+    }
+    injectComponentsIntoDom(components, renderer) {
+        Object.entries(components).forEach(([name, componentRef]) => {
+            const elementRef = document.getElementById(name);
+            if (elementRef) {
+                this.addComponentToNode(componentRef, elementRef, renderer);
+            }
+            else {
+                console.warn(`Placeholder element with ID '${name}' not found in the DOM.`);
+            }
+        });
+    }
+    addComponentToNode(componentRef, nodeDOM, renderer) {
+        renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
+    }
+    evaluateForms() {
+        this.mainForm.markAllAsTouched();
+        if (!this.mainForm.valid) {
+            Object.keys(this.mainForm.controls).forEach((controlName) => {
+                if (this.components[controlName]?.instance?.validate) {
+                    this.components[controlName].instance.validate();
+                }
+            });
+            this.toastrService.warn({ subtitle: 'Por favor completa todos los ejercicios', title: 'Incompleto' });
+            return null;
+        }
+        const rates = { correct: 0, incorrect: 0, score: 0 };
+        Object.keys(this.mainForm.controls).forEach((controlName) => {
+            const instance = this.components[controlName]?.instance;
+            if (instance && typeof instance.evaluate === 'function') {
+                try {
+                    const result = instance.evaluate();
+                    if (result) {
+                        rates.correct++;
+                    }
+                    else {
+                        rates.incorrect++;
+                    }
+                }
+                catch (err) {
+                    console.error('Error during evaluation for component:', controlName, instance, err);
+                    rates.incorrect++;
+                }
+            }
+        });
+        const totalQuestions = rates.correct + rates.incorrect;
+        rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0;
+        const status = rates.score >= 0.7 ? 'passed' : 'failed';
+        if (status === 'passed') {
+            this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
+        }
+        else {
+            this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
+        }
+        return { rates, takenLesson: null };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonRendererService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+const EnglishEvaluationSkill = `
+You are a virtual professor for the Polilan English learning app. Your primary role is to evaluate a student's English conversational performance.
+
+You will be provided with two pieces of information for each evaluation:
+1.  **The student's English level:** This will be one of "Beginner", "Intermediate", or "Advanced".
+2.  **A conversation transcript:** This will be the dialogue between the Student and an Assistant, with each turn clearly labeled (e.g., "Student or User: ...", "Assistant: ...").
+
+Your sole task is to evaluate the *Student's* contribution to the conversation. **Do NOT evaluate the Assistant's turns.**
+
+Evaluate the student's performance based on the following aspects, *always keeping the student's provided level in mind*  and adjusting your expectations accordingly specially with beginners give them credits just for trying:
+
+*   **Grammar & Syntax:** Evaluate accuracy and complexity *relative to the expected level*. (Beginners: focus on basic accuracy; Advanced: expect complex structures with high accuracy).
+*   **Vocabulary & Usage:** Evaluate the range and appropriateness of words used *relative to the expected level*. (Beginners: focus on using basic words correctly; Advanced: expect varied and idiomatic language).
+*   **Cohesion & Coherence:** Evaluate how well their turns connect and make sense within the conversation *relative to the expected level*. (Beginners: focus on simple, clear responses; Advanced: expect logical flow and detailed contributions).
+*   **Task Completion/Relevance:** Evaluate how effectively they participate and respond to the conversation's goals or topics *relative to the expected level*.
+
+Assign a rating from 0 to 3 based on how well the student performs *compared to the typical expectations for their provided level*:
+
+*   **0: Bad** - Performance is significantly below what is expected for this level. Many errors impede communication.
+*   **1: Not Bad** - Performance is below expectations for this level, but communication is sometimes possible despite frequent errors.
+*   **2: Good** - Performance meets expectations for this level, demonstrating solid understanding and usage with only occasional minor errors.
+*   **3: Very Good** - Performance exceeds expectations for this level, demonstrating a strong command and potential to progress quickly.
+
+Provide detailed, constructive feedback that explains the rating. Point out specific strengths and areas for improvement based on their performance *at their given level*. Use examples from the dialog if helpful. Maintain a supportive, encouraging, and educational tone appropriate for a virtual professor guiding a student at their specific stage.
+`;
+
 // Re-define or import constants if they are not exported from the component file
 const DEFAULT_LESSON_AGENT_CARD = {
     conversationSettings: {
@@ -949,7 +1155,13 @@ ${userInformationPrompt}`;
     async generateConversationSettingsForLesson(lesson, settings) {
         // TODO: Consolidate user fetching logic if possible, or ensure consistency
         const baseLang = this.userService.getUserDataExchange()?.baseLang || 'en';
-        const lessonText = this.lessonsService.extractTextFromHtml(lesson.textCoded);
+        let lessonText = '';
+        if (lesson.textCoded) {
+            lessonText = this.lessonsService.extractTextFromHtml(lesson.textCoded);
+        }
+        else {
+            lessonText = lesson.markdown;
+        }
         const userInformationPrompt = this.userService.getUserDataInformation();
         let scenario = this._buildScenarioPrompt(lessonText, userInformationPrompt);
         if (settings.additionalPrompt) {
@@ -981,157 +1193,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 }]
         }] });
 
-const EnglishEvaluationSkill = `
-You are a virtual professor for the Polilan English learning app. Your primary role is to evaluate a student's English conversational performance.
-
-You will be provided with two pieces of information for each evaluation:
-1.  **The student's English level:** This will be one of "Beginner", "Intermediate", or "Advanced".
-2.  **A conversation transcript:** This will be the dialogue between the Student and an Assistant, with each turn clearly labeled (e.g., "Student or User: ...", "Assistant: ...").
-
-Your sole task is to evaluate the *Student's* contribution to the conversation. **Do NOT evaluate the Assistant's turns.**
-
-Evaluate the student's performance based on the following aspects, *always keeping the student's provided level in mind*  and adjusting your expectations accordingly specially with beginners give them credits just for trying:
-
-*   **Grammar & Syntax:** Evaluate accuracy and complexity *relative to the expected level*. (Beginners: focus on basic accuracy; Advanced: expect complex structures with high accuracy).
-*   **Vocabulary & Usage:** Evaluate the range and appropriateness of words used *relative to the expected level*. (Beginners: focus on using basic words correctly; Advanced: expect varied and idiomatic language).
-*   **Cohesion & Coherence:** Evaluate how well their turns connect and make sense within the conversation *relative to the expected level*. (Beginners: focus on simple, clear responses; Advanced: expect logical flow and detailed contributions).
-*   **Task Completion/Relevance:** Evaluate how effectively they participate and respond to the conversation's goals or topics *relative to the expected level*.
-
-Assign a rating from 0 to 3 based on how well the student performs *compared to the typical expectations for their provided level*:
-
-*   **0: Bad** - Performance is significantly below what is expected for this level. Many errors impede communication.
-*   **1: Not Bad** - Performance is below expectations for this level, but communication is sometimes possible despite frequent errors.
-*   **2: Good** - Performance meets expectations for this level, demonstrating solid understanding and usage with only occasional minor errors.
-*   **3: Very Good** - Performance exceeds expectations for this level, demonstrating a strong command and potential to progress quickly.
-
-Provide detailed, constructive feedback that explains the rating. Point out specific strengths and areas for improvement based on their performance *at their given level*. Use examples from the dialog if helpful. Maintain a supportive, encouraging, and educational tone appropriate for a virtual professor guiding a student at their specific stage.
-`;
-
-// TODO: check LessonComponentBuilders in lessons.clases.ts for origianl implementation
-const DynamicComponentBuilders = {
-    [LessonComponentEnum.Speaker]: SpeakerBuilderComponent,
-};
-const DynamicComponents = {
-    [LessonComponentEnum.Speaker]: SpeakerComponent,
-};
-class DynamicComponentsService {
-    constructor() {
-        this._dynamicComponentBuilders = { ...DynamicComponentBuilders };
-        this._dynamicComponents = { ...DynamicComponents };
-    }
-    registerCustomComponent(component, name) {
-        // this._dynamicComponentBuilders[name || component.name] = component;
-        this._dynamicComponents[name || component.name] = component;
-    }
-    registerCustomComponentBuilder(component, name) {
-        this._dynamicComponentBuilders[name || component.name] = component;
-    }
-    getDynamicComponentBuilders(type) {
-        return this._dynamicComponentBuilders[type];
-    }
-    getDynamicComponentClass(type) {
-        return this._dynamicComponents[type];
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DynamicComponentsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }] });
-
-class DCLessonRendererComponent {
+class LessonConversationService {
     constructor() {
-        // --- Signal Inputs ---
-        this.lessonInput = input(...(ngDevMode ? [undefined, { debugName: "lessonInput" }] : [])); // Input signal for lesson object
-        this.lessonIdInput = input(...(ngDevMode ? [undefined, { debugName: "lessonIdInput" }] : [])); // Input signal for lesson ID
-        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : []));
-        // --- Outputs ---
-        this.wordClicked = new EventEmitter(); // New output event
-        // --- Services  ---
-        this.renderer = inject(Renderer2);
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.toastrService = inject(TOAST_ALERTS_TOKEN);
-        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.lessonAIService = inject(LessonAIService); // Inject the new service
+        this.lessonAIService = inject(LessonAIService);
         this.userDataExchange = inject(USER_DATA_EXCHANGE);
-        this.dynamicComponentsService = inject(DynamicComponentsService);
-        this.uiStateService = inject(UiStateService);
-        // --- State Signals ---
-        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // Internal lesson state signal
-        // chatVisible = this.uiStateService.chatDrawerVisible; // Signal for chat visibility
-        this.agentMasterLesson = signal(undefined, ...(ngDevMode ? [{ debugName: "agentMasterLesson" }] : [])); // Signal for agent card
-        this.evaluatorAgentCard = signal(undefined, ...(ngDevMode ? [{ debugName: "evaluatorAgentCard" }] : [])); // Signal for evaluator card
         this.conversationSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationSettings" }] : []));
-        this.evalAgentTask = signal(undefined, ...(ngDevMode ? [{ debugName: "evalAgentTask" }] : [])); // Signal for evaluator card
-        // backgroundTasks: Record<ConversationEvents | string, SimpleAgentTask> = {};
         this.conversationFlow = signal(undefined, ...(ngDevMode ? [{ debugName: "conversationFlow" }] : []));
-        // --- Computed Signals ---
-        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url, ...(ngDevMode ? [{ debugName: "imageCover" }] : [])); // Computed signal for imageCover
-        // --- Properties ---
-        this.components = {};
-        this.mainForm = new FormGroup({});
-        this.previousTextCoded = undefined; // Store previous value
-        // Effect to fetch lesson data if ID is provided and lesson object isn't
-        effect(async () => {
-            const lessonInput = this.lessonInput();
-            const lessonId = this.lessonIdInput();
-            if (lessonInput) {
-                this.lesson.set(lessonInput); // Use input lesson directly
-            }
-            else if (lessonId && !this.lesson()) {
-                // Fetch only if ID exists and internal lesson is not set
-                console.log(`[Renderer] Effect 1: Fetching lesson ${lessonId}`);
-                try {
-                    // Consider adding a loading state signal here
-                    const fetchedLesson = await this.lessonsService.getLesson(lessonId);
-                    this.lesson.set(fetchedLesson);
-                    console.log('Fetched lesson:', fetchedLesson);
-                }
-                catch (error) {
-                    console.error(`Failed to fetch lesson with ID: ${lessonId}`, error);
-                    this.toastrService.error({ subtitle: 'Failed to load lesson data.', title: 'Error' });
-                    this.lesson.set(undefined); // Reset lesson on error
-                }
-                finally {
-                    // Reset loading state signal here
-                }
-            }
-            else if (!lessonInput && !lessonId) {
-                // Handle case where neither input is provided, maybe clear the lesson?
-                this.lesson.set(undefined);
-            }
-        }, { allowSignalWrites: true }); // Allow signal writes inside effect
-        // Effect to render the lesson only when textCoded value actually changes
-        effect(() => {
-            const currentLesson = this.lesson(); // Read the lesson signal
-            const newTextCoded = currentLesson?.textCoded; // Get the current textCoded value
-            this.evalAgentTask.set({
-                systemPrompt: EnglishEvaluationSkill,
-                model: { provider: 'google' },
-                task: `Please evaluate the user conversation student data is: \n ${this.userDataExchange.getUserDataInformation()}`,
-                expectedResponseType: EvalResultStringDefinition,
-            });
-            // Quick fix to only render on changes textCode not all the lesson
-            if (newTextCoded !== this.previousTextCoded) {
-                if (newTextCoded !== undefined && newTextCoded !== null && currentLesson) {
-                    this._renderLesson(currentLesson);
-                }
-                else {
-                    this._clearLessonRendering();
-                }
-                // Update the stored previous value *after* comparison and action
-                this.previousTextCoded = newTextCoded;
-            }
-            else {
-                console.log('[Renderer] textCoded has NOT changed. Skipping render/clear.');
-            }
-        });
+        this.evalAgentTask = signal(undefined, ...(ngDevMode ? [{ debugName: "evalAgentTask" }] : []));
     }
-    ngOnInit() {
-        // TODO: esto es mal, el goal no puede venir aqui sino pasado desde el componente que inicie la lección
+    initializeConversationFlow() {
+        this.evalAgentTask.set({
+            systemPrompt: EnglishEvaluationSkill,
+            model: { provider: 'google' },
+            task: `Please evaluate the user conversation student data is: \n ${this.userDataExchange.getUserDataInformation()}`,
+            expectedResponseType: EvalResultStringDefinition,
+        });
         this.conversationFlow.set({
             goal: {
                 enabled: true,
@@ -1181,175 +1257,151 @@ class DCLessonRendererComponent {
             ],
         });
     }
-    // --- Rendering Logic ---
-    _clearLessonRendering() {
-        // Destroy previously created dynamic components
-        Object.values(this.components).forEach((compRef) => compRef.destroy());
-        this.components = {};
-        // Clear the form
-        this.mainForm = new FormGroup({});
-        // Clear the HTML content
-        if (this.dynamicLesson?.nativeElement) {
-            this.dynamicLesson.nativeElement.innerHTML = '';
-        }
-    }
-    _renderLesson(lessonData) {
-        this._clearLessonRendering(); // Clear previous state first
-        console.log('Rendering lesson:', lessonData.id);
-        // 1) Parse textCoded, create components, and build HTML structure
-        const { htmlContent, components } = this._parseAndCreateComponents(lessonData);
-        this.components = components;
-        // 2) Aggregate form controls from created components
-        this._aggregateFormControls(this.components);
-        // 3) Set the innerHTML of the target element
-        this.dynamicLesson.nativeElement.innerHTML = htmlContent;
-        // 4) Inject the component views into the DOM
-        this._injectComponentsIntoDom(this.components);
-    }
-    _parseAndCreateComponents(lessonData) {
-        const r1 = new RegExp('~(.+?)~', 'g');
-        let count = 0;
-        const createdComponents = {};
-        const htmlContent = lessonData.textCoded.replace(r1, (_matching, jsonCoded) => {
-            const componentName = `dynamicComp${count}`;
-            count++;
-            const componentRef = this._createComponentReferenceWithJson(jsonCoded, lessonData);
-            if (!componentRef) {
-                console.error(`Failed to create component for: ${jsonCoded}`);
-                return '<!-- component creation failed -->'; // Placeholder in HTML
+    async startAI(lesson, settings) {
+        console.log('Requesting agent cards from LessonAIService...');
+        try {
+            const conversationSettings = await this.lessonAIService.generateConversationSettingsForLesson(lesson, settings);
+            if (conversationSettings) {
+                this.conversationSettings.set(conversationSettings);
+                console.log('Agent cards received and set.');
+                return conversationSettings;
             }
-            createdComponents[componentName] = componentRef;
-            return `<span id="${componentName}"></span>`; // Return span placeholder
-        });
-        return { htmlContent, components: createdComponents };
+            else {
+                console.error('Failed to generate agent cards (service returned null).');
+                return null;
+            }
+        }
+        catch (error) {
+            console.error('Error generating agent cards:', error);
+            return null;
+        }
     }
-    _aggregateFormControls(components) {
-        const newFormControls = {};
-        Object.entries(components).forEach(([name, componentRef]) => {
-            // Check if the instance has a control property that is a FormControl
-            if (componentRef.instance?.control instanceof FormControl) {
-                newFormControls[name] = componentRef.instance.control;
-                // Add required validator (consider making this configurable via component config?)
-                newFormControls[name].addValidators(Validators.required);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonConversationService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DCLessonRendererComponent {
+    constructor() {
+        // --- Signal Inputs ---
+        this.lessonInput = input(...(ngDevMode ? [undefined, { debugName: "lessonInput" }] : [])); // Input signal for lesson object
+        this.lessonIdInput = input(...(ngDevMode ? [undefined, { debugName: "lessonIdInput" }] : [])); // Input signal for lesson ID
+        this.settings = input(...(ngDevMode ? [undefined, { debugName: "settings" }] : []));
+        // --- Outputs ---
+        this.wordClicked = new EventEmitter(); // New output event
+        // --- View Childs ---
+        this.dynamicLesson = viewChild('dynamicLesson', ...(ngDevMode ? [{ debugName: "dynamicLesson" }] : []));
+        // --- Services  ---
+        this.renderer = inject(Renderer2);
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.toastrService = inject(TOAST_ALERTS_TOKEN);
+        this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
+        this.uiStateService = inject(UiStateService);
+        this.lessonRendererService = inject(LessonRendererService);
+        this.lessonConversationService = inject(LessonConversationService);
+        // --- State Signals ---
+        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // Internal lesson state signal
+        // --- Computed Signals ---
+        this.imageCover = computed(() => this.lesson()?.media?.images?.find((img) => img.type === 'cover')?.url, ...(ngDevMode ? [{ debugName: "imageCover" }] : [])); // Computed signal for imageCover
+        // --- Properties ---
+        this.components = {};
+        this.mainForm = new FormGroup({});
+        this.previousTextCoded = undefined; // Store previous value
+        // Effect to fetch lesson data if ID is provided and lesson object isn't
+        effect(async () => {
+            const lessonInput = this.lessonInput();
+            const lessonId = this.lessonIdInput();
+            if (lessonInput) {
+                this.lesson.set(lessonInput); // Use input lesson directly
             }
-        });
-        this.mainForm = new FormGroup(newFormControls); // Create the typed FormGroup
-    }
-    _injectComponentsIntoDom(components) {
-        Object.entries(components).forEach(([name, componentRef]) => {
-            const elementRef = document.getElementById(name); // Find the placeholder span
-            if (elementRef) {
-                this._addComponentToNode(componentRef, elementRef);
+            else if (lessonId && !this.lesson()) {
+                // Fetch only if ID exists and internal lesson is not set
+                console.log(`[Renderer] Effect 1: Fetching lesson ${lessonId}`);
+                try {
+                    // Consider adding a loading state signal here
+                    const fetchedLesson = await this.lessonsService.getLesson(lessonId);
+                    this.lesson.set(fetchedLesson);
+                    console.log('Fetched lesson:', fetchedLesson);
+                }
+                catch (error) {
+                    console.error(`Failed to fetch lesson with ID: ${lessonId}`, error);
+                    this.toastrService.error({ subtitle: 'Failed to load lesson data.', title: 'Error' });
+                    this.lesson.set(undefined); // Reset lesson on error
+                }
+                finally {
+                    // Reset loading state signal here
+                }
             }
-            else {
-                console.warn(`Placeholder element with ID '${name}' not found in the DOM.`);
+            else if (!lessonInput && !lessonId) {
+                // Handle case where neither input is provided, maybe clear the lesson?
+                this.lesson.set(undefined);
             }
-        });
-    }
-    _addComponentToNode(componentRef, nodeDOM) {
-        this.renderer.appendChild(nodeDOM, componentRef.location.nativeElement);
-    }
-    _createComponentReferenceWithJson(json, currentLesson) {
-        try {
-            let lessonCodedConfig = JSON.parse(json);
-            //
-            // Attempt to find pre-configured component data in the lesson object by ID
-            if (lessonCodedConfig.id && currentLesson?.dynamicComponents[lessonCodedConfig.id]) {
-                const foundConfig = currentLesson.dynamicComponents[lessonCodedConfig.id];
-                if (foundConfig) {
-                    // Merge configurations: Start with coded, override/add with found lesson config
-                    lessonCodedConfig = { ...lessonCodedConfig, ...foundConfig };
-                }
+        }, { allowSignalWrites: true }); // Allow signal writes inside effect
+        // Effect to render the lesson only when textCoded value actually changes
+        effect(() => {
+            const dynamicLessonEl = this.dynamicLesson();
+            const currentLesson = this.lesson(); // Read the lesson signal
+            if (!dynamicLessonEl || !currentLesson) {
+                return;
             }
-            const LessonClass = this.dynamicComponentsService.getDynamicComponentClass(lessonCodedConfig.component);
-            if (!LessonClass) {
-                console.error(`Component class not found for type: ${lessonCodedConfig.component}. JSON: ${json}`);
-                return null; // Return null if class doesn't exist
+            if (currentLesson?.format === 'markdown') {
+                // If markdown content exists, we clear any dynamically rendered components
+                // and prevent the textCoded logic from running.
+                if (this.previousTextCoded) {
+                    this.lessonRendererService.clearLessonRendering(dynamicLessonEl.nativeElement);
+                    this.mainForm = this.lessonRendererService.mainForm;
+                    this.previousTextCoded = undefined;
+                }
+                return;
             }
-            // Create component instance
-            const componentRef = this.viewContainerRef.createComponent(LessonClass);
-            if (lessonCodedConfig.inputs) {
-                for (const key in lessonCodedConfig.inputs) {
-                    if (lessonCodedConfig.inputs.hasOwnProperty(key)) {
-                        componentRef.instance[key] = lessonCodedConfig.inputs[key];
-                    }
+            const newTextCoded = currentLesson?.textCoded; // Get the current textCoded value
+            // Quick fix to only render on changes textCode not all the lesson
+            if (newTextCoded !== this.previousTextCoded) {
+                if (newTextCoded !== undefined && newTextCoded !== null && currentLesson) {
+                    this.components = this.lessonRendererService.renderLesson(currentLesson, this.viewContainerRef, dynamicLessonEl.nativeElement, this.renderer);
+                    this.mainForm = this.lessonRendererService.mainForm;
+                }
+                else {
+                    this.lessonRendererService.clearLessonRendering(dynamicLessonEl.nativeElement);
+                    this.mainForm = this.lessonRendererService.mainForm;
                 }
+                // Update the stored previous value *after* comparison and action
+                this.previousTextCoded = newTextCoded;
             }
-            // i think i can improve this to pass only settings not all config, Assign the configuration to the component instance
-            // settings data i defined in form interface, config will be all the component data including id and component type
-            if (lessonCodedConfig.settings) {
-                componentRef.instance.config = lessonCodedConfig;
+            else {
+                console.log('[Renderer] textCoded has NOT changed. Skipping render/clear.');
             }
-            return componentRef;
-        }
-        catch (error) {
-            console.error(`Error processing component JSON: ${json}`, error);
-            return null; // Return null on JSON parsing or other errors
-        }
+        });
+    }
+    ngOnInit() {
+        this.lessonConversationService.initializeConversationFlow();
     }
-    // --- Evaluation Logic ---
     async evaluateForms() {
-        this.mainForm.markAllAsTouched(); // Mark all controls for validation feedback
-        if (!this.mainForm.valid) {
-            // Trigger validation feedback on individual components visually if needed
-            Object.keys(this.mainForm.controls).forEach((controlName) => {
-                if (this.components[controlName]?.instance?.validate) {
-                    this.components[controlName].instance.validate(); // Assuming validate method handles visual feedback
-                }
-            });
-            this.toastrService.warn({ subtitle: 'Por favor completa todos los ejercicios', title: 'Incompleto' });
+        const result = this.lessonRendererService.evaluateForms();
+        if (!result) {
             return;
         }
-        const rates = { correct: 0, incorrect: 0, score: 0 };
-        // Evaluate each component associated with a form control
-        Object.keys(this.mainForm.controls).forEach((controlName) => {
-            const instance = this.components[controlName]?.instance;
-            // Check if the instance has an evaluate method (duck typing is okay here)
-            if (instance && typeof instance.evaluate === 'function') {
-                try {
-                    const result = instance.evaluate();
-                    if (result) {
-                        rates.correct++;
-                    }
-                    else {
-                        rates.incorrect++;
-                    }
-                }
-                catch (err) {
-                    console.error('Error during evaluation for component:', controlName, instance, err);
-                    rates.incorrect++; // Count errors as incorrect
-                }
-            }
-        });
-        const totalQuestions = rates.correct + rates.incorrect;
-        rates.score = totalQuestions > 0 ? rates.correct / totalQuestions : 0; // Avoid division by zero
-        const status = rates.score >= 0.7 ? 'passed' : 'failed'; // Use >= for threshold
         const currentLesson = this.lesson();
         if (!currentLesson) {
             console.error('Cannot save result, lesson data is missing.');
             this.toastrService.error({ subtitle: 'Cannot save result, lesson data missing.', title: 'Error' });
             return;
         }
-        const takenLesson = { id: currentLesson.id, goalCompleted: null, score: rates.score, status: status, lastAccess: new Date() };
+        const status = result.rates.score >= 0.7 ? 'passed' : 'failed';
+        const takenLesson = {
+            id: currentLesson.id,
+            goalCompleted: null,
+            score: result.rates.score,
+            status: status,
+            lastAccess: new Date(),
+        };
         console.log('Lesson evaluation result:', takenLesson);
         // TODO: Re-implement saving the taken lesson status via lessonService
-        // try {
-        //   await this.lessonService.saveTakenLesson(takenLesson);
-        //   if (status === 'passed') {
-        //     this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Se guardó tu progreso.`, title: '¡Muy bien!' });
-        //   } else {
-        //     this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
-        //   }
-        // } catch (error) {
-        //   console.error('Failed to save taken lesson', error);
-        //   this.toastrService.error({ subtitle: 'No se pudo guardar tu progreso.', title: 'Error' });
-        // }
-        if (status === 'passed') {
-            this.toastrService.success({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%.`, title: '¡Muy bien!' });
-        }
-        else {
-            this.toastrService.warn({ subtitle: `Calificación: ${Math.round(rates.score * 100)}%. Revisa tus respuestas.`, title: 'Casi lo logras' });
-        }
     }
     // --- AI Chat Logic ---
     async startAI() {
@@ -1359,23 +1411,12 @@ class DCLessonRendererComponent {
             this.toastrService.error({ subtitle: 'Lesson data not available.', title: 'Cannot Start Chat' });
             return;
         }
-        console.log('Requesting agent cards from LessonAIService...');
-        try {
-            // Call the service to get the agent cards
-            const conversationSettings = await this.lessonAIService.generateConversationSettingsForLesson(currentLesson, this.settings());
-            if (conversationSettings) {
-                this.conversationSettings.set(conversationSettings);
-                this.uiStateService.chatDrawerVisible.set(true);
-                console.log('Agent cards received and set.');
-            }
-            else {
-                console.error('Failed to generate agent cards (service returned null).');
-                this.toastrService.error({ subtitle: 'Could not prepare the AI chat session.', title: 'Error' });
-            }
+        const conversationSettings = await this.lessonConversationService.startAI(currentLesson, this.settings());
+        if (conversationSettings) {
+            this.uiStateService.chatDrawerVisible.set(true);
         }
-        catch (error) {
-            console.error('Error generating agent cards:', error);
-            this.toastrService.error({ subtitle: 'An error occurred while preparing the AI chat.', title: 'Error' });
+        else {
+            this.toastrService.error({ subtitle: 'Could not prepare the AI chat session.', title: 'Error' });
         }
     }
     onVisibleChange(isVisible) {
@@ -1408,16 +1449,13 @@ class DCLessonRendererComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, static: true }], ngImport: i0, template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"conversationFlow()\"\n    [conversationSettings]=\"conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonRendererComponent, isStandalone: true, selector: "dc-lesson-renderer", inputs: { lessonInput: { classPropertyName: "lessonInput", publicName: "lessonInput", isSignal: true, isRequired: false, transformFunction: null }, lessonIdInput: { classPropertyName: "lessonIdInput", publicName: "lessonIdInput", isSignal: true, isRequired: false, transformFunction: null }, settings: { classPropertyName: "settings", publicName: "settings", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { wordClicked: "wordClicked" }, viewQueries: [{ propertyName: "dynamicLesson", first: true, predicate: ["dynamicLesson"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (lesson()?.format === 'markdown') {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCChatComponent, selector: "dc-chat", inputs: ["chatUserSettings", "conversationSettings", "conversationFlow", "agentCard", "parseDict"], outputs: ["chatEvent", "goalCompleted"] }, { kind: "ngmodule", type: DrawerModule }, { kind: "component", type: i2$2.Drawer, selector: "p-drawer", inputs: ["appendTo", "blockScroll", "style", "styleClass", "ariaCloseLabel", "autoZIndex", "baseZIndex", "modal", "closeButtonProps", "dismissible", "showCloseIcon", "closeOnEscape", "transitionOptions", "visible", "position", "fullScreen", "header", "maskStyle", "closable"], outputs: ["onShow", "onHide", "visibleChange"] }, { kind: "component", type: MarkdownComponent, selector: "markdown, [markdown]", inputs: ["data", "src", "disableSanitizer", "inline", "clipboard", "clipboardButtonComponent", "clipboardButtonTemplate", "emoji", "katex", "katexOptions", "mermaid", "mermaidOptions", "lineHighlight", "line", "lineOffset", "lineNumbers", "start", "commandLine", "filterOutput", "host", "prompt", "output", "user"], outputs: ["error", "load", "ready"] }, { kind: "pipe", type: KeyValuePipe, name: "keyvalue" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonRendererComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule], template: "<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"conversationFlow()\"\n    [conversationSettings]=\"conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"] }]
+            args: [{ selector: 'dc-lesson-renderer', standalone: true, imports: [KeyValuePipe, ButtonModule, DCChatComponent, DrawerModule, MarkdownComponent], template: "@if (lesson()?.format === 'markdown') {\n<h3>Mostrando markdown</h3>\n\n<markdown>\n  {{ lesson()?.markdown }}\n</markdown>\n} @else {\n<h5>Lesson not available</h5>\n<div>\n  <div #dynamicLesson class=\"targetclass\">\n    <ng-template #target></ng-template>\n  </div>\n</div>\n}\n\n<br />\n<div style=\"display: flex; gap: 10px\">\n  @if ((mainForm.controls | keyvalue)?.length) {\n  <div>\n    <p-button label=\"Calificar Lecci\u00F3n\" icon=\"pi pi-check-circle\" (click)=\"evaluateForms()\" [rounded]=\"true\"></p-button>\n  </div>\n  }\n\n  <p-button icon=\"pi pi-verified\" [rounded]=\"true\" (click)=\"startAI()\" label=\"Repasar con IA\" />\n</div>\n<br /><br />\n\n@if(uiStateService?.chatDrawerVisible()) {\n<p-drawer\n  header=\"Conversation\"\n  [visible]=\"uiStateService?.chatDrawerVisible()\"\n  (visibleChange)=\"onVisibleChange($event)\"\n  position=\"bottom\"\n  styleClass=\"app-bottom-overlay\">\n  <dc-chat\n    [conversationFlow]=\"lessonConversationService.conversationFlow()\"\n    [conversationSettings]=\"lessonConversationService.conversationSettings()\"\n    (goalCompleted)=\"handleGoalCompleted($event)\"\n    (chatEvent)=\"onChatMessage($event)\"></dc-chat>\n</p-drawer>\n}\n", styles: ["::ng-deep .targetclass *:not(h1,h2,h3,h4,h5,h6){font-family:\"math\",sans-serif,system-ui,monospace!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { wordClicked: [{
                 type: Output
-            }], dynamicLesson: [{
-                type: ViewChild,
-                args: ['dynamicLesson', { static: true }]
             }] } });
 
 class LessonNotionService {
@@ -1904,7 +1942,7 @@ class DCLessonComponentAdderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonComponentAdderComponent, isStandalone: true, selector: "dc-lesson-component-adder", outputs: { componentAdded: "componentAdded" }, providers: [DialogService], ngImport: i0, template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: DCLessonComponentAdderComponent, isStandalone: true, selector: "dc-lesson-component-adder", outputs: { componentAdded: "componentAdded" }, providers: [DialogService], ngImport: i0, template: "<span>Componentes: </span>\n<div style=\"display: flex; gap: 10px; flex-wrap: wrap\">\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Selector)\"\n    pTooltip=\"Agrega un selector con multiples opciones\"\n    tooltipPosition=\"bottom\">\n    Selector\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.Speaker)\"\n    pTooltip=\"Para que una palabra o frase sea reproducible\"\n    tooltipPosition=\"bottom\">\n    Speaker\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TextWriter)\"\n    pTooltip=\"Escribe una respuesta en un cuadro de texto\"\n    tooltipPosition=\"bottom\">\n    Text\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.VerbSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de un verbo\"\n    tooltipPosition=\"bottom\">\n    Verb\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.WordSummary)\"\n    pTooltip=\"Muestra la informaci\u00F3n de una palabra\"\n    tooltipPosition=\"bottom\">\n    Palabra\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.TranslationSwitcher)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Traducci\u00F3n\n  </p-button>\n  <p-button\n    severity=\"info\"\n    (click)=\"openComponentBuilder(lessonComponentEnum.PlayWord)\"\n    pTooltip=\"Muestra el texto pero al pica cambia de idioma\"\n    tooltipPosition=\"bottom\">\n    Play Word\n  </p-button>\n  <!-- Add other buttons here if needed, following the same pattern -->\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonComponentAdderComponent, decorators: [{
             type: Component,
@@ -1915,99 +1953,62 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
 
 class DCLessonMetadataEditorComponent {
     constructor() {
-        // Use signal for input lesson data
-        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : [])); // The lesson data itself
-        this.isLoadingLesson = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLesson" }] : [])); // Shared loading state
         // Outputs for actions
         this.saveRequest = new EventEmitter();
         this.importNotionRequest = new EventEmitter();
         this.improveNotionRequest = new EventEmitter();
-        // Removed generateAIRequest Output as it's handled internally now
-        // Output removed as the component now updates the input signal directly.
-        // @Output() propertyChange = new EventEmitter<{ propertyPath: string; value: any }>();
         // Injected Services
         this.#lessonUtilsService = inject(LessonUtilsService);
         this.#toastService = inject(TOAST_ALERTS_TOKEN);
         this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.#turndownService = new TurndownService(); // Instantiate TurndownService
+        this.turndownService = new TurndownService(); // Instantiate TurndownService
     }
-    // Removed generateAIRequest Output as it's handled internally now
-    // Output removed as the component now updates the input signal directly.
-    // @Output() propertyChange = new EventEmitter<{ propertyPath: string; value: any }>();
     // Injected Services
     #lessonUtilsService;
     #toastService;
-    #turndownService; // Instantiate TurndownService
-    // Method to handle property changes for ROOT properties (e.g., level)
-    onRootPropertyChange(property, value) {
-        this.lesson.update((current) => {
-            if (!current)
-                return undefined;
-            // Avoid updating metadata directly here
-            // if (property === 'metadata') {
-            //   console.warn('Direct metadata updates should use onMetadataPropertyChange');
-            //   return current;
-            // }
-            return { ...current, [property]: value };
-        });
-        // Emit removed - signal is updated directly above.
-        // this.propertyChange.emit({ propertyPath: property, value });
-    }
-    // Method to handle property changes for APP EXTENSION properties
-    onAppExtensionPropChange(property, value) {
-        this.lesson.update((current) => {
-            if (!current)
-                return undefined;
-            // Ensure appExtension exists, initialize if not
-            // Convert value to number specifically for 'level'
-            const finalValue = property === 'level' ? Number(value) : value;
-            const updatedAppExtension = { ...(current.extensions ?? {}), [property]: finalValue };
-            return { ...current, extensions: updatedAppExtension };
-        });
+    ngOnInit() {
+        // console.log(this.lesson(), this.form);
     }
     onManageablePropertyChange(property, value) {
-        this.lesson.update((current) => {
-            if (!current)
-                return undefined;
-            const updatedManageable = { ...(current.manageable ?? {}), [property]: value };
-            return { ...current, manageable: updatedManageable };
-        });
+        // this.lesson.update((current) => {
+        //   if (!current) return undefined;
+        //   const updatedManageable = { ...(current.manageable ?? {}), [property]: value };
+        //   return { ...current, manageable: updatedManageable as IManageable };
+        // });
     }
     onAuditablePropertyChange(property, value) {
-        this.lesson.update((current) => {
-            if (!current)
-                return undefined;
-            const updatedAuditable = { ...(current.auditable ?? {}), [property]: value };
-            return { ...current, auditable: updatedAuditable };
-        });
-    }
-    // Methods to emit action requests
-    emitSaveRequest() {
-        this.saveRequest.emit();
+        // this.lesson.update((current) => {
+        //   if (!current) return undefined;
+        //   const updatedAuditable = { ...(current.auditable ?? {}), [property]: value };
+        //   return { ...current, auditable: updatedAuditable as IAuditable };
+        // });
     }
-    emitImportNotionRequest() {
-        this.importNotionRequest.emit();
+    // New methods to handle events with proper casting
+    handlePromptInputChange(event) {
+        const target = event.target;
+        this.onAuditablePropertyChange('prompt', target.value);
     }
-    emitImproveNotionRequest() {
-        this.improveNotionRequest.emit();
+    handleStatusChange(event) {
+        const target = event.target;
+        this.onManageablePropertyChange('status', target.checked ? 'published' : 'draft');
     }
     /**
      * Generates lesson content using AI, saving the current state first.
      * Moved from DCLessonEditorComponent.
      */
     async generateByAI() {
-        const currentLesson = this.lesson(); // Get current value
+        const currentLesson = this.lesson; // Get current value
         if (!currentLesson?.id) {
             this.#toastService.warn({ title: 'Guardar primero', subtitle: 'Guarda la lección antes de usar IA.' });
             return;
         }
-        this.isLoadingLesson.set(true);
+        this.isLoadingLesson = true;
         try {
             const rawHtmlContent = currentLesson.textCoded || '';
             if (!rawHtmlContent) {
                 console.warn('No HTML content found in lesson to process. taking just description');
                 this.#toastService.info({ title: 'Contenido lección desde 0', subtitle: 'Solo se usará el prompt' });
-                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson(), 'Create content from description');
+                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, 'Create content from description');
                 // Convert and save the generated content
                 await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
             }
@@ -2019,13 +2020,13 @@ class DCLessonMetadataEditorComponent {
                     this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudo guardar antes de generar con IA.' });
                     throw new Error('Failed to save before AI generation');
                 }
-                this.lesson.set(savedLesson);
+                this.lesson = savedLesson;
                 // Replace encoded JSON with actual text before Markdown conversion
                 const processedHtmlContent = this._extractTextFromEncodedJson(rawHtmlContent);
                 // Convert the processed HTML (with text instead of JSON) to Markdown
-                const markdownText = this.#turndownService.turndown(processedHtmlContent);
+                const markdownText = this.turndownService.turndown(processedHtmlContent);
                 // Use the updated lesson signal value for AI improvement
-                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson(), markdownText);
+                const improvedMarkdown = await this.#lessonUtilsService.improveMDWithAI(this.lesson, markdownText);
                 // Convert and save the improved content
                 await this._convertMarkdownToHtmlAndSave(improvedMarkdown); // Use extracted method
             }
@@ -2036,7 +2037,7 @@ class DCLessonMetadataEditorComponent {
             // this.#toastService.error({ title: 'Error General', subtitle: 'Ocurrió un problema durante el proceso de IA.' });
         }
         finally {
-            this.isLoadingLesson.set(false); // Stop loading
+            this.isLoadingLesson = false; // Stop loading
         }
     }
     /**
@@ -2072,10 +2073,10 @@ class DCLessonMetadataEditorComponent {
             // Convert the improved Markdown back to HTML before setting it
             const improvedHtml = marked(improvedMarkdown);
             // Update the signal directly
-            this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
+            // this.lesson.update((current) => (current ? { ...current, textCoded: improvedHtml } : undefined));
             // Save the AI-generated content
             // Ensure lesson() is not undefined before saving
-            const lessonToSave = this.lesson();
+            const lessonToSave = this.lesson;
             if (lessonToSave) {
                 await this.lessonsService.postLesson(lessonToSave);
                 this.#toastService.success({ title: 'Contenido generado', subtitle: 'Se generó y guardó el contenido con IA.' });
@@ -2100,21 +2101,21 @@ class DCLessonMetadataEditorComponent {
      * and updates the lesson signal if successful.
      */
     async triggerGenerateDescriptionAI() {
-        const currentLesson = this.lesson();
+        const currentLesson = this.lesson;
         if (!currentLesson) {
             this.#toastService.warn({ title: 'Lección no cargada', subtitle: 'Espera a que la lección se cargue.' });
             return;
         }
         const generatedDescription = await this.#lessonUtilsService.generateDescriptionWithAI(currentLesson);
         if (generatedDescription) {
-            this.lessonForm.controls['description'].setValue(generatedDescription);
+            // this.form.controls['description'].setValue(generatedDescription);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { lesson: "lesson", lessonForm: "lessonForm", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "@if (lesson(); as currentLesson) {\n<div [formGroup]=\"lessonForm\">\n  <div>\n    <div style=\"display: flex; gap: 10px; padding: 10px\">\n      <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n      <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n      <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n    </div>\n\n    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input pInputText style=\"width: 100%\" formControlName=\"title\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" formControlName=\"description\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson()\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.auditable?.prompt\"\n        (ngModelChange)=\"onAuditablePropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson()\" (click)=\"generateByAI()\" />\n    </div>\n\n    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.manageable?.status === 'published'\"\n          (ngModelChange)=\"onManageablePropertyChange('status', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n    </div>\n\n    <p-divider />\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.extensions?.['level']\"\n        (ngModelChange)=\"onAppExtensionPropChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n\n      <!-- Access signal values -->\n      @if (currentLesson.extensions) {\n      <div>\n        {{ currentLesson.extensions?.['baseLang'] | flagEmoji }} -> {{ currentLesson.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n        {{ currentLesson.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n        {{ currentLesson.extensions?.['targetLang'] | langDesc : 'es' }}\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: // Added Pipe
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonMetadataEditorComponent, isStandalone: true, selector: "dc-lesson-metadata-editor", inputs: { form: "form", lesson: "lesson", isLoadingLesson: "isLoadingLesson" }, outputs: { saveRequest: "saveRequest", importNotionRequest: "importNotionRequest", improveNotionRequest: "improveNotionRequest" }, ngImport: i0, template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    <!-- Access signal values -->\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "ngmodule", type: // Added Pipe
                 InputGroupModule }, { kind: "component", type: i5.InputGroup, selector: "p-inputgroup, p-inputGroup, p-input-group", inputs: ["styleClass"] }, { kind: "ngmodule", type: DividerModule }, { kind: "component", type: i6.Divider, selector: "p-divider", inputs: ["styleClass", "layout", "type", "align"] }, { kind: "pipe", type: // Added TooltipModule
                 FlagLanguagePipe, name: "flagEmoji" }, { kind: "pipe", type: // Added Pipe
-                LangDescTranslationPipe, name: "langDesc" }] }); }
+                LangDescTranslation, name: "langDesc" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonMetadataEditorComponent, decorators: [{
             type: Component,
@@ -2126,14 +2127,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         ReactiveFormsModule,
                         TooltipModule, // Added TooltipModule
                         FlagLanguagePipe, // Added Pipe
-                        LangDescTranslationPipe, // Added Pipe
+                        LangDescTranslation, // Added Pipe
                         InputGroupModule,
                         DividerModule,
-                    ], template: "@if (lesson(); as currentLesson) {\n<div [formGroup]=\"lessonForm\">\n  <div>\n    <div style=\"display: flex; gap: 10px; padding: 10px\">\n      <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n      <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n      <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n    </div>\n\n    <!-- Use one-way binding and ngModelChange for signals -->\n    <div>\n      <input pInputText style=\"width: 100%\" formControlName=\"title\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n    <div style=\"margin-top: 4px\">\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" formControlName=\"description\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson()\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px\">\n      <input\n        pInputText\n        style=\"flex: auto; margin-right: 5px\"\n        [ngModel]=\"currentLesson.auditable?.prompt\"\n        (ngModelChange)=\"onAuditablePropertyChange('prompt', $event)\"\n        type=\"text\"\n        placeholder=\"Prompt para IA (opcional)\" />\n      <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson()\" (click)=\"generateByAI()\" />\n    </div>\n\n    <div style=\"margin-top: 10px\">\n      <label class=\"checkbox-container\" style=\"margin-right: 15px\">\n        <input\n          type=\"checkbox\"\n          [ngModel]=\"currentLesson.manageable?.status === 'published'\"\n          (ngModelChange)=\"onManageablePropertyChange('status', $event)\"\n          title=\"Cuando termines la edici\u00F3n marca esta casilla\" />\n        <span class=\"checkmark\"></span>\n        Publicada\n      </label>\n    </div>\n\n    <p-divider />\n\n    <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n      <input\n        pInputText\n        [ngModel]=\"currentLesson.extensions?.['level']\"\n        (ngModelChange)=\"onAppExtensionPropChange('level', $event)\"\n        type=\"number\"\n        placeholder=\"Nivel\"\n        style=\"width: 80px\" />\n\n      <!-- Access signal values -->\n      @if (currentLesson.extensions) {\n      <div>\n        {{ currentLesson.extensions?.['baseLang'] | flagEmoji }} -> {{ currentLesson.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n        {{ currentLesson.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n        {{ currentLesson.extensions?.['targetLang'] | langDesc : 'es' }}\n      </div>\n      }\n    </div>\n  </div>\n</div>\n} @else {\n<!-- Optional: Show a loading state or placeholder if lesson is undefined -->\n<p>Cargando datos de la lecci\u00F3n...</p>\n}\n" }]
-        }], propDecorators: { lesson: [{
+                    ], template: "<div>\n  <!-- <div style=\"display: flex; gap: 10px; padding: 10px\">\n    <p-button label=\"Guardar\" severity=\"primary\" (click)=\"emitSaveRequest()\" />\n    <p-button label=\"Importar de Notion\" severity=\"help\" (click)=\"emitImportNotionRequest()\" />\n    <p-button label=\"Mejorar Notion con AI\" severity=\"help\" (click)=\"emitImproveNotionRequest()\" />\n  </div> -->\n\n  <div>\n    <div>\n      <span>Nombre de La lecci\u00F3n</span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['name']\" type=\"text\" placeholder=\"Agrega un nombre\" />\n    </div>\n    <div>\n      <span>T\u00EDtulo </span>\n      <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['title']\" type=\"text\" placeholder=\"Agrega un t\u00EDtulo\" />\n    </div>\n\n    <div style=\"margin-top: 4px\">\n      <span>Descripci\u00F3n </span>\n      <p-inputgroup>\n        <input pInputText style=\"width: 100%\" [formControl]=\"form.controls['description']\" type=\"text\" placeholder=\"Agrega una descripci\u00F3n\" />\n        <p-button\n          icon=\"pi pi-sparkles\"\n          styleClass=\"p-button-secondary p-button-outlined\"\n          pTooltip=\"Generar descripci\u00F3n con IA\"\n          tooltipPosition=\"top\"\n          [disabled]=\"isLoadingLesson\"\n          (click)=\"triggerGenerateDescriptionAI()\" />\n      </p-inputgroup>\n    </div>\n  </div>\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px\">\n    <input\n      pInputText\n      style=\"flex: auto; margin-right: 5px\"\n      [value]=\"lesson?.auditable?.prompt || ''\"\n      (input)=\"handlePromptInputChange($event)\"\n      type=\"text\"\n      placeholder=\"Prompt para IA (opcional)\" />\n    <p-button severity=\"primary\" label=\"Generar con IA\" icon=\"pi pi-sparkles\" [disabled]=\"isLoadingLesson\" (click)=\"generateByAI()\" />\n  </div>\n\n  <p-divider />\n\n  <div style=\"display: flex; align-items: center; margin-top: 10px; gap: 10px\">\n    <input pInputText [value]=\"lesson?.extensions?.['level'] || ''\" type=\"number\" placeholder=\"Nivel\" style=\"width: 80px\" />\n\n    <!-- Access signal values -->\n    @if (lesson?.extensions) {\n    <div>\n      {{ lesson?.extensions?.['baseLang'] | flagEmoji }} -> {{ lesson?.extensions?.['targetLang'] | flagEmoji }} Lecci\u00F3n para hablantes de\n      {{ lesson?.extensions?.['baseLang'] | langDesc : 'es' }} que aprenden\n      {{ lesson?.extensions?.['targetLang'] | langDesc : 'es' }}\n    </div>\n    }\n  </div>\n</div>\n" }]
+        }], propDecorators: { form: [{
                 type: Input,
                 args: [{ required: true }]
-            }], lessonForm: [{
+            }], lesson: [{
                 type: Input,
                 args: [{ required: true }]
             }], isLoadingLesson: [{
@@ -2147,53 +2148,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                 type: Output
             }] } });
 
-class DCLessonEditorComponent {
-    // Services
-    #activatedRoute; // Re-inject as it's needed for navigation
-    #lessonNotionService;
-    #lessonUtilsService;
-    #router;
-    #toastService;
-    #loadingBarService;
-    #formBuilder;
+class LessonFormEditorService {
+    constructor() {
+        this.fb = inject(FormBuilder);
+        this.formUtils = inject(FormUtilsService);
+        this.formatOptions = [
+            { label: 'HTML', value: 'html' },
+            { label: 'Markdown', value: 'markdown' },
+        ];
+    }
+    createLessonForm() {
+        return this.fb.group({
+            version: ['1.0'],
+            id: [''],
+            name: [''],
+            title: [''],
+            description: [''],
+            format: ['html'],
+            lang: [''],
+            characterCard: [],
+            conversationSettings: [],
+            metaApp: [],
+            conversationFlow: [],
+            textCoded: [''],
+            manageable: this.formUtils.createManageableFormGroup(),
+            learnable: this.formUtils.createLearnableFormGroup(),
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonFormEditorService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class DCLessonEditorComponent extends EntityBaseFormComponent {
     constructor() {
+        super(...arguments);
+        this.lessonFormEditorService = inject(LessonFormEditorService);
+        this.markdownService = inject(MarkdownService);
+        this.form = this.lessonFormEditorService.createLessonForm();
+        this.formatOptions = this.lessonFormEditorService.formatOptions;
+        this.entityCommunicationService = inject(LESSONS_TOKEN);
+        this.htmlTemporal = '';
         // Services
-        this.#activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
-        this.#lessonNotionService = inject(LessonNotionService);
-        this.#lessonUtilsService = inject(LessonUtilsService);
-        this.#router = inject(Router);
+        this.activatedRoute = inject(ActivatedRoute); // Re-inject as it's needed for navigation
+        this.lessonNotionService = inject(LessonNotionService);
+        this.lessonUtilsService = inject(LessonUtilsService);
         this.lessonsService = inject(LESSONS_TOKEN, { optional: true }) ?? inject(DefaultLessonsService);
-        this.#toastService = inject(TOAST_ALERTS_TOKEN);
-        this.#loadingBarService = inject(LoadingBarService);
+        this.loadingBarService = inject(LoadingBarService);
         this.defaultLessonsService = inject(DefaultLessonsService);
         this.promptService = inject(PromptService);
         this.ngxVertexService = inject(NgxVertexService);
-        this.cdr = inject(ChangeDetectorRef);
         this.dynamicComponentsBuilderService = inject(DynamicComponentsBuilderService);
-        this.#formBuilder = inject(FormBuilder);
-        // Signals States
-        this.lessonId = toSignal(inject(ActivatedRoute).paramMap.pipe(map((params) => params.get('id'))));
-        this.lesson = signal(undefined, ...(ngDevMode ? [{ debugName: "lesson" }] : []));
         this.isLoadingLesson = signal(false, ...(ngDevMode ? [{ debugName: "isLoadingLesson" }] : []));
-        // Computed Signals
-        this.coverImageUrl = computed(() => {
-            // Priority Order 1 Metadata Banner, 2 Banner, 3 Media First Images, 4 Default Banner TODO: reveme banner after migration to Content
-            const currentLesson = this.lesson();
-            if (currentLesson?.assets?.banner?.url) {
-                return currentLesson.assets.banner.url;
-            }
-            else if (currentLesson?.media?.images?.find((img) => img.type === 'cover')) {
-                // 3 Media First Images
-                return currentLesson.media.images.find((img) => img.type === 'cover')?.url;
-            }
-            return '/assets/defaults/images/default_banner.webp';
-        }, ...(ngDevMode ? [{ debugName: "coverImageUrl" }] : []));
         // Computed signal to get dynamic components as an array for easier iteration in the template
         this.dynamicComponentsArray = computed(() => {
-            const currentLesson = this.lesson();
-            if (currentLesson?.dynamicComponents) {
-                return Object.values(currentLesson.dynamicComponents);
-            }
+            // const currentLesson = this.lesson();
+            // if (currentLesson?.dynamicComponents) {
+            //   return Object.values(currentLesson.dynamicComponents);
+            // }
             return []; // Return empty array if no lesson or no dynamic components
         }, ...(ngDevMode ? [{ debugName: "dynamicComponentsArray" }] : []));
         // States
@@ -2201,57 +2218,21 @@ class DCLessonEditorComponent {
         this.editor = BalloonEditor;
         this.lessonComponentEnum = LessonComponentEnum;
         this.coverStorageSettings = {
-            path: `lessons/${this.lessonId()}/covers`,
+            path: `lessons/${this.entityId()}/covers`,
             fileName: 'cover',
             cropSettings: { resizeToWidth: 850, aspectRatio: AspectType.RectangleLarge, resolutions: [ResolutionType.Medium] },
         };
-        this.promptsVisible = false;
-        this.lessonForm = this.#formBuilder.group({
-            title: [''],
-            description: [''],
-        });
-        // Effect to fetch lesson data when ID changes
-        effect(async () => {
-            const id = this.lessonId();
-            console.log('Lesson ID Signal:', id);
-            if (id) {
-                this.isLoadingLesson.set(true); // Start loading
-                try {
-                    const fetchedLesson = await this.lessonsService.getLesson(id);
-                    if (fetchedLesson) {
-                        this.lesson.set(fetchedLesson);
-                        this.lessonForm.patchValue(fetchedLesson, { emitEvent: false });
-                    }
-                    else {
-                        this.lesson.set(undefined); // Reset if not found
-                        this.#toastService.warn({ title: 'No se encontró la lección', subtitle: 'Quizá el id es incorrecto' });
-                        // Optional: Navigate away or show a specific "not found" state
-                        // this.#router.navigate(['/path/to/lessons']);
-                    }
-                }
-                catch (error) {
-                    console.error('Error fetching lesson:', error);
-                    this.lesson.set(undefined); // Reset on error
-                    this.#toastService.error({ title: 'Error al cargar la lección', subtitle: 'Intenta de nuevo más tarde' });
-                }
-                finally {
-                    this.isLoadingLesson.set(false); // Stop loading
-                }
-            }
-            else {
-                // Handle case for new lesson (ID is null/undefined)
-                this.lesson.set({ textCoded: `<h1>Nueva lección </h1> <p> Texto aquí</p>`, tags: [] }); // Set default new lesson structure
-                this.saveLesson();
-                this.isLoadingLesson.set(false); // Ensure loading is off
-            }
-        });
-        this.lessonForm.valueChanges.subscribe((value) => {
-            this.lesson.update((current) => {
-                if (!current)
-                    return undefined;
-                return { ...current, ...value };
-            });
-        });
+    }
+    patchForm(entity) {
+        console.log(this.form);
+        if (this.entity().format === 'markdown') {
+            this.htmlTemporal = this.markdownService.parse(entity.markdown);
+        }
+        else {
+            this.htmlTemporal = entity.textCoded;
+        }
+        // console.log(this.htmlTemporal);
+        this.form.patchValue(entity);
     }
     /**
      * Updates a specific property on the lesson signal.
@@ -2261,84 +2242,71 @@ class DCLessonEditorComponent {
      */
     updateLessonProperty(property, value) {
         console.log('Updating property:', property, value);
-        this.lesson.update((currentLesson) => {
+        this.entity.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
             return { ...currentLesson, [property]: value };
         });
     }
-    onAssetsChange(updatedAssets) {
-        this.lesson.update((currentLesson) => {
+    updateHtmlTextCoded(_, value) {
+        this.entity.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
-            return { ...currentLesson, assets: updatedAssets };
+            return { ...currentLesson, textCoded: value };
         });
+        this.form.controls.textCoded.setValue(value);
     }
-    onTagRemove(tag) {
-        this.lesson.update((currentLesson) => {
+    onAssetsChange(updatedAssets) {
+        console.log(updatedAssets);
+        this.entity.update((currentLesson) => {
             if (!currentLesson)
                 return undefined;
-            const updatedTags = currentLesson.tags.filter((text) => text !== tag.text);
-            return { ...currentLesson, tags: updatedTags };
+            return { ...currentLesson, assets: updatedAssets };
         });
     }
-    onTagAdd(tag) {
-        if (tag.value) {
-            this.lesson.update((currentLesson) => {
-                if (!currentLesson)
-                    return undefined;
-                // Avoid duplicate tags if necessary
-                if (currentLesson.tags.includes(tag.value)) {
-                    return currentLesson;
-                }
-                const updatedTags = [...currentLesson.tags, tag.value];
-                return { ...currentLesson, tags: updatedTags };
-            });
-        }
-        tag.input.nativeElement.value = ''; // Clear input
-    }
     async saveLesson(event) {
+        // TODO: Revisar por ahora uso el método del padre para guardar. pero creo que este era para guardar la lección.
         event?.preventDefault();
-        const currentLesson = this.lesson();
+        const currentLesson = this.entity();
         if (!currentLesson) {
-            this.#toastService.error({ title: 'Error', subtitle: 'No hay datos de lección para guardar' });
+            this.toastService.error({ title: 'Error', subtitle: 'No hay datos de lección para guardar' });
             return undefined;
         }
         // Clean orphaned components before saving
-        const lessonToSave = this.#lessonUtilsService.cleanOrphanedComponents(currentLesson);
+        const lessonToSave = this.lessonUtilsService.cleanOrphanedComponents(currentLesson);
         // TODO: Implement optimization for saving only changed data.
         // This requires comparing lessonToSave with the initially fetched state.
         this.isLoadingLesson.set(true); // Indicate saving
         try {
             // Use the cleaned lesson object for saving
             const savedLesson = await this.lessonsService.postLesson(lessonToSave);
-            const currentId = this.lessonId();
+            const currentId = this.entityId();
             if (!currentId) {
                 // No se como guardar los extras aunt
                 // It was a new lesson, now it has an ID. Navigate.
-                this.#toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
+                this.toastService.success({ title: 'Se creó la lección', subtitle: 'Éxito' });
                 // The effect should automatically fetch the lesson again after navigation due to paramMap change.
-                this.#router.navigate(['./', savedLesson.id], { relativeTo: this.#activatedRoute });
+                this.router.navigate(['./', savedLesson.id], { relativeTo: this.activatedRoute });
             }
             else {
                 // It was an existing lesson, update the signal with the potentially updated data from the backend.
-                this.lesson.set(savedLesson);
-                this.#toastService.info({ title: 'Se guardaron los cambios en la lección', subtitle: 'Guardado' });
+                this.entity.set(savedLesson);
+                this.toastService.info({ title: 'Se guardaron los cambios en la lección', subtitle: 'Guardado' });
                 // Call the service method for validation
-                this.#lessonUtilsService.validateAudios(this.lesson());
+                this.lessonUtilsService.validateAudios(this.entity());
             }
             return savedLesson;
         }
         catch (error) {
             // Type error
             console.error('Error saving lesson:', error);
-            this.#toastService.error({ title: 'Error al guardar', subtitle: 'No se pudieron guardar los cambios' });
+            this.toastService.error({ title: 'Error al guardar', subtitle: 'No se pudieron guardar los cambios' });
             return undefined;
         }
         finally {
             this.isLoadingLesson.set(false); // Finish saving indication
         }
-    } // Add missing closing brace for saveLesson
+    }
     // Removed openComponentBuilder method
     /**
      * Handles the event emitted when a component is added via the adder component.
@@ -2350,7 +2318,7 @@ class DCLessonEditorComponent {
         if (newComponent?.id) {
             console.log('Component builder closed, result received in editor:', newComponent);
             // Update the lesson signal, adding the transformed component to the dynamicComponents object
-            this.lesson.update((currentLesson) => {
+            this.entity.update((currentLesson) => {
                 if (!currentLesson)
                     return undefined;
                 // Ensure dynamicComponents object exists, initialize if not
@@ -2363,54 +2331,17 @@ class DCLessonEditorComponent {
                 // Return the updated lesson state
                 return { ...currentLesson, dynamicComponents: updatedDynamicComponents };
             });
-            // Optionally save the lesson after adding the component
-            // this.saveLesson();
-        }
-    }
-    // isLoadingLesson signal is used directly
-    // Removed generateByAI and _extractTextFromEncodedJson methods.
-    // This logic is now handled within DCLessonMetadataEditorComponent.
-    /**
-     * Handles the image upload event, updates the lesson signal via the service, and saves.
-     * @param event The image upload event data.
-     */
-    async onImageUploaded(event) {
-        this.#lessonUtilsService.uploadCover(this.lesson, event);
-        await this.saveLesson();
-    }
-    /**
-     * Imports lesson content from Notion using the LessonNotionService.
-     */
-    async importFromNotion() {
-        // Use the service's loading state or manage locally
-        this.isLoadingLesson.set(true);
-        try {
-            const newContent = await this.#lessonNotionService.importAndLinkLessonFromNotion(this.lesson(), this.lessonId());
-            if (newContent !== null) {
-                // Update the lesson signal's textCoded property
-                this.updateLessonProperty('textCoded', newContent);
-                // Toast success is handled within the service now
-            }
-            // If newContent is null, the service handled errors/toasts
-        }
-        finally {
-            // Ensure loading state is reset regardless of service outcome
-            // If observing service state: this.isLoadingLesson.set(this.#lessonNotionService.isLoading());
-            this.isLoadingLesson.set(false); // Keep local loading for now
         }
     }
-    /**
-     * Calls the LessonNotionService to improve the lesson using AI based on Notion content.
-     */
     async improveNotionWithAI() {
-        await this.#lessonNotionService.improveLessonWithNotionAI(this.lesson());
+        await this.lessonNotionService.improveLessonWithNotionAI(this.entity());
     }
     showComponentDetails(data) {
         alert('showComponentDetails' + JSON.stringify(data));
     }
     async generateBanner() {
-        this.#toastService.info({ title: 'Generando prompt de sugerencia', subtitle: 'Por favor, espera' });
-        const prompt = this.lessonsService.getPrompts().banner(this.lesson());
+        this.toastService.info({ title: 'Generando prompt de sugerencia', subtitle: 'Por favor, espera' });
+        const prompt = this.lessonsService.getPrompts().banner(this.entity());
         const geminiRes = await this.ngxVertexService.generateText([{ role: ChatRoleVertex.User, content: prompt }]);
         this.promptService
             .openPrompt({
@@ -2422,32 +2353,16 @@ class DCLessonEditorComponent {
         })
             .then((promptResult) => {
             if (promptResult) {
-                this.#loadingBarService.showIndeterminate();
-                this.defaultLessonsService.generateBanner(promptResult, this.lessonId()).then((result) => {
+                this.loadingBarService.showIndeterminate();
+                this.defaultLessonsService.generateBanner(promptResult, this.entityId()).then((result) => {
                     if (result) {
                         alert('Revisar como actualizar el banner');
                         // this.updateLessonProperty('banner', (result as any).banner);
                     }
-                    this.#loadingBarService.successAndHide();
+                    this.loadingBarService.successAndHide();
                 });
             }
         });
-        // const imagePrompt = prompt('alguna idea de lo que quieres ver?');
-        // this.#loadingBarService.showIndeterminate();
-        // const result = await this.defaultLessonsService.generateBanner(imagePrompt, this.lessonId());
-        // if (result) {
-        //   this.updateLessonProperty('banner', result.banner);
-        // }
-        // console.log('Generated banner:', result);
-        //
-        // this.#loadingBarService.successAndHide();
-    }
-    showPrompts() {
-        this.promptsVisible = true;
-        const promptsFn = this.lessonsService.getPrompts();
-        this.prompts = { banner: promptsFn.banner(this.lesson()), content: promptsFn.content(this.lesson()), description: promptsFn.description(this.lesson()) };
-        console.log(this.prompts);
-        this.cdr.markForCheck();
     }
     editComponent(comp) {
         console.log('Edit component:', comp);
@@ -2455,39 +2370,51 @@ class DCLessonEditorComponent {
             this.onComponentAdded(result);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], viewQueries: [{ propertyName: "target", first: true, predicate: ["target"], descendants: true, read: ViewContainerRef }, { propertyName: "dhtml", first: true, predicate: ["dhtml"], descendants: true, static: true }], ngImport: i0, template: "<!-- <div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div> -->\n\n<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader [assets]=\"lesson()?.assets\" storagePath=\"lessons/{{ lesson()?.id }}\" (assetsChange)=\"onAssetsChange($event)\"></assets-loader>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-viewer [data]=\"lesson()?.learnable\"></dc-learnable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"lesson()?.auditable\"></dc-auditable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Manageable</h3>\n    <dc-manageable-viewer [data]=\"lesson()?.manageable\"></dc-manageable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"lesson()?.reactions\"></dc-reactions-viewer>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"lesson()?.extensions\"></dc-extensions-viewer>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<!-- <dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [lessonForm]=\"lessonForm\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor> -->\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n\n<p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog>\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$2.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "settings"], outputs: ["wordClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i5$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "ngmodule", type: // Add the metadata editor here
-                DialogModule }, { kind: "component", type: i7.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "appendTo", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: DcExtensionsViewerComponent, selector: "dc-extensions-viewer", inputs: ["data"] }, { kind: "component", type: DcLearnableViewerComponent, selector: "dc-learnable-viewer", inputs: ["data"] }, { kind: "component", type: DcAuditableViewerComponent, selector: "dc-auditable-viewer", inputs: ["data"] }, { kind: "component", type: DcManageableViewerComponent, selector: "dc-manageable-viewer", inputs: ["data"] }, { kind: "component", type: DcReactionsViewerComponent, selector: "dc-reactions-viewer", inputs: ["data"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }] }); }
+    onAssetUpdate(event) {
+        this.entityCommunicationService.partialUpdate(this.entityId(), { assets: event.assets });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: DCLessonEditorComponent, isStandalone: true, selector: "dc-lesson-editor", providers: [LessonNotionService], usesInheritance: true, ngImport: i0, template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-viewer [data]=\"entity()?.learnable\"></dc-learnable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"entity()?.auditable\"></dc-auditable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Manageable</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"entity()?.reactions\"></dc-reactions-viewer>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"entity()?.extensions\"></dc-extensions-viewer>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"htmlTemporal\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"entity()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n\n<!-- <p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog> -->\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain", "fluid", "label", "icon", "buttonProps"] }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CKEditorModule }, { kind: "component", type: i3$1.CKEditorComponent, selector: "ckeditor", inputs: ["editor", "config", "data", "tagName", "watchdog", "editorWatchdogConfig", "disableTwoWayDataBinding", "disabled"], outputs: ["ready", "change", "blur", "focus", "error"] }, { kind: "component", type: DCLessonRendererComponent, selector: "dc-lesson-renderer", inputs: ["lessonInput", "lessonIdInput", "settings"], outputs: ["wordClicked"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i5$1.SelectButton, selector: "p-selectButton, p-selectbutton, p-select-button", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "styleClass", "ariaLabelledBy", "dataKey", "autofocus", "size", "fluid"], outputs: ["onOptionClick", "onChange"] }, { kind: "ngmodule", type: SplitterModule }, { kind: "component", type: i6$1.Splitter, selector: "p-splitter", inputs: ["styleClass", "panelStyleClass", "panelStyle", "stateStorage", "stateKey", "layout", "gutterSize", "step", "minSizes", "panelSizes"], outputs: ["onResizeEnd", "onResizeStart"] }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: DCLessonComponentAdderComponent, selector: "dc-lesson-component-adder", outputs: ["componentAdded"] }, { kind: "ngmodule", type: // Add the component adder here
+                DialogModule }, { kind: "component", type: DcExtensionsViewerComponent, selector: "dc-extensions-viewer", inputs: ["data"] }, { kind: "component", type: DcLearnableViewerComponent, selector: "dc-learnable-viewer", inputs: ["data"] }, { kind: "component", type: DcAuditableViewerComponent, selector: "dc-auditable-viewer", inputs: ["data"] }, { kind: "component", type: DcReactionsViewerComponent, selector: "dc-reactions-viewer", inputs: ["data"] }, { kind: "component", type: AssetsLoaderComponent, selector: "assets-loader", inputs: ["assets", "storagePath"], outputs: ["assetsChange", "assetUpdate", "onFileSelected"] }, { kind: "component", type: DCLessonMetadataEditorComponent, selector: "dc-lesson-metadata-editor", inputs: ["form", "lesson", "isLoadingLesson"], outputs: ["saveRequest", "importNotionRequest", "improveNotionRequest"] }, { kind: "component", type: DcManageableFormComponent, selector: "dc-manageable-form", inputs: ["form"] }, { kind: "component", type: DcLearnableFormComponent, selector: "dc-learnable-form", inputs: ["form"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: DCLessonEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'dc-lesson-editor', standalone: true, imports: [
                         ButtonModule,
                         CKEditorModule,
-                        CropperComponentModal,
                         DCLessonRendererComponent,
                         FormsModule,
                         InputTextModule,
                         ReactiveFormsModule,
+                        SelectButtonModule,
                         SplitterModule,
                         TooltipModule,
                         DCLessonComponentAdderComponent, // Add the component adder here
-                        DCLessonMetadataEditorComponent, // Add the metadata editor here
                         DialogModule,
                         DcExtensionsViewerComponent,
                         DcLearnableViewerComponent,
                         DcAuditableViewerComponent,
-                        DcManageableViewerComponent,
                         DcReactionsViewerComponent,
                         AssetsLoaderComponent,
-                    ], providers: [LessonNotionService], template: "<!-- <div style=\"position: relative; margin-bottom: 20px\">\n  <img class=\"header-cover\" [src]=\"coverImageUrl()\" alt=\"Lesson Cover Image\" />\n\n  <dc-cropper-modal\n    style=\"position: absolute; top: 10px; left: 20px\"\n    [buttonLabel]=\"'Carga una portada'\"\n    [imgStorageSettings]=\"coverStorageSettings\"\n    (imageUploaded)=\"onImageUploaded($event)\"></dc-cropper-modal>\n\n  <p-button\n    (click)=\"generateBanner()\"\n    class=\"generate-banner-btn\"\n    icon=\"pi pi-sparkles\"\n    severity=\"primary\"\n    [rounded]=\"true\"\n    [raised]=\"true\"\n    pTooltip=\"Generar Banner AI\"\n    tooltipPosition=\"left\"></p-button>\n\n  <p-button class=\"prompt-visual\" icon=\"pi pi-info\" label=\"Ver Prompts\" [link]=\"true\" (click)=\"showPrompts()\" />\n</div> -->\n\n<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader [assets]=\"lesson()?.assets\" storagePath=\"lessons/{{ lesson()?.id }}\" (assetsChange)=\"onAssetsChange($event)\"></assets-loader>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-viewer [data]=\"lesson()?.learnable\"></dc-learnable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"lesson()?.auditable\"></dc-auditable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Manageable</h3>\n    <dc-manageable-viewer [data]=\"lesson()?.manageable\"></dc-manageable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"lesson()?.reactions\"></dc-reactions-viewer>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"lesson()?.extensions\"></dc-extensions-viewer>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<!-- <dc-lesson-metadata-editor\n  [lesson]=\"lesson\"\n  [lessonForm]=\"lessonForm\"\n  [isLoadingLesson]=\"isLoadingLesson\"\n  (saveRequest)=\"saveLesson()\"\n  (importNotionRequest)=\"importFromNotion()\"\n  (improveNotionRequest)=\"improveNotionWithAI()\">\n</dc-lesson-metadata-editor> -->\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"lesson()?.textCoded\"\n      (ngModelChange)=\"updateLessonProperty('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"lesson()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <!-- Removed p-speeddial -->\n  <p-button icon=\"pi pi-save\" (click)=\"saveLesson()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n\n<p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog>\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { target: [{
-                type: ViewChild,
-                args: ['target', { read: ViewContainerRef }]
-            }], dhtml: [{
-                type: ViewChild,
-                args: ['dhtml', { static: true }]
-            }] } });
+                        DCLessonMetadataEditorComponent,
+                        DcManageableFormComponent,
+                        DcLearnableFormComponent,
+                    ], providers: [LessonNotionService], template: "<div class=\"p-grid\">\n  <div class=\"p-col-4\">\n    <assets-loader\n      [assets]=\"entity()?.assets\"\n      storagePath=\"lessons/{{ entityId() }}\"\n      (assetsChange)=\"onAssetsChange($event)\"\n      (assetUpdate)=\"onAssetUpdate($event)\"></assets-loader>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-viewer [data]=\"entity()?.learnable\"></dc-learnable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Auditable</h3>\n    <dc-auditable-viewer [data]=\"entity()?.auditable\"></dc-auditable-viewer>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Manageable</h3>\n    <dc-manageable-form [form]=\"form.controls.manageable\"></dc-manageable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Learnable</h3>\n    <dc-learnable-form [form]=\"form.controls.learnable\"></dc-learnable-form>\n  </div>\n  <div class=\"p-col-4\">\n    <h3>Reactions</h3>\n    <dc-reactions-viewer [data]=\"entity()?.reactions\"></dc-reactions-viewer>\n  </div>\n\n  <div class=\"p-col-4\">\n    <h3>Extensions</h3>\n    <dc-extensions-viewer [data]=\"entity()?.extensions\"></dc-extensions-viewer>\n  </div>\n</div>\n\n<!-- Lesson Metadata Editor -->\n<div [formGroup]=\"form\">\n  <p-selectButton [options]=\"formatOptions\" formControlName=\"format\" optionLabel=\"label\" optionValue=\"value\" />\n</div>\n<dc-lesson-metadata-editor [lesson]=\"entity()\" [form]=\"form\" [isLoadingLesson]=\"isLoadingLesson()\"></dc-lesson-metadata-editor>\n\n<div style=\"margin-top: 30px\"></div>\n\n<!-- Component Adder -->\n<dc-lesson-component-adder (componentAdded)=\"onComponentAdded($event)\"></dc-lesson-component-adder>\n\n<!-- Display Added Components -->\n<div class=\"added-components-list\" style=\"margin-top: 15px; margin-bottom: 15px\">\n  <h4>Componentes Agregados:</h4>\n  @if (dynamicComponentsArray().length > 0) {\n  <ul>\n    @for (comp of dynamicComponentsArray(); track comp.id) {\n    <li\n      >ID: {{ comp.id }} - Tipo: {{ comp.component }}\n\n      <button pButton icon=\"pi pi-info\" (click)=\"showComponentDetails(comp)\"></button>\n      <p-button icon=\"pi pi-pencil\" [rounded]=\"true\" severity=\"warn\" (click)=\"editComponent(comp)\"></p-button>\n    </li>\n    }\n  </ul>\n  } @else {\n  <p>A\u00FAn no se han agregado componentes.</p>\n  }\n</div>\n\n<hr />\n\n<!-- Text Editor and Renderer -->\n<p-splitter [style]=\"{ height: '80vh' }\">\n  <ng-template pTemplate>\n    <ckeditor\n      (keydown.control.s)=\"saveLesson($event)\"\n      class=\"text-editor\"\n      [editor]=\"editor\"\n      [ngModel]=\"htmlTemporal\"\n      (ngModelChange)=\"updateHtmlTextCoded('textCoded', $event)\">\n    </ckeditor>\n  </ng-template>\n\n  <ng-template pTemplate>\n    <dc-lesson-renderer class=\"text-editor\" [lessonInput]=\"entity()\"></dc-lesson-renderer>\n  </ng-template>\n</p-splitter>\n\n<div class=\"float-button\">\n  <p-button icon=\"pi pi-save\" (click)=\"save()\" severity=\"primary\" [rounded]=\"true\" [raised]=\"true\" pTooltip=\"Guardar (Ctrl + S)\"> </p-button>\n</div>\n\n<hr />\n\n<!-- <p-dialog header=\"Prompts\" [modal]=\"true\" [(visible)]=\"promptsVisible\" [style]=\"{ width: '70%' }\">\n  <div>\n    <h1>Banner</h1>\n    <p>{{ prompts?.banner }}</p>\n    <h1>Contenido</h1>\n    <p>{{ prompts?.content }}</p>\n    <h1>Descripci\u00F3n</h1>\n    <p>{{ prompts?.description }}</p>\n  </div>\n</p-dialog> -->\n", styles: [".btn{padding:.5rem 1rem;border-radius:4px;border:1px solid transparent;cursor:pointer}.generate-banner-btn{position:absolute;right:10px;top:10px}.prompt-visual{position:absolute;left:10px;bottom:10px}.btn-primary{background-color:#007bff;color:#fff}.btn-outline-primary{border-color:#007bff;color:#007bff}.btn-secondary{background-color:#6c757d;color:#fff}.btn-outline-secondary{border-color:#6c757d;color:#6c757d}.btn-rounded{border-radius:50%}.form-control{padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.splitter{display:flex;gap:1rem}.splitter-panel{flex:1}.checkbox-container{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer}.mr-2{margin-right:.5rem}.header-cover{width:100%;height:250px;object-fit:cover;position:relative;border-radius:8px}.float-button{position:fixed;bottom:3.5rem;right:2rem;z-index:1000;display:flex;gap:1px}.float-button :host ::ng-deep .p-button{width:4rem;height:4rem;border-radius:50%}.text-editor{width:-webkit-fill-available;overflow-y:auto}:host ::ng-deep .p-inputtext{background:#fff3}::ng-deep .p-splitter .p-splitterpanel{overflow:auto!important}\n"] }]
+        }] });
+
+class LessonsV2Component {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonsV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: LessonsV2Component, isStandalone: true, selector: "app-lessonsv2", ngImport: i0, template: '<router-outlet></router-outlet>', isInline: true, dependencies: [{ kind: "directive", type: RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: LessonsV2Component, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'app-lessonsv2',
+                    template: '<router-outlet></router-outlet>',
+                    standalone: true,
+                    imports: [RouterOutlet],
+                }]
+        }] });
 
 // This is the base class for all the components that are going to be used in the lessons.
 class LessonDynamicComponent {
@@ -2549,6 +2476,12 @@ class CourseService extends EntityCommunicationService {
     constructor() {
         super('courses');
     }
+    generateLanguageCourse(base, target, id = '') {
+        return this.httpService.post(`api/courses/generate-language`, { base, target, id });
+    }
+    autogenerateLessons(id) {
+        return this.httpService.post(`api/courses/autogenerate-lessons`, { id });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseService, providedIn: 'root' }); }
 }
@@ -2565,6 +2498,7 @@ class CourseListComponent extends PaginationBase {
         // Services
         this.toastService = inject(TOAST_ALERTS_TOKEN);
         this.courseService = inject(CourseService);
+        this.userService = inject(UserService);
         this.cdr = inject(ChangeDetectorRef);
         // Inputs
         this.viewType = 'card';
@@ -2595,8 +2529,13 @@ class CourseListComponent extends PaginationBase {
         ];
     }
     async ngOnInit() {
-        this.filterConfig.returnProps = { _id: 1, id: 1, name: 1, description: 1, updatedAt: 1, image: 1 };
-        this.filterConfig.filters = { targetLang: 'de', baseLang: 'es' };
+        const user = this.userService.user();
+        const targetLang = user?.settings?.['targetLanguage'];
+        const baseLang = user?.settings?.['baseLanguage'];
+        // console.log(user?.settings?.['targetLanguage']);
+        this.filterConfig.filters = { baseLang: baseLang, targetLang: targetLang };
+        this.filterConfig.returnProps = { _id: 1, id: 1, name: 1, description: 1, updatedAt: 1, image: 1, baseLang: 1, targetLang: 1, auditable: 1 };
+        // this.filterConfig.filters = { targetLang: 'de', baseLang: 'es' };
         const response = await this.courseService.query(this.filterConfig);
         this.courses.set(response.rows);
         this.cdr.detectChanges();
@@ -2647,7 +2586,7 @@ class CourseListComponent extends PaginationBase {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseListComponent, isStandalone: true, selector: "app-course-list", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: false, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n\n        />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course.updatedAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$2.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseListComponent, isStandalone: true, selector: "app-course-list", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: false, isRequired: false, transformFunction: null }, onlyView: { classPropertyName: "onlyView", publicName: "onlyView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onSelect: "onSelect" }, usesInheritance: true, ngImport: i0, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course?.auditable?.createdAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n\n        <p-tag severity=\"success\" [value]=\"course.baseLang | langDesc : 'es'\" [rounded]=\"true\" />\n        ->\n        <p-tag severity=\"info\" [value]=\"course.targetLang | langDesc : 'es'\" [rounded]=\"true\" />\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin:20px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin:20px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"], dependencies: [{ kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "component", type: DCFilterBarComponent, selector: "dc-filter-bar", inputs: ["items", "options", "customFilters"], outputs: ["onFilterAction", "onChangeSort", "onNew"] }, { kind: "ngmodule", type: SpeedDialModule }, { kind: "component", type: i2$1.SpeedDial, selector: "p-speeddial, p-speedDial, p-speed-dial", inputs: ["id", "model", "visible", "style", "className", "direction", "transitionDelay", "type", "radius", "mask", "disabled", "hideOnClickOutside", "buttonStyle", "buttonClassName", "maskStyle", "maskClassName", "showIcon", "hideIcon", "rotateAnimation", "ariaLabel", "ariaLabelledBy", "tooltipOptions", "buttonProps"], outputs: ["onVisibleChange", "visibleChange", "onClick", "onShow", "onHide"] }, { kind: "ngmodule", type: PaginatorModule }, { kind: "component", type: i1$3.Paginator, selector: "p-paginator", inputs: ["pageLinkSize", "styleClass", "alwaysShow", "dropdownAppendTo", "templateLeft", "templateRight", "dropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showFirstLastIcon", "totalRecords", "rows", "rowsPerPageOptions", "showJumpToPageDropdown", "showJumpToPageInput", "jumpToPageItemTemplate", "showPageLinks", "locale", "dropdownItemTemplate", "first", "appendTo"], outputs: ["onPageChange"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TableModule }, { kind: "component", type: QuickTableComponent, selector: "app-quick-table", inputs: ["columns", "tableData", "actions"], outputs: ["onAction"] }, { kind: "ngmodule", type: TagModule }, { kind: "component", type: i4$1.Tag, selector: "p-tag", inputs: ["styleClass", "severity", "value", "icon", "rounded"] }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: SlicePipe, name: "slice" }, { kind: "pipe", type: LangDescTranslation, name: "langDesc" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseListComponent, decorators: [{
             type: Component,
@@ -2662,24 +2601,72 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         RouterModule,
                         TableModule,
                         QuickTableComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n\n        />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course.updatedAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin-top:10px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin-bottom:10px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"] }]
+                        TagModule,
+                        LangDescTranslation,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!onlyView()) {\n<p-button [icon]=\"viewType === 'card' ? 'pi pi-table' : 'pi pi-list'\" label=\"Change View\" [link]=\"true\" (click)=\"toggleView()\" />\n}\n<div class=\"course-list-container\">\n  <dc-filter-bar [options]=\"filterBarOptions\" (onNew)=\"onNew()\" (onFilterAction)=\"doAction($event)\"></dc-filter-bar>\n\n  @if (viewType === 'card') {\n  <div class=\"course-list-content\">\n    @for (course of courses(); track course.id) {\n    <div class=\"card-source\">\n      <div style=\"position: absolute; top: 4px; right: 4px; z-index: 1000\">\n        <p-speeddial\n          [model]=\"getCustomButtons(course)\"\n          [radius]=\"70\"\n          type=\"quarter-circle\"\n          direction=\"down-left\"\n          [buttonProps]=\"{ severity: 'primary', rounded: true, outlined: true }\"\n          [tooltipOptions]=\"{ tooltipPosition: 'top' }\" />\n      </div>\n      <p-card [header]=\"course.name\">\n        <p class=\"m-0\">{{ course.description | slice : 0 : 250 }}...</p>\n        <span>{{ course?.auditable?.createdAt | date : 'dd/MM/yyyy HH:mm' }}</span>\n\n        <p-tag severity=\"success\" [value]=\"course.baseLang | langDesc : 'es'\" [rounded]=\"true\" />\n        ->\n        <p-tag severity=\"info\" [value]=\"course.targetLang | langDesc : 'es'\" [rounded]=\"true\" />\n      </p-card>\n    </div>\n    } @if (courses().length === 0) {\n    <p-card>\n      <p>No courses found</p>\n    </p-card>\n    }\n  </div>\n  } @else if ( viewType == 'table'){\n\n  <app-quick-table [tableData]=\"courses()\"></app-quick-table>\n\n  }\n\n  <div class=\"paginator-container\">\n    <p-paginator\n      currentPageReportTemplate=\"{{ totalRecords }} conversations\"\n      [showCurrentPageReport]=\"true\"\n      (onPageChange)=\"onPageChange($event)\"\n      [totalRecords]=\"totalRecords\"\n      [rowsPerPageOptions]=\"[10, 20, 30]\">\n    </p-paginator>\n  </div>\n</div>\n", styles: [":host{display:block;height:100%}.course-list-container{display:flex;flex-direction:column;height:100%}.course-list-content{margin:20px;flex:1;overflow-y:auto;padding-bottom:10px}.card-source{margin:20px;position:relative}.paginator-container{margin-top:auto;padding-top:10px}\n"] }]
         }], propDecorators: { viewType: [{
                 type: Input
             }] } });
 
 class CourseDetailComponent {
+    constructor() {
+        this.entityCommunicationService = inject(CourseService);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.messageService = inject(MessageService);
+        this.courseId = this.activatedRoute.snapshot.paramMap.get('id');
+        this.course = signal(null, ...(ngDevMode ? [{ debugName: "course" }] : []));
+        this.generatingLessons = signal(false, ...(ngDevMode ? [{ debugName: "generatingLessons" }] : []));
+        this.generatingLesson = signal('', ...(ngDevMode ? [{ debugName: "generatingLesson" }] : []));
+    }
+    ngOnInit() {
+        this.loadCourse();
+    }
+    async generatePendingLessons() {
+        this.generatingLessons.set(true);
+        try {
+            await this.entityCommunicationService.autogenerateLessons(this.courseId);
+            this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Lessons generated successfully' });
+            this.loadCourse();
+        }
+        catch (error) {
+            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error generating lessons' });
+        }
+        finally {
+            this.generatingLessons.set(false);
+        }
+    }
+    async generateLesson(lessonId) {
+        this.generatingLesson.set(lessonId);
+        try {
+            // TODO: Implement the generateLesson method
+            // await this.entityCommunicationService.autogenerateLesson(this.courseId, lessonId);
+            this.messageService.add({ severity: 'success', summary: 'Success', detail: 'Lesson generated successfully' });
+            this.loadCourse();
+        }
+        catch (error) {
+            this.messageService.add({ severity: 'error', summary: 'Error', detail: 'Error generating lesson' });
+        }
+        finally {
+            this.generatingLesson.set('');
+        }
+    }
+    async loadCourse() {
+        const course = await this.entityCommunicationService.findOne(this.courseId);
+        this.course.set(course);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", ngImport: i0, template: `<p>course-detail works!</p>`, isInline: true, styles: [":host{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseDetailComponent, isStandalone: true, selector: "app-course-detail", providers: [MessageService], ngImport: i0, template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "directive", type: i2$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: PanelModule }, { kind: "component", type: i3$2.Panel, selector: "p-panel", inputs: ["toggleable", "header", "collapsed", "id", "styleClass", "iconPos", "showHeader", "toggler", "transitionOptions", "toggleButtonProps"], outputs: ["collapsedChange", "onBeforeToggle", "onAfterToggle"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: ProgressSpinnerModule }, { kind: "component", type: i5$2.ProgressSpinner, selector: "p-progressSpinner, p-progress-spinner, p-progressspinner", inputs: ["styleClass", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "ngmodule", type: ToastModule }, { kind: "ngmodule", type: TagModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseDetailComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-course-detail', imports: [], template: `<p>course-detail works!</p>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block}\n"] }]
+            args: [{ selector: 'app-course-detail', imports: [CommonModule, CardModule, PanelModule, ButtonModule, ProgressSpinnerModule, ToastModule, TagModule], changeDetection: ChangeDetectionStrategy.OnPush, providers: [MessageService], template: "@if (course(); as course) {\n<div class=\"course-detail-container p-4\">\n  <p-card>\n    <ng-template pTemplate=\"title\">\n      <div class=\"flex justify-content-between align-items-center\">\n        <span>{{ course.name }}</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"subtitle\">\n      <div class=\"flex align-items-center gap-2\">\n        <i class=\"pi pi-book\"></i>\n        <span>{{ course.moduleCount }} Modules / {{ course.totalLessons }} Lessons</span>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"content\">\n      <p>{{ course.description }}</p>\n\n      <div class=\"grid mt-3\">\n        @for (module of course.modules; track module.id) {\n        <div class=\"col-12 md:col-6\">\n          <p-panel [toggleable]=\"true\">\n            <ng-template pTemplate=\"header\">\n              <div class=\"flex align-items-center gap-2 w-full\">\n                <i class=\"pi pi-list\"></i>\n                <span class=\"font-bold white-space-nowrap\">{{ module.title }}</span>\n                <span class=\"text-sm text-color-secondary ml-auto\">{{ module.lessonCount }} lessons</span>\n              </div>\n            </ng-template>\n            <ng-template pTemplate=\"content\">\n              <p>{{ module.description }}</p>\n              <ul class=\"list-none p-0 m-0 lessons-list\">\n                @for (lesson of module.lessons; track lesson.id) {\n                <li class=\"flex align-items-center justify-content-between p-2 border-bottom-1 surface-border\">\n                  <div class=\"flex align-items-center gap-2\">\n                    @if(lesson.generated) {\n                    <i class=\"pi pi-play-circle text-green-500\"></i>\n                    } @else {\n                    <i class=\"pi pi-lock text-gray-500\"></i>\n                    }\n                    <span>{{ lesson.title }}</span>\n                  </div>\n                  @if(lesson.generated) {\n                  <p-button icon=\"pi pi-chevron-right\" [text]=\"true\" [rounded]=\"true\"></p-button>\n                  } @else {\n                  <p-button label=\"Generate\" icon=\"pi pi-cog\" [text]=\"true\" size=\"small\"></p-button>\n                  }\n                </li>\n                }\n              </ul>\n            </ng-template>\n          </p-panel>\n        </div>\n        }\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"footer\">\n      <div class=\"flex justify-content-end\">\n        <p-button label=\"Generate Pending Lessons\" icon=\"pi pi-cogs\" (onClick)=\"generatePendingLessons()\" [loading]=\"generatingLessons()\"></p-button>\n      </div>\n    </ng-template>\n  </p-card>\n</div>\n} @else {\n<div class=\"flex justify-content-center align-items-center h-full\">\n  <p-progressSpinner></p-progressSpinner>\n</div>\n}\n", styles: [":host{display:block;height:100%}.course-detail-container{max-width:960px;margin:auto}.lessons-list li:last-child{border-bottom:none!important}.modules-container{display:flex;flex-direction:row;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:1rem}.modules-container .p-panel{flex:0 0 48%;max-width:48%}\n"] }]
         }] });
 
 class CourseFormComponent extends EntityBaseFormComponent {
     constructor() {
-        super(...arguments);
+        super();
         this.entityCommunicationService = inject(CourseService);
+        this.loadingBarService = inject(LoadingBarService);
         this.fb = inject(FormBuilder);
         this.languageOptions = getSupportedLanguageOptions('en');
         this.form = this.fb.group({
@@ -2698,11 +2685,15 @@ class CourseFormComponent extends EntityBaseFormComponent {
             { key: 'title', type: 'input', props: { label: 'Title', placeholder: 'Title', required: false } },
             { key: 'content', type: 'textarea', props: { label: 'Content', placeholder: 'Content', required: false } },
         ];
+        effect(() => {
+            console.log(this.entity());
+        });
     }
     patchForm(entity) {
         this.form.patchValue(entity);
     }
     async save() {
+        this.toastService.success({ title: 'Course', subtitle: 'Data was saved' });
         const result = await super.save();
         if (result) {
             this.onSave.emit(result);
@@ -2715,8 +2706,21 @@ class CourseFormComponent extends EntityBaseFormComponent {
     handleImageUpload(event) {
         this.form.patchValue({ image: event });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i3$1.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i2$3.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: DialogModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    async generateCourse() {
+        const { baseLang, targetLang } = this.form.value;
+        if (baseLang && targetLang) {
+            this.toastService.info({ title: 'Course Generating', subtitle: 'Este proceso puede tomar unos minutos' });
+            this.loadingBarService.showIndeterminate();
+            const course = await this.entityCommunicationService.generateLanguageCourse(baseLang, targetLang, this.entity()?.id);
+            this.form.patchValue(course);
+            if (this.toastService) {
+                this.toastService.success({ title: 'Course Generated', subtitle: 'Course content has been generated successfully.' });
+            }
+            this.loadingBarService.successAndHide();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.6", type: CourseFormComponent, isStandalone: true, selector: "app-source-form", outputs: { onSave: "onSave" }, usesInheritance: true, ngImport: i0, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CardModule }, { kind: "component", type: i1$2.Card, selector: "p-card", inputs: ["header", "subheader", "style", "styleClass"] }, { kind: "ngmodule", type: TextareaModule }, { kind: "directive", type: i3$3.Textarea, selector: "[pTextarea], [pInputTextarea]", inputs: ["autoResize", "pSize", "variant", "fluid", "invalid"], outputs: ["onResize"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "component", type: i1$1.Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "variant", "style", "styleClass", "badgeClass", "badgeSeverity", "ariaLabel", "buttonProps", "autofocus", "fluid"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: SelectModule }, { kind: "component", type: i2.Select, selector: "p-select", inputs: ["id", "scrollHeight", "filter", "panelStyle", "styleClass", "panelStyleClass", "readonly", "editable", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "filterValue", "options", "appendTo"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputTextModule }, { kind: "directive", type: i3.InputText, selector: "[pInputText]", inputs: ["pSize", "variant", "fluid", "invalid"] }, { kind: "ngmodule", type: ChipModule }, { kind: "ngmodule", type: TooltipModule }, { kind: "directive", type: i7.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions", "appendTo"] }, { kind: "component", type: CropperComponentModal, selector: "dc-cropper-modal", inputs: ["imgStorageSettings", "buttonLabel", "currentStorage"], outputs: ["imageUploaded", "onImageCropped", "onFileSelected"] }, { kind: "ngmodule", type: FormlyModule }, { kind: "ngmodule", type: DialogModule }, { kind: "ngmodule", type: MessageModule }, { kind: "component", type: i4.Message, selector: "p-message", inputs: ["severity", "text", "escape", "style", "styleClass", "closable", "icon", "closeIcon", "life", "showTransitionOptions", "hideTransitionOptions", "size", "variant"], outputs: ["onClose"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CourseFormComponent, decorators: [{
             type: Component,
@@ -2733,8 +2737,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
                         FormlyModule,
                         DialogModule,
                         CourseListComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
-        }] });
+                        MessageModule,
+                        RouterLink,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, template: "<h3>Courses Form</h3>\n\n<div class=\"source-form-card\">\n  <p-card [header]=\"entityId() ? 'Edit Course' : 'New Course'\">\n    <form [formGroup]=\"form\">\n      <div class=\"form-field\">\n        <label for=\"baseLang\">Base Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"baseLang\"\n          [options]=\"languageOptions\"\n          [filter]=\"true\"\n          formControlName=\"baseLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n      <div class=\"form-field\">\n        <label for=\"targetLang\">Target Language <span pTooltip=\"Select the primary language for the conversation\">\u2139\uFE0F</span></label>\n        <p-select\n          id=\"targetLang\"\n          [filter]=\"true\"\n          [options]=\"languageOptions\"\n          formControlName=\"targetLang\"\n          optionLabel=\"label\"\n          optionValue=\"value\"\n          [placeholder]=\"'Select Language'\"></p-select>\n      </div>\n\n      <div style=\"display: flex; gap: 10px\">\n        <div class=\"form-field\">\n          <label class=\"block\" pTooltip=\"Image should be handle after upload\">Subir imagen</label>\n          <img width=\"218px\" src=\"assets/images/face-3.jpg\" />\n          <dc-cropper-modal [imgStorageSettings]=\"storageImgSettings\" (imageUploaded)=\"handleImageUpload($event)\"></dc-cropper-modal>\n        </div>\n\n        <div style=\"width: 100%\">\n          <div class=\"form-field\">\n            <label for=\"name\" class=\"block\">Name</label>\n            <input pInputText id=\"name\" type=\"text\" formControlName=\"name\" placeholder=\"Enter source name\" />\n          </div>\n\n          <div class=\"form-field\">\n            <label for=\"description\" class=\"block\">Description</label>\n            <textarea id=\"description\" pTextarea formControlName=\"description\" rows=\"5\" class=\"w-full\" placeholder=\"Enter source content\"> </textarea>\n          </div>\n        </div>\n      </div>\n    </form>\n\n    <div>\n      @if (entity()?.modules?.length > 0) {\n      <p-message severity=\"info\"\n        >El curso ya tiene modulos,\n\n        <a routerLink=\"../../details/{{ entity()?.id }}\"> <p-button icon=\"pi pi-eye\" label=\"Ver a los detalles\" [link]=\"true\"></p-button></a>\n      </p-message>\n      } @else {\n      <p-message severity=\"warn\">Este curso no tiene modulos intentega generalos abajo.</p-message>\n      }\n    </div>\n\n    <div style=\"display: flex; justify-content: flex-end\">\n      <p-button\n        (click)=\"generateCourse()\"\n        label=\"Generate Course\"\n        [disabled]=\"!form.controls['baseLang'].valid || !form.controls['targetLang'].valid\"\n        icon=\"pi pi-sparkles\"\n        iconPos=\"right\"\n        styleClass=\"p-button-secondary\"></p-button>\n      <p-button (click)=\"save()\" label=\"Save Course\" [disabled]=\"!form.valid\" icon=\"pi pi-check\" iconPos=\"right\"> </p-button>\n    </div>\n  </p-card>\n</div>\n", styles: [":host{display:block;padding:1rem}.source-form-card{max-width:800px;margin:0 auto}.form-field{margin-bottom:1.5rem;display:flex;flex-direction:column}.form-field label{margin-bottom:.5rem;font-weight:500;color:#495057}.form-field input,.form-field textarea,.form-field ::ng-deep .p-element{margin-top:.25rem}:host ::ng-deep .p-card .p-card-content>div:last-child{margin-top:1.5rem;display:flex;justify-content:flex-end}:host ::ng-deep .p-card .p-card-header{background-color:#f8f9fa;padding:1rem;border-bottom:1px solid #dee2e6}h3{color:#495057;margin-bottom:1.5rem;text-align:center}\n"] }]
+        }], ctorParameters: () => [] });
 
 const COURSES_ROUTES = [
     {
@@ -2764,7 +2770,7 @@ const COURSES_ROUTES = [
 class CoursesComponent {
     static { this.routes = COURSES_ROUTES; }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CoursesComponent, isStandalone: true, selector: "app-courses", ngImport: i0, template: "<router-outlet />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.6", type: CoursesComponent, isStandalone: true, selector: "app-courses", ngImport: i0, template: "<router-outlet />\n", styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImport: i0, type: CoursesComponent, decorators: [{
             type: Component,
@@ -2779,5 +2785,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ComponentBuilder, ComponentWithForm, CourseDetailComponent, CourseFormComponent, CourseListComponent, CourseService, CoursesAdminComponent, CoursesComponent, CoursesService, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, DynamicComponentBuilders, DynamicComponents, DynamicComponentsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LangDescTranslationPipe, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonDynamicComponent, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
+export { ComponentBuilder, ComponentWithForm, CourseDetailComponent, CourseFormComponent, CourseListComponent, CourseService, CoursesAdminComponent, CoursesComponent, CoursesService, DCLessonEditorComponent, DCLessonFormComponent, DCLessonListComponent, DCLessonRendererComponent, DcLessonCardComponent, DefaultLessonsService, DynamicComponentBuilders, DynamicComponents, DynamicComponentsService, FlagLanguagePipe, LESSONS_TOKEN, LangCodeDescription, LangCodeDescriptionEs, LessonComponentBuilders, LessonComponentEnum, LessonComponents, LessonConversationService, LessonDynamicComponent, LessonRendererService, LessonsV2Component, NOTION_SERVICE_TOKEN, NotionAbstractService, NotionExportType, SelectorBuilderComponent, SelectorComponent, TextWriterBuiderComponent, TextWriterComponent, TranslationSwitcherBuilderComponent, TranslationSwitcherComponent, getLanguageSimpleAgent, getLessonComponentClass, provideLessonsService, provideNotionService };
 //# sourceMappingURL=dataclouder-ngx-lessons.mjs.map