import { Component } from '@angular/core';
import { Subject, BehaviorSubject, debounceTime, distinctUntilChanged, takeUntil } from 'rxjs';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { RunView } from '@memberjunction/core';
import { MJNotificationService } from '@memberjunction/ng-notifications';
import { UUIDsEqual } from '@memberjunction/global';
import * as i0 from "@angular/core";
import * as i1 from "@progress/kendo-angular-dialog";
import * as i2 from "@angular/forms";
import * as i3 from "@angular/common";
const _forTrack0 = ($index, $item) => $item.ID;
function TemplateSelectorDialogComponent_For_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 11);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const category_r1 = ctx.$implicit;
    i0.ɵɵproperty("value", category_r1.ID);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(category_r1.Name);
} }
function TemplateSelectorDialogComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 12);
    i0.ɵɵelement(1, "i", 20);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "Loading templates...");
    i0.ɵɵelementEnd()();
} }
function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "input", 37);
    i0.ɵɵlistener("change", function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_2_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r5); const template_r3 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.toggleTemplateSelection(template_r3)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const template_r3 = i0.ɵɵnextContext().$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("checked", ctx_r3.isTemplateSelected(template_r3));
} }
function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "input", 38);
    i0.ɵɵlistener("change", function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r6); const template_r3 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.toggleTemplateSelection(template_r3)); });
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const template_r3 = i0.ɵɵnextContext().$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("checked", ctx_r3.isTemplateSelected(template_r3));
} }
function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 33);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const template_r3 = i0.ɵɵnextContext().$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r3.getTemplatePreview(template_r3), " ");
} }
function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 35);
    i0.ɵɵelement(1, "i", 39);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const template_r3 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(template_r3.Category);
} }
function TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 35);
    i0.ɵɵelement(1, "i", 40);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const template_r3 = i0.ɵɵnextContext().$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(ctx_r3.formatDate(template_r3.__mj_CreatedAt));
} }
function TemplateSelectorDialogComponent_Conditional_21_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 24);
    i0.ɵɵlistener("click", function TemplateSelectorDialogComponent_Conditional_21_For_2_Template_div_click_0_listener() { const template_r3 = i0.ɵɵrestoreView(_r2).$implicit; const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.toggleTemplateSelection(template_r3)); });
    i0.ɵɵelementStart(1, "div", 25);
    i0.ɵɵconditionalCreate(2, TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_2_Template, 1, 1, "input", 26)(3, TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_3_Template, 1, 1, "input", 27);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 28)(5, "div", 29)(6, "h4", 30);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(8, "div", 31)(9, "span", 32);
    i0.ɵɵtext(10);
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(11, TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_11_Template, 2, 1, "div", 33);
    i0.ɵɵelementStart(12, "div", 34)(13, "div", 35);
    i0.ɵɵelement(14, "i", 36);
    i0.ɵɵelementStart(15, "span");
    i0.ɵɵtext(16);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(17, TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_17_Template, 4, 1, "div", 35);
    i0.ɵɵconditionalCreate(18, TemplateSelectorDialogComponent_Conditional_21_For_2_Conditional_18_Template, 4, 1, "div", 35);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const template_r3 = ctx.$implicit;
    const ctx_r3 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("selected", ctx_r3.isTemplateSelected(template_r3));
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r3.config.multiSelect ? 2 : 3);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(template_r3.Name);
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("background-color", ctx_r3.getTemplateStatusColor(template_r3));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r3.getTemplateStatusText(template_r3), " ");
    i0.ɵɵadvance();
    i0.ɵɵconditional(template_r3.Description ? 11 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(template_r3.User || "Unknown User");
    i0.ɵɵadvance();
    i0.ɵɵconditional(template_r3.Category ? 17 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(template_r3.__mj_CreatedAt ? 18 : -1);
} }
function TemplateSelectorDialogComponent_Conditional_21_ForEmpty_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 23);
    i0.ɵɵelement(1, "i", 41);
    i0.ɵɵelementStart(2, "h4");
    i0.ɵɵtext(3, "No templates found");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "No templates match your current search criteria.");
    i0.ɵɵelementEnd()();
} }
function TemplateSelectorDialogComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 21);
    i0.ɵɵrepeaterCreate(1, TemplateSelectorDialogComponent_Conditional_21_For_2_Template, 19, 11, "div", 22, _forTrack0, false, TemplateSelectorDialogComponent_Conditional_21_ForEmpty_3_Template, 6, 0, "div", 23);
    i0.ɵɵpipe(4, "async");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r3 = i0.ɵɵnextContext();
    i0.ɵɵclassProp("grid-mode", ctx_r3.viewMode === "grid");
    i0.ɵɵadvance();
    i0.ɵɵrepeater(i0.ɵɵpipeBind1(4, 3, ctx_r3.filteredTemplates$));
} }
function TemplateSelectorDialogComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 42);
    i0.ɵɵlistener("click", function TemplateSelectorDialogComponent_Conditional_25_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.createNew()); });
    i0.ɵɵelement(1, "i", 43);
    i0.ɵɵtext(2, " Create New ");
    i0.ɵɵelementEnd();
} }
/**
 * Template selector dialog that allows users to search and select from existing templates.
 * This dialog provides a searchable interface with category filtering and template preview.
 */
export class TemplateSelectorDialogComponent {
    constructor(dialogRef, cdr) {
        this.dialogRef = dialogRef;
        this.cdr = cdr;
        // Input configuration
        this.config = { title: 'Select Template' };
        // State management
        this.destroy$ = new Subject();
        this.result = new Subject();
        // Data and UI state
        this.isLoading$ = new BehaviorSubject(false);
        this.templates$ = new BehaviorSubject([]);
        this.filteredTemplates$ = new BehaviorSubject([]);
        this.categories$ = new BehaviorSubject([]);
        // Search and filtering
        this.searchControl = new FormControl('');
        this.selectedCategory = null;
        this.selectedTemplates = new Set();
        // View mode
        this.viewMode = 'list';
    }
    ngOnInit() {
        this.setupSearch();
        this.loadData();
        // Initialize selected templates if provided
        if (this.config.selectedTemplateIds) {
            this.selectedTemplates = new Set(this.config.selectedTemplateIds);
        }
    }
    ngOnDestroy() {
        this.destroy$.next();
        this.destroy$.complete();
    }
    setupSearch() {
        this.searchControl.valueChanges
            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
            .subscribe(searchTerm => {
            this.filterTemplates(searchTerm || '');
        });
    }
    async loadData() {
        this.isLoading$.next(true);
        try {
            // Load both templates and categories in parallel
            await Promise.all([
                this.loadTemplates(),
                this.loadCategories()
            ]);
        }
        catch (error) {
            console.error('Error loading template data:', error);
            MJNotificationService.Instance.CreateSimpleNotification('Error loading templates. Please try again.', 'error', 3000);
        }
        finally {
            this.isLoading$.next(false);
        }
    }
    async loadTemplates() {
        try {
            const rv = new RunView();
            // Build filter
            let filter = '';
            if (this.config.showActiveOnly !== false) {
                filter = "IsActive = 1";
            }
            if (this.config.extraFilter) {
                filter += filter ? ` AND ${this.config.extraFilter}` : this.config.extraFilter;
            }
            const result = await rv.RunView({
                EntityName: 'MJ: Templates',
                ExtraFilter: filter,
                OrderBy: 'Name ASC',
                ResultType: 'entity_object',
                MaxRows: 1000
            });
            if (result.Success) {
                const templates = result.Results || [];
                this.templates$.next(templates);
                this.filteredTemplates$.next(templates);
            }
            else {
                throw new Error(result.ErrorMessage || 'Failed to load templates');
            }
        }
        catch (error) {
            console.error('Error loading templates:', error);
            this.templates$.next([]);
            this.filteredTemplates$.next([]);
        }
    }
    async loadCategories() {
        try {
            const rv = new RunView();
            const result = await rv.RunView({
                EntityName: 'MJ: Template Categories',
                ExtraFilter: '',
                OrderBy: 'Name ASC',
                ResultType: 'entity_object',
                MaxRows: 1000
            });
            if (result.Success) {
                const categories = result.Results || [];
                this.categories$.next(categories);
            }
            else {
                throw new Error(result.ErrorMessage || 'Failed to load categories');
            }
        }
        catch (error) {
            console.error('Error loading categories:', error);
            this.categories$.next([]);
        }
    }
    filterTemplates(searchTerm) {
        const allTemplates = this.templates$.value;
        let filtered = allTemplates;
        // Apply search filter
        if (searchTerm.trim()) {
            filtered = filtered.filter(template => template.Name?.toLowerCase().includes(searchTerm.toLowerCase()) ||
                template.Description?.toLowerCase().includes(searchTerm.toLowerCase()));
        }
        // Apply category filter
        if (this.selectedCategory) {
            filtered = filtered.filter(template => UUIDsEqual(template.CategoryID, this.selectedCategory));
        }
        this.filteredTemplates$.next(filtered);
    }
    // === Category Management ===
    onCategoryChange(categoryId) {
        this.selectedCategory = categoryId === '' ? null : categoryId;
        this.filterTemplates(this.searchControl.value || '');
    }
    getCategoryDisplayName(categoryId) {
        const category = this.categories$.value.find(c => UUIDsEqual(c.ID, categoryId));
        return category?.Name || 'Unknown Category';
    }
    // === Selection Management ===
    toggleTemplateSelection(template) {
        if (this.config.multiSelect) {
            if (this.selectedTemplates.has(template.ID)) {
                this.selectedTemplates.delete(template.ID);
            }
            else {
                this.selectedTemplates.add(template.ID);
            }
        }
        else {
            // Single select - replace current selection
            this.selectedTemplates.clear();
            this.selectedTemplates.add(template.ID);
        }
    }
    isTemplateSelected(template) {
        return this.selectedTemplates.has(template.ID);
    }
    getSelectedTemplateObjects() {
        const allTemplates = this.templates$.value;
        return allTemplates.filter(template => this.selectedTemplates.has(template.ID));
    }
    // === UI Helpers ===
    toggleViewMode() {
        this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
    }
    getTemplateStatusColor(template) {
        if (!template.IsActive)
            return '#6c757d';
        if (template.DisabledAt && new Date(template.DisabledAt) <= new Date())
            return '#dc3545';
        if (template.ActiveAt && new Date(template.ActiveAt) > new Date())
            return '#ffc107';
        return '#28a745';
    }
    getTemplateStatusText(template) {
        if (!template.IsActive)
            return 'Inactive';
        if (template.DisabledAt && new Date(template.DisabledAt) <= new Date())
            return 'Disabled';
        if (template.ActiveAt && new Date(template.ActiveAt) > new Date())
            return 'Scheduled';
        return 'Active';
    }
    getTemplatePreview(template) {
        if (!template.Description)
            return 'No description available';
        return template.Description.length > 100
            ? template.Description.substring(0, 100) + '...'
            : template.Description;
    }
    formatDate(date) {
        if (!date)
            return '';
        const d = new Date(date);
        return d.toLocaleDateString();
    }
    // === Dialog Actions ===
    selectTemplates() {
        const selectedTemplateObjects = this.getSelectedTemplateObjects();
        if (selectedTemplateObjects.length === 0) {
            MJNotificationService.Instance.CreateSimpleNotification('Please select at least one template', 'warning', 2000);
            return;
        }
        const result = {
            selectedTemplates: selectedTemplateObjects
        };
        this.result.next(result);
        this.dialogRef.close();
    }
    createNew() {
        const result = {
            selectedTemplates: [],
            createNew: true
        };
        this.result.next(result);
        this.dialogRef.close();
    }
    cancel() {
        this.result.next(null);
        this.dialogRef.close();
    }
    static { this.ɵfac = function TemplateSelectorDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TemplateSelectorDialogComponent)(i0.ɵɵdirectiveInject(i1.DialogRef), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); }; }
    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: TemplateSelectorDialogComponent, selectors: [["mj-template-selector-dialog"]], decls: 31, vars: 17, consts: [[1, "template-selector-dialog"], [1, "dialog-header"], [1, "header-actions"], ["kendoButton", "", "size", "small", 3, "click"], [1, "search-filter-section"], [1, "search-container"], ["placeholder", "Search templates...", 1, "k-input", "k-textbox", 3, "formControl"], [1, "fa-solid", "fa-search", "search-icon"], [1, "category-filter"], [1, "k-input", "k-dropdown", 3, "change", "value"], ["value", ""], [3, "value"], [1, "loading-container"], [1, "templates-container", 3, "grid-mode"], [1, "dialog-actions"], [1, "action-buttons"], ["kendoButton", "", "themeColor", "secondary"], ["kendoButton", "", 3, "click"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "templates-container"], [1, "template-item", 3, "selected"], [1, "no-templates"], [1, "template-item", 3, "click"], [1, "selection-indicator"], ["type", "checkbox", 3, "checked"], ["type", "radio", 3, "checked"], [1, "template-info"], [1, "template-header"], [1, "template-name"], [1, "template-status"], [1, "status-badge"], [1, "template-description"], [1, "template-metadata"], [1, "metadata-item"], [1, "fa-solid", "fa-user"], ["type", "checkbox", 3, "change", "checked"], ["type", "radio", 3, "change", "checked"], [1, "fa-solid", "fa-folder"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-file-alt", "fa-3x"], ["kendoButton", "", "themeColor", "secondary", 3, "click"], [1, "fa-solid", "fa-plus"]], template: function TemplateSelectorDialogComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "h3");
            i0.ɵɵtext(3);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(4, "div", 2)(5, "button", 3);
            i0.ɵɵlistener("click", function TemplateSelectorDialogComponent_Template_button_click_5_listener() { return ctx.toggleViewMode(); });
            i0.ɵɵelement(6, "i");
            i0.ɵɵtext(7);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(8, "div", 4)(9, "div", 5);
            i0.ɵɵelement(10, "input", 6)(11, "i", 7);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(12, "div", 8)(13, "select", 9);
            i0.ɵɵlistener("change", function TemplateSelectorDialogComponent_Template_select_change_13_listener($event) { return ctx.onCategoryChange($event.target.value || null); });
            i0.ɵɵelementStart(14, "option", 10);
            i0.ɵɵtext(15, "All Categories");
            i0.ɵɵelementEnd();
            i0.ɵɵrepeaterCreate(16, TemplateSelectorDialogComponent_For_17_Template, 2, 2, "option", 11, _forTrack0);
            i0.ɵɵpipe(18, "async");
            i0.ɵɵelementEnd()()();
            i0.ɵɵconditionalCreate(19, TemplateSelectorDialogComponent_Conditional_19_Template, 4, 0, "div", 12);
            i0.ɵɵpipe(20, "async");
            i0.ɵɵconditionalCreate(21, TemplateSelectorDialogComponent_Conditional_21_Template, 5, 5, "div", 13);
            i0.ɵɵpipe(22, "async");
            i0.ɵɵelementStart(23, "div", 14)(24, "div", 15);
            i0.ɵɵconditionalCreate(25, TemplateSelectorDialogComponent_Conditional_25_Template, 3, 0, "button", 16);
            i0.ɵɵelementStart(26, "button", 17);
            i0.ɵɵlistener("click", function TemplateSelectorDialogComponent_Template_button_click_26_listener() { return ctx.cancel(); });
            i0.ɵɵtext(27, " Cancel ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(28, "button", 18);
            i0.ɵɵlistener("click", function TemplateSelectorDialogComponent_Template_button_click_28_listener() { return ctx.selectTemplates(); });
            i0.ɵɵelement(29, "i", 19);
            i0.ɵɵtext(30);
            i0.ɵɵelementEnd()()()();
        } if (rf & 2) {
            i0.ɵɵadvance(3);
            i0.ɵɵtextInterpolate(ctx.config.title);
            i0.ɵɵadvance(3);
            i0.ɵɵclassMap(ctx.viewMode === "list" ? "fa-solid fa-th" : "fa-solid fa-list");
            i0.ɵɵadvance();
            i0.ɵɵtextInterpolate1(" ", ctx.viewMode === "list" ? "Grid" : "List", " ");
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("formControl", ctx.searchControl);
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("value", ctx.selectedCategory || "");
            i0.ɵɵadvance(3);
            i0.ɵɵrepeater(i0.ɵɵpipeBind1(18, 11, ctx.categories$));
            i0.ɵɵadvance(3);
            i0.ɵɵconditional(i0.ɵɵpipeBind1(20, 13, ctx.isLoading$) ? 19 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(!i0.ɵɵpipeBind1(22, 15, ctx.isLoading$) ? 21 : -1);
            i0.ɵɵadvance(4);
            i0.ɵɵconditional(ctx.config.showCreateNew ? 25 : -1);
            i0.ɵɵadvance(3);
            i0.ɵɵproperty("disabled", ctx.selectedTemplates.size === 0);
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate1(" Select ", ctx.selectedTemplates.size > 0 ? "(" + ctx.selectedTemplates.size + ")" : "", " ");
        } }, dependencies: [CommonModule, ReactiveFormsModule, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.NgControlStatus, i2.FormControlDirective, i3.AsyncPipe], styles: ["\n\n.template-selector-dialog[_ngcontent-%COMP%] {\n  padding: 20px;\n  width: 100%;\n  max-width: 800px;\n  height: 600px;\n  display: flex;\n  flex-direction: column;\n}\n\n\n\n.dialog-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.5rem;\n  color: var(--mj-text-primary);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n}\n\n\n\n.search-filter-section[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 20px;\n}\n\n.search-container[_ngcontent-%COMP%] {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  pointer-events: none;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n  padding-left: 35px;\n  width: 100%;\n}\n\n.category-filter[_ngcontent-%COMP%] {\n  min-width: 200px;\n}\n\n.category-filter[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 60px;\n  font-size: 1.1rem;\n  color: var(--mj-text-secondary);\n}\n\n.loading-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  color: var(--mj-brand-primary);\n}\n\n\n\n.templates-container[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  padding: 10px;\n}\n\n.templates-container.grid-mode[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 15px;\n}\n\n\n\n.template-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 15px;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n.template-item[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.template-item.selected[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.grid-mode[_ngcontent-%COMP%]   .template-item[_ngcontent-%COMP%] {\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n.grid-mode[_ngcontent-%COMP%]   .template-item[_ngcontent-%COMP%]   .selection-indicator[_ngcontent-%COMP%] {\n  align-self: flex-end;\n}\n\n\n\n.selection-indicator[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.selection-indicator[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%], \n.selection-indicator[_ngcontent-%COMP%]   input[type=\"radio\"][_ngcontent-%COMP%] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n\n\n.template-info[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.template-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n\n.template-name[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  word-break: break-word;\n}\n\n.template-status[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  margin-left: 10px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n\n\n.template-description[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  color: var(--mj-text-secondary);\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n\n\n.template-metadata[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 15px;\n  font-size: 0.85rem;\n  color: var(--mj-text-muted);\n}\n\n.metadata-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.metadata-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.8rem;\n  color: var(--mj-text-muted);\n}\n\n\n\n.no-templates[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.no-templates[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-bottom: 20px;\n  color: var(--mj-text-muted);\n}\n\n.no-templates[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0 0 10px 0;\n  font-size: 1.2rem;\n}\n\n.no-templates[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.9rem;\n  color: var(--mj-text-muted);\n}\n\n\n\n.dialog-actions[_ngcontent-%COMP%] {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n.action-buttons[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  min-width: 100px;\n}\n\n.action-buttons[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n\n\n@media (max-width: 768px) {\n  .template-selector-dialog[_ngcontent-%COMP%] {\n    padding: 15px;\n    height: 500px;\n  }\n\n  .search-filter-section[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .category-filter[_ngcontent-%COMP%] {\n    min-width: auto;\n  }\n\n  .templates-container.grid-mode[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .template-header[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .template-status[_ngcontent-%COMP%] {\n    margin-left: 0;\n    margin-top: 5px;\n  }\n\n  .template-metadata[_ngcontent-%COMP%] {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .action-buttons[_ngcontent-%COMP%] {\n    flex-direction: column;\n  }\n\n  .action-buttons[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n    min-width: auto;\n  }\n}\n\n\n\n.templates-container[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 8px;\n}\n\n.templates-container[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n.templates-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.templates-container[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}"] }); }
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TemplateSelectorDialogComponent, [{
        type: Component,
        args: [{ selector: 'mj-template-selector-dialog', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<!-- Template Selector Dialog -->\n<div class=\"template-selector-dialog\">\n  <!-- Header -->\n  <div class=\"dialog-header\">\n    <h3>{{ config.title }}</h3>\n    <div class=\"header-actions\">\n      <button\n        kendoButton\n        size=\"small\"\n        (click)=\"toggleViewMode()\"\n      >\n        <i [class]=\"viewMode === 'list' ? 'fa-solid fa-th' : 'fa-solid fa-list'\"></i>\n        {{ viewMode === 'list' ? 'Grid' : 'List' }}\n      </button>\n    </div>\n  </div>\n\n  <!-- Search and Filter Section -->\n  <div class=\"search-filter-section\">\n    <!-- Search Input -->\n    <div class=\"search-container\">\n      <input\n        class=\"k-input k-textbox\"\n        [formControl]=\"searchControl\"\n        placeholder=\"Search templates...\"\n      />\n      <i class=\"fa-solid fa-search search-icon\"></i>\n    </div>\n\n    <!-- Category Filter -->\n    <div class=\"category-filter\">\n      <select\n        class=\"k-input k-dropdown\"\n        [value]=\"selectedCategory || ''\"\n        (change)=\"onCategoryChange($any($event.target).value || null)\"\n      >\n        <option value=\"\">All Categories</option>\n        @for (category of categories$ | async; track category.ID) {\n          <option [value]=\"category.ID\">{{ category.Name }}</option>\n        }\n      </select>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading$ | async) {\n    <div class=\"loading-container\">\n      <i class=\"fa-solid fa-spinner fa-spin\"></i>\n      <span>Loading templates...</span>\n    </div>\n  }\n\n  <!-- Template List/Grid -->\n  @if (!(isLoading$ | async)) {\n    <div class=\"templates-container\" [class.grid-mode]=\"viewMode === 'grid'\">\n      @for (template of filteredTemplates$ | async; track template.ID) {\n        <div \n          class=\"template-item\"\n          [class.selected]=\"isTemplateSelected(template)\"\n          (click)=\"toggleTemplateSelection(template)\"\n        >\n          <!-- Selection Checkbox -->\n          <div class=\"selection-indicator\">\n            @if (config.multiSelect) {\n              <input\n                type=\"checkbox\"\n                [checked]=\"isTemplateSelected(template)\"\n                (change)=\"toggleTemplateSelection(template)\"\n              />\n            } @else {\n              <input\n                type=\"radio\"\n                [checked]=\"isTemplateSelected(template)\"\n                (change)=\"toggleTemplateSelection(template)\"\n              />\n            }\n          </div>\n\n          <!-- Template Info -->\n          <div class=\"template-info\">\n            <div class=\"template-header\">\n              <h4 class=\"template-name\">{{ template.Name }}</h4>\n              <div class=\"template-status\">\n                <span \n                  class=\"status-badge\"\n                  [style.background-color]=\"getTemplateStatusColor(template)\"\n                >\n                  {{ getTemplateStatusText(template) }}\n                </span>\n              </div>\n            </div>\n\n            <!-- Template Description -->\n            @if (template.Description) {\n              <div class=\"template-description\">\n                {{ getTemplatePreview(template) }}\n              </div>\n            }\n\n            <!-- Template Metadata -->\n            <div class=\"template-metadata\">\n              <div class=\"metadata-item\">\n                <i class=\"fa-solid fa-user\"></i>\n                <span>{{ template.User || 'Unknown User' }}</span>\n              </div>\n              \n              @if (template.Category) {\n                <div class=\"metadata-item\">\n                  <i class=\"fa-solid fa-folder\"></i>\n                  <span>{{ template.Category }}</span>\n                </div>\n              }\n              \n              @if (template.__mj_CreatedAt) {\n                <div class=\"metadata-item\">\n                  <i class=\"fa-solid fa-calendar\"></i>\n                  <span>{{ formatDate(template.__mj_CreatedAt) }}</span>\n                </div>\n              }\n            </div>\n          </div>\n        </div>\n      } @empty {\n        <div class=\"no-templates\">\n          <i class=\"fa-solid fa-file-alt fa-3x\"></i>\n          <h4>No templates found</h4>\n          <p>No templates match your current search criteria.</p>\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Dialog Actions -->\n  <div class=\"dialog-actions\">\n    <div class=\"action-buttons\">\n      @if (config.showCreateNew) {\n        <button\n          kendoButton\n          themeColor=\"secondary\"\n          (click)=\"createNew()\"\n        >\n          <i class=\"fa-solid fa-plus\"></i>\n          Create New\n        </button>\n      }\n      \n      <button\n        kendoButton\n        (click)=\"cancel()\"\n      >\n        Cancel\n      </button>\n      \n      <button\n        kendoButton\n        themeColor=\"primary\"\n        (click)=\"selectTemplates()\"\n        [disabled]=\"selectedTemplates.size === 0\"\n      >\n        <i class=\"fa-solid fa-check\"></i>\n        Select {{ selectedTemplates.size > 0 ? '(' + selectedTemplates.size + ')' : '' }}\n      </button>\n    </div>\n  </div>\n</div>", styles: ["/* Template Selector Dialog Styles */\n.template-selector-dialog {\n  padding: 20px;\n  width: 100%;\n  max-width: 800px;\n  height: 600px;\n  display: flex;\n  flex-direction: column;\n}\n\n/* Header */\n.dialog-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 20px;\n  padding-bottom: 15px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header h3 {\n  margin: 0;\n  font-size: 1.5rem;\n  color: var(--mj-text-primary);\n}\n\n.header-actions {\n  display: flex;\n  gap: 10px;\n}\n\n/* Search and Filter Section */\n.search-filter-section {\n  display: flex;\n  gap: 15px;\n  margin-bottom: 20px;\n}\n\n.search-container {\n  flex: 1;\n  position: relative;\n}\n\n.search-icon {\n  position: absolute;\n  left: 10px;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mj-text-muted);\n  pointer-events: none;\n}\n\n.search-container input {\n  padding-left: 35px;\n  width: 100%;\n}\n\n.category-filter {\n  min-width: 200px;\n}\n\n.category-filter select {\n  width: 100%;\n}\n\n/* Loading State */\n.loading-container {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 10px;\n  padding: 60px;\n  font-size: 1.1rem;\n  color: var(--mj-text-secondary);\n}\n\n.loading-container i {\n  font-size: 1.5rem;\n  color: var(--mj-brand-primary);\n}\n\n/* Templates Container */\n.templates-container {\n  flex: 1;\n  overflow-y: auto;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  padding: 10px;\n}\n\n.templates-container.grid-mode {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  gap: 15px;\n}\n\n/* Template Item */\n.template-item {\n  display: flex;\n  align-items: flex-start;\n  gap: 12px;\n  padding: 15px;\n  border: 2px solid transparent;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  background: var(--mj-bg-surface-card);\n  margin-bottom: 8px;\n}\n\n.template-item:hover {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.template-item.selected {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 8%, var(--mj-bg-surface));\n}\n\n.grid-mode .template-item {\n  flex-direction: column;\n  margin-bottom: 0;\n}\n\n.grid-mode .template-item .selection-indicator {\n  align-self: flex-end;\n}\n\n/* Selection Indicator */\n.selection-indicator {\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.selection-indicator input[type=\"checkbox\"],\n.selection-indicator input[type=\"radio\"] {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n/* Template Info */\n.template-info {\n  flex: 1;\n  min-width: 0;\n}\n\n.template-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: 8px;\n}\n\n.template-name {\n  margin: 0;\n  font-size: 1.1rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  word-break: break-word;\n}\n\n.template-status {\n  flex-shrink: 0;\n  margin-left: 10px;\n}\n\n.status-badge {\n  display: inline-block;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n/* Template Description */\n.template-description {\n  margin-bottom: 12px;\n  color: var(--mj-text-secondary);\n  font-size: 0.9rem;\n  line-height: 1.4;\n}\n\n/* Template Metadata */\n.template-metadata {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 15px;\n  font-size: 0.85rem;\n  color: var(--mj-text-muted);\n}\n\n.metadata-item {\n  display: flex;\n  align-items: center;\n  gap: 5px;\n}\n\n.metadata-item i {\n  font-size: 0.8rem;\n  color: var(--mj-text-muted);\n}\n\n/* No Templates State */\n.no-templates {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 60px 20px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n.no-templates i {\n  margin-bottom: 20px;\n  color: var(--mj-text-muted);\n}\n\n.no-templates h4 {\n  margin: 0 0 10px 0;\n  font-size: 1.2rem;\n}\n\n.no-templates p {\n  margin: 0;\n  font-size: 0.9rem;\n  color: var(--mj-text-muted);\n}\n\n/* Dialog Actions */\n.dialog-actions {\n  margin-top: 20px;\n  padding-top: 20px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.action-buttons {\n  display: flex;\n  justify-content: flex-end;\n  gap: 10px;\n}\n\n.action-buttons button {\n  min-width: 100px;\n}\n\n.action-buttons button i {\n  margin-right: 5px;\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  .template-selector-dialog {\n    padding: 15px;\n    height: 500px;\n  }\n\n  .search-filter-section {\n    flex-direction: column;\n    gap: 10px;\n  }\n\n  .category-filter {\n    min-width: auto;\n  }\n\n  .templates-container.grid-mode {\n    grid-template-columns: 1fr;\n  }\n\n  .template-header {\n    flex-direction: column;\n    align-items: flex-start;\n  }\n\n  .template-status {\n    margin-left: 0;\n    margin-top: 5px;\n  }\n\n  .template-metadata {\n    flex-direction: column;\n    gap: 8px;\n  }\n\n  .action-buttons {\n    flex-direction: column;\n  }\n\n  .action-buttons button {\n    min-width: auto;\n  }\n}\n\n/* Scrollbar Styling */\n.templates-container::-webkit-scrollbar {\n  width: 8px;\n}\n\n.templates-container::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-card);\n  border-radius: 4px;\n}\n\n.templates-container::-webkit-scrollbar-thumb {\n  background: var(--mj-border-strong);\n  border-radius: 4px;\n}\n\n.templates-container::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n"] }]
    }], () => [{ type: i1.DialogRef }, { type: i0.ChangeDetectorRef }], null); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TemplateSelectorDialogComponent, { className: "TemplateSelectorDialogComponent", filePath: "src/lib/custom/AIPrompts/template-selector-dialog.component.ts", lineNumber: 44 }); })();
//# sourceMappingURL=template-selector-dialog.component.js.map