@idsoftsource/initial-process 1.4.9 → 1.5.0

package/fesm2022/idsoftsource-initial-process.mjs

@@ -6,7 +6,7 @@ import * as i8 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, COMPOSITION_BUFFER_MODE, Validators, FormControl, FormGroup, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
-import { map, of, tap as tap$1, Subscription, switchMap, finalize, catchError, EMPTY, from, concatMap, Subject, firstValueFrom, takeUntil } from 'rxjs';
+import { map, of, tap as tap$1, Subscription, switchMap, finalize, catchError, EMPTY, firstValueFrom, Subject, takeUntil } from 'rxjs';
 import * as i1 from '@angular/common/http';
 import { HttpClient, HttpParams, HttpHeaders, HttpErrorResponse } from '@angular/common/http';
 import * as i7 from 'ngx-bootstrap/modal';
@@ -5160,7 +5160,6 @@ class ToolsComponent {
                 setTimeout(() => {
                     this.homeLoader = false;
                     window.location.href = this.libConfig.dashboardUrl;
-                    ;
                 }, 2000); // 2 seconds     
             },
             error: (err) => {
@@ -29171,7 +29170,8 @@ class FirstComponent {
             this.isUploading = true;
             setTimeout(() => {
                 this.store.addSuccess(true);
-                this.saveAWSFile();
+                // this.saveAWSFile();
+                this.uploadresume();
             }, 1500);
         }
         // ✅ MUST ADD THIS LINE
@@ -29188,70 +29188,72 @@ class FirstComponent {
         this.store.addSuccess(false);
         this.store.nextStep();
     }
-    async saveAWSFile() {
-        const fileType = this.fileData.type;
-        const fileExtension = fileType.split('/')[1] || fileType.split('/')[0] || 'file';
-        const fileName = `${new uuid().newId()}.${fileExtension}`;
-        const key = `User/${this.userId}/Resume/${fileName}`;
-        const params = { key, contentType: fileType, Expires: 300 };
-        const result = await this.fileService.uploadImageAsync(this.fileData, params);
-        console.log(result);
-        if (!result.success) {
-            return;
-        }
-        const files = {
-            fileName: this.fileData.name,
-            fileSize: this.fileData.size,
-            fileType: this.fileData.type,
-            fileLocation: result.publicUrl,
-            encrypted: true,
-            publicUrl: result.publicUrl
-        };
-        files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
-        files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
-        console.log(files);
-        this.fileService.awsFileUpload([files]).subscribe((res) => {
-            if (res?.[0]?.fileId) {
-                this.model.fileId = res[0].fileId;
-                this.model.fileUrl = res[0].publicUrl;
-                this.model.fileName = this.fileData.name;
-                this.awsFileUpdate.push({
-                    fileId: res?.[0]?.fileId,
-                    isActive: true,
-                });
-            }
-            this.uploadresume();
-        });
-    }
+    // private async saveAWSFile() {
+    //   const fileType = this.fileData!.type;
+    //   const fileExtension = fileType.split('/')[1] || fileType.split('/')[0] || 'file';
+    //   const fileName = `${new uuid().newId()}.${fileExtension}`;
+    //   const key = `User/${this.userId}/Resume/${fileName}`;
+    //   const params = { key, contentType: fileType, Expires: 300 };
+    //   const result = await this.fileService.uploadImageAsync(this.fileData!, params);
+    //   console.log(result);
+    //   if (!result.success) { return; }
+    //   const files: AwsFileRequestModel = {
+    //     fileName: this.fileData!.name,
+    //     fileSize: this.fileData!.size,
+    //     fileType: this.fileData!.type,
+    //     fileLocation: result.publicUrl,
+    //     encrypted: true,
+    //     publicUrl: result.publicUrl
+    //   };
+    //   files.fileLocation = files.fileLocation.replace(/^https?:\/\/[^/]+\//, '');
+    //   files.publicUrl = files.publicUrl.replace(/^https?:\/\/[^/]+\//, '');
+    //   console.log(files)
+    //   this.fileService.awsFileUpload([files]).subscribe((res: AwsFileResponseModel[]) => {
+    //     if (res?.[0]?.fileId) {
+    //       this.model.fileId = res[0].fileId;
+    //       this.model.fileUrl = res[0].publicUrl;
+    //       this.model.fileName = this.fileData!.name;
+    //       this.awsFileUpdate.push({
+    //         fileId: res?.[0]?.fileId,
+    //         isActive: true,
+    //       });
+    //     }
+    //     this.uploadresume();
+    //   },);
+    // }
+    // uploadresume() {
+    //   this.isUploading = true;
+    //   const model = {
+    //     s3Key: this.model.fileUrl,
+    //     userId: this.userId
+    //   };
+    //   this.resumedetail.uploadResume(model).subscribe({
+    //     next: (res: any) => {
+    //       if (res?.failed) {
+    //         this.isUploading = false;
+    //         this.resumeName = null;    
+    //         this.fileData = null;       
+    //         this.model = { fileId: null, fileUrl: null, fileName: null }; 
+    //         return;
+    //       }
+    //       this.handleAutoNavigation();
+    //       this.resumeData = res as ResumeProfile;
+    //       this.store.setProfile(this.resumeData);
+    //       console.log('Resume Loaded Successfully:', this.resumeData);
+    //       console.log(`Working with ${this.resumeData.basicDetails.firstName}`);
+    //       this.isUploading = false;
+    //     },
+    //     error: (err) => {
+    //       console.error('Upload failed:', err);
+    //       this.isUploading = false;
+    //       this.resumeName = null;   
+    // this.fileData = null;     
+    //     }
+    //   });
+    // }
     uploadresume() {
-        this.isUploading = true;
-        const model = {
-            s3Key: this.model.fileUrl,
-            userId: this.userId
-        };
-        this.resumedetail.uploadResume(model).subscribe({
-            next: (res) => {
-                if (res?.failed) {
-                    this.isUploading = false;
-                    this.resumeName = null; // ✅ RESET
-                    this.fileData = null; // ✅ RESET
-                    this.model = { fileId: null, fileUrl: null, fileName: null }; // ✅ RESET
-                    return;
-                }
-                this.handleAutoNavigation();
-                this.resumeData = res;
-                this.store.setProfile(this.resumeData);
-                console.log('Resume Loaded Successfully:', this.resumeData);
-                console.log(`Working with ${this.resumeData.basicDetails.firstName}`);
-                this.isUploading = false;
-            },
-            error: (err) => {
-                console.error('Upload failed:', err);
-                this.isUploading = false;
-                this.resumeName = null; // ✅ RESET
-                this.fileData = null; // ✅ RESET
-            }
-        });
+        this.store.setProfile(this.sample);
+        this.handleAutoNavigation();
     }
     onBackClick() {
         this.backToParent.emit();
@@ -29282,7 +29284,6 @@ class PreviewComponent {
     providerId;
     providerName;
     roleData;
-    cloudfrontUrl;
     backToParent = new EventEmitter();
     fileData = null;
     model = { fileId: null, fileUrl: null, fileName: null };
@@ -29293,14 +29294,37 @@ class PreviewComponent {
     isSavingEducation = false;
     isSavingCertification = false;
     isSavingLicense = false;
+    isSavingBasic = false;
+    basicDetailsSaved = false;
+    hasUserDetailData = false;
+    isSavingSkill = false;
+    isSavingTool = false;
     payloadUserId;
     payloadUserName;
+    cloudfrontUrl;
+    workExperienceServerIds = {};
+    educationServerIds = {};
+    certificationServerIds = {};
+    licenseServerIds = {};
+    skillServerIds = {};
+    toolServerIds = {};
+    workExperienceLocallySaved = {};
+    educationLocallySaved = {};
+    certificationLocallySaved = {};
+    licenseLocallySaved = {};
+    skillLocallySaved = {};
+    toolLocallySaved = {};
+    uploadFolderBySection = {
+        work: 'Experience',
+        education: 'Education',
+        certification: 'Certification',
+        license: 'License'
+    };
     resumeData;
     statusList = [];
     showPopup = false;
     showBackConfirmPopup = false;
-    userId;
-    userName;
+    showDashboardConfirmPopup = false;
     constructor(store, fileService, userSkillSetService, userToolService, userDocumentService, userEducation, userDetailService, userExperienceService, tokenService, libConfig) {
         this.store = store;
         this.fileService = fileService;
@@ -29315,13 +29339,6 @@ class PreviewComponent {
         this.resumeData = this.store.profileSignal();
     }
     email;
-    showLoader = false;
-    uploadFolderBySection = {
-        work: 'Experience',
-        education: 'Education',
-        certification: 'Certification',
-        license: 'License'
-    };
     expYears = [];
     details = signal(undefined, ...(ngDevMode ? [{ debugName: "details" }] : []));
     async ngOnInit() {
@@ -29331,14 +29348,11 @@ class PreviewComponent {
             this.details.set(initialData);
         }
         this.prefillSectionFieldsFromBasicDetails();
-        // Use 1..30 years of experience.
         this.expYears = Array.from({ length: 30 }, (_, i) => i + 1);
+        await this.loadSavedSectionsFromApis();
     }
     experience = computed(() => this.store.profileSignal()?.workExperience || [], ...(ngDevMode ? [{ debugName: "experience" }] : []));
-    educationList = computed(() => {
-        const list = this.store.profileSignal()?.education || [];
-        return [...list].sort((a, b) => b.endDate.localeCompare(a.endDate));
-    }, ...(ngDevMode ? [{ debugName: "educationList" }] : []));
+    educationList = computed(() => this.store.profileSignal()?.education || [], ...(ngDevMode ? [{ debugName: "educationList" }] : []));
     certs = computed(() => this.store.profileSignal()?.certifications || [], ...(ngDevMode ? [{ debugName: "certs" }] : []));
     licenses = computed(() => this.store.profileSignal()?.licenses || [], ...(ngDevMode ? [{ debugName: "licenses" }] : []));
     skills = computed(() => this.store.profileSignal()?.skills || [], ...(ngDevMode ? [{ debugName: "skills" }] : []));
@@ -29355,6 +29369,10 @@ class PreviewComponent {
         const digits = (value ?? '').toString().replace(/\D/g, '');
         return digits.slice(0, 10);
     }
+    sanitizeZipCode(value) {
+        const digits = (value ?? '').toString().replace(/\D/g, '');
+        return digits.slice(0, 6);
+    }
     isMonthRangeInvalid(start, end) {
         if (this.isBlankOrNull(start) || this.isBlankOrNull(end))
             return false;
@@ -29460,6 +29478,9 @@ class PreviewComponent {
             issues.push('State is required');
         if (this.isBlank(item.zipCode))
             issues.push('Zip code is required');
+        if (!this.isBlank(item.zipCode) && !/^\d{1,6}$/.test((item.zipCode ?? '').trim())) {
+            issues.push('Zip code must be up to 6 digits');
+        }
         if (this.isBlank(item.country))
             issues.push('Country is required');
         if (this.isBlank(item.phone))
@@ -29605,26 +29626,66 @@ class PreviewComponent {
         return issues;
     }, ...(ngDevMode ? [{ debugName: "toolFormIssues" }] : []));
     workSectionHasIssues = computed(() => {
-        return this.workIssuesByIndex().some((x) => x.length > 0);
+        const hasValidationIssues = this.workIssuesByIndex().some((x) => x.length > 0);
+        const hasUnsavedItems = this.workSectionHasUnsavedItems();
+        return hasValidationIssues || hasUnsavedItems;
     }, ...(ngDevMode ? [{ debugName: "workSectionHasIssues" }] : []));
     educationSectionHasIssues = computed(() => {
-        return this.educationIssuesByIndex().some((x) => x.length > 0);
+        const hasValidationIssues = this.educationIssuesByIndex().some((x) => x.length > 0);
+        const hasUnsavedItems = this.educationSectionHasUnsavedItems();
+        return hasValidationIssues || hasUnsavedItems;
     }, ...(ngDevMode ? [{ debugName: "educationSectionHasIssues" }] : []));
     certificationsSectionHasIssues = computed(() => {
-        return this.certIssuesByIndex().some((x) => x.length > 0);
+        const hasValidationIssues = this.certIssuesByIndex().some((x) => x.length > 0);
+        const hasUnsavedItems = this.certificationSectionHasUnsavedItems();
+        return hasValidationIssues || hasUnsavedItems;
     }, ...(ngDevMode ? [{ debugName: "certificationsSectionHasIssues" }] : []));
-    licensesSectionHasIssues = computed(() => this.licenses().some((_, i) => (this.licenseIssuesByIndex()[i] || []).length > 0), ...(ngDevMode ? [{ debugName: "licensesSectionHasIssues" }] : []));
-    skillsSectionHasIssues = computed(() => this.skillIssuesByIndex().some((x) => x.length > 0), ...(ngDevMode ? [{ debugName: "skillsSectionHasIssues" }] : []));
-    toolsSectionHasIssues = computed(() => this.toolIssuesByIndex().some((x) => x.length > 0), ...(ngDevMode ? [{ debugName: "toolsSectionHasIssues" }] : []));
-    canConfirmAndContinue = computed(() => {
-        return !this.basicSectionHasIssues()
-            && !this.workSectionHasIssues()
-            && !this.educationSectionHasIssues()
-            && !this.certificationsSectionHasIssues()
-            && !this.licensesSectionHasIssues()
-            && !this.skillsSectionHasIssues()
-            && !this.toolsSectionHasIssues();
-    }, ...(ngDevMode ? [{ debugName: "canConfirmAndContinue" }] : []));
+    licensesSectionHasIssues = computed(() => {
+        const hasValidationIssues = this.licenses().some((_, i) => (this.licenseIssuesByIndex()[i] || []).length > 0);
+        const hasUnsavedItems = this.licenseSectionHasUnsavedItems();
+        return hasValidationIssues || hasUnsavedItems;
+    }, ...(ngDevMode ? [{ debugName: "licensesSectionHasIssues" }] : []));
+    skillsSectionHasIssues = computed(() => {
+        const hasValidationIssues = this.skillIssuesByIndex().some((x) => x.length > 0);
+        const hasUnsavedItems = this.skillsSectionHasUnsavedItems();
+        return hasValidationIssues || hasUnsavedItems;
+    }, ...(ngDevMode ? [{ debugName: "skillsSectionHasIssues" }] : []));
+    toolsSectionHasIssues = computed(() => {
+        const hasValidationIssues = this.toolIssuesByIndex().some((x) => x.length > 0);
+        const hasUnsavedItems = this.toolsSectionHasUnsavedItems();
+        return hasValidationIssues || hasUnsavedItems;
+    }, ...(ngDevMode ? [{ debugName: "toolsSectionHasIssues" }] : []));
+    workSectionHasUnsavedItems() {
+        return this.experience().some((_, i) => this.hasUnsavedWorkItem(i));
+    }
+    educationSectionHasUnsavedItems() {
+        return this.educationList().some((_, i) => this.hasUnsavedEducationItem(i));
+    }
+    certificationSectionHasUnsavedItems() {
+        return this.certs().some((_, i) => this.hasUnsavedCertificationItem(i));
+    }
+    licenseSectionHasUnsavedItems() {
+        return this.licenses().some((_, i) => this.hasUnsavedLicenseItem(i));
+    }
+    skillsSectionHasUnsavedItems() {
+        return this.skills().some((_, i) => this.hasUnsavedSkillItem(i));
+    }
+    toolsSectionHasUnsavedItems() {
+        return this.tools().some((_, i) => this.hasUnsavedToolItem(i));
+    }
+    isAnyEditorOpen = computed(() => {
+        return this.isEditMode() ||
+            this.jobEditor().mode !== 'closed' ||
+            this.educationEditor().mode !== 'closed' ||
+            this.certificationEditor().mode !== 'closed' ||
+            this.licenseEditor().mode !== 'closed' ||
+            this.skillEditor().mode !== 'closed' ||
+            this.toolEditor().mode !== 'closed';
+    }, ...(ngDevMode ? [{ debugName: "isAnyEditorOpen" }] : []));
+    canConfirmAndContinue() {
+        // Go to Dashboard enablement depends only on UserDetail/GetByUserId having data.
+        return this.hasUserDetailData;
+    }
     expandedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "expandedIndex" }] : []));
     toggleJob(index) {
         this.expandedIndex.update(current => current === index ? -1 : index);
@@ -29662,6 +29723,493 @@ class PreviewComponent {
         }
         return value;
     }
+    buildSectionQuery(orderBy, includeForUser = false) {
+        return {
+            page: 1,
+            pageSize: 100,
+            filter: includeForUser ? `userId=${this.payloadUserId},forUser=2` : `userId=${this.payloadUserId}`,
+            orderBy,
+        };
+    }
+    buildUserName() {
+        const basic = this.store.profileSignal()?.basicDetails;
+        const fullName = `${basic?.firstName ?? ''} ${basic?.lastName ?? ''}`.trim();
+        this.payloadUserName = fullName;
+    }
+    getCreatedId(res) {
+        const directId = res?.id ?? res?.value?.id ?? res?.data?.id ?? null;
+        if (typeof directId === 'string' && directId.trim())
+            return directId;
+        const fromArray = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : null);
+        const firstWithId = fromArray?.find((item) => typeof item?.id === 'string' && item.id.trim());
+        if (firstWithId?.id)
+            return firstWithId.id;
+        return null;
+    }
+    getEntityId(item) {
+        const candidates = [
+            item?.id,
+            item?.userExperienceId,
+            item?.userEducationId,
+            item?.userDocumentId,
+            item?.userSkillSetId,
+            item?.userToolId,
+            item?.skillSetId,
+            item?.toolId,
+        ];
+        const found = candidates.find((x) => typeof x === 'string' && x.trim());
+        return found ?? null;
+    }
+    reindexServerIdsAfterDelete(serverIds, deletedIndex) {
+        const next = {};
+        Object.keys(serverIds).forEach((k) => {
+            const idx = Number(k);
+            if (Number.isNaN(idx) || idx === deletedIndex)
+                return;
+            if (idx < deletedIndex)
+                next[idx] = serverIds[idx];
+            if (idx > deletedIndex)
+                next[idx - 1] = serverIds[idx];
+        });
+        return next;
+    }
+    reindexSavedFlagsAfterDelete(flags, deletedIndex) {
+        const next = {};
+        Object.keys(flags).forEach((k) => {
+            const idx = Number(k);
+            if (Number.isNaN(idx) || idx === deletedIndex)
+                return;
+            if (idx < deletedIndex)
+                next[idx] = !!flags[idx];
+            if (idx > deletedIndex)
+                next[idx - 1] = !!flags[idx];
+        });
+        return next;
+    }
+    markItemSaved(serverIds, localSaved, index, createdId) {
+        if (createdId)
+            serverIds[index] = createdId;
+        localSaved[index] = true;
+    }
+    hasUnsavedWorkItem(index) {
+        return !this.workExperienceServerIds[index] && !this.workExperienceLocallySaved[index];
+    }
+    hasUnsavedEducationItem(index) {
+        return !this.educationServerIds[index] && !this.educationLocallySaved[index];
+    }
+    hasUnsavedCertificationItem(index) {
+        return !this.certificationServerIds[index] && !this.certificationLocallySaved[index];
+    }
+    hasUnsavedLicenseItem(index) {
+        return !this.licenseServerIds[index] && !this.licenseLocallySaved[index];
+    }
+    hasUnsavedSkillItem(index) {
+        return !this.skillServerIds[index] && !this.skillLocallySaved[index];
+    }
+    hasUnsavedToolItem(index) {
+        return !this.toolServerIds[index] && !this.toolLocallySaved[index];
+    }
+    mapSavedWorkToPreview(item) {
+        return {
+            company: item?.companyName ?? '',
+            jobTitle: item?.jobTitle ?? '',
+            country: item?.country ?? '',
+            state: item?.state ?? '',
+            city: item?.city ?? '',
+            startDate: this.toMonthInput(item?.fromDate),
+            endDate: item?.toDate ? this.toMonthInput(item?.toDate) : null,
+            isCurrent: !item?.toDate,
+            responsibilities: (item?.jobDescription ?? '').split(',').map((x) => x.trim()).filter(Boolean),
+            fileId: item?.fileId ?? null,
+            fileUrl: item?.fileUrl ?? null,
+            fileName: item?.fileName ?? null,
+            fileObject: null,
+        };
+    }
+    mapSavedEducationToPreview(item) {
+        return {
+            degree: item?.courseName ?? '',
+            degreeType: item?.courseType ?? '',
+            institution: item?.instituteName ?? '',
+            country: item?.country ?? '',
+            state: item?.state ?? '',
+            city: item?.city ?? '',
+            startDate: this.toMonthInput(item?.startDate),
+            endDate: this.toMonthInput(item?.endDate),
+            achievements: item?.comments ? [item.comments] : [],
+            fileId: item?.fileId ?? null,
+            fileUrl: item?.fileUrl ?? null,
+            fileName: item?.fileName ?? null,
+            fileObject: null,
+        };
+    }
+    mapSavedCertificationToPreview(item) {
+        return {
+            name: item?.documentTypeName ?? '',
+            issuingOrganization: item?.issuedBy ?? null,
+            state: item?.issuedState ?? null,
+            issueDate: item?.issueDate ? this.toMonthInput(item.issueDate) : null,
+            expiryDate: item?.expiryDate ? this.toMonthInput(item.expiryDate) : null,
+            credentialId: item?.number ? String(item.number) : null,
+            fileId: item?.fileId ?? null,
+            fileUrl: item?.fileUrl ?? null,
+            fileName: item?.fileName ?? null,
+            fileObject: null,
+        };
+    }
+    mapSavedLicenseToPreview(item) {
+        return {
+            name: item?.documentTypeName ?? '',
+            issuingAuthority: item?.issuedBy ?? null,
+            licenseNumber: item?.number ? String(item.number) : null,
+            state: item?.issuedState ?? null,
+            issueDate: item?.issueDate ? this.toMonthInput(item.issueDate) : null,
+            expiryDate: item?.expiryDate ? this.toMonthInput(item.expiryDate) : null,
+            fileId: item?.fileId ?? null,
+            fileUrl: item?.fileUrl ?? null,
+            fileName: item?.fileName ?? null,
+            fileObject: null,
+        };
+    }
+    normalizedText(value) {
+        return (value ?? '').toString().trim().toLowerCase();
+    }
+    workSignature(item) {
+        return [
+            this.normalizedText(item.company),
+            this.normalizedText(item.jobTitle),
+            this.normalizedText(item.startDate),
+            this.normalizedText(item.endDate),
+            item.isCurrent ? '1' : '0',
+        ].join('|');
+    }
+    educationSignature(item) {
+        return [
+            this.normalizedText(item.degree),
+            this.normalizedText(item.institution),
+            this.normalizedText(item.startDate),
+            this.normalizedText(item.endDate),
+        ].join('|');
+    }
+    certificationSignature(item) {
+        return [
+            this.normalizedText(item.name),
+            this.normalizedText(item.issuingOrganization),
+            this.normalizedText(item.state),
+            this.normalizedText(item.issueDate),
+            this.normalizedText(item.expiryDate),
+        ].join('|');
+    }
+    licenseSignature(item) {
+        return [
+            this.normalizedText(item.name),
+            this.normalizedText(item.issuingAuthority),
+            this.normalizedText(item.state),
+            this.normalizedText(item.issueDate),
+            this.normalizedText(item.expiryDate),
+        ].join('|');
+    }
+    mergeSavedAndCurrent(savedItems, currentItems, signature) {
+        const merged = [];
+        const matchedCurrentIndexes = new Set();
+        const appendedCurrentIndexes = [];
+        const signatureMap = new Map();
+        currentItems.forEach((item, idx) => {
+            const key = signature(item);
+            const list = signatureMap.get(key) ?? [];
+            list.push(idx);
+            signatureMap.set(key, list);
+        });
+        savedItems.forEach((savedItem) => {
+            merged.push(savedItem);
+            const key = signature(savedItem);
+            const candidates = signatureMap.get(key);
+            if (candidates && candidates.length > 0) {
+                const matched = candidates.shift();
+                if (matched !== undefined)
+                    matchedCurrentIndexes.add(matched);
+            }
+        });
+        currentItems.forEach((item, idx) => {
+            if (!matchedCurrentIndexes.has(idx)) {
+                merged.push(item);
+                appendedCurrentIndexes.push(idx);
+            }
+        });
+        return { merged, matchedCurrentIndexes, appendedCurrentIndexes };
+    }
+    async ensureWorkServerId(index, item) {
+        if (this.workExperienceServerIds[index] || !this.payloadUserId)
+            return;
+        try {
+            const res = await firstValueFrom(this.userExperienceService.getUserExperience(this.buildSectionQuery('createdDateTime asc')));
+            const saved = Array.isArray(res?.data) ? res.data : [];
+            const target = this.workSignature(item);
+            const match = saved.find((x) => this.workSignature(this.mapSavedWorkToPreview(x)) === target);
+            const matchId = this.getEntityId(match);
+            if (matchId)
+                this.workExperienceServerIds[index] = matchId;
+        }
+        catch (err) {
+            console.error('Unable to resolve work experience server id', err);
+        }
+    }
+    async ensureEducationServerId(index, item) {
+        if (this.educationServerIds[index] || !this.payloadUserId)
+            return;
+        try {
+            const res = await firstValueFrom(this.userEducation.getUserEducation(this.buildSectionQuery('createdDateTime asc')));
+            const saved = Array.isArray(res?.data) ? res.data : [];
+            const target = this.educationSignature(item);
+            const match = saved.find((x) => this.educationSignature(this.mapSavedEducationToPreview(x)) === target);
+            const matchId = this.getEntityId(match);
+            if (matchId)
+                this.educationServerIds[index] = matchId;
+        }
+        catch (err) {
+            console.error('Unable to resolve education server id', err);
+        }
+    }
+    async ensureCertificationServerId(index, item) {
+        if (this.certificationServerIds[index] || !this.payloadUserId)
+            return;
+        try {
+            const query = {
+                page: 1,
+                pageSize: 100,
+                orderBy: 'createdDateTime asc',
+                filter: `mainType=2,userId=${this.payloadUserId}`,
+            };
+            const res = await firstValueFrom(this.userDocumentService.getUserDocument(query));
+            const saved = Array.isArray(res?.data) ? res.data : [];
+            const target = this.certificationSignature(item);
+            const match = saved.find((x) => this.certificationSignature(this.mapSavedCertificationToPreview(x)) === target);
+            const matchId = this.getEntityId(match);
+            if (matchId)
+                this.certificationServerIds[index] = matchId;
+        }
+        catch (err) {
+            console.error('Unable to resolve certification server id', err);
+        }
+    }
+    async ensureLicenseServerId(index, item) {
+        if (this.licenseServerIds[index] || !this.payloadUserId)
+            return;
+        try {
+            const query = {
+                page: 1,
+                pageSize: 10,
+                orderBy: 'createdDateTime asc',
+                filter: `mainType=1`,
+            };
+            const res = await firstValueFrom(this.userDocumentService
+                .getUserDocument(query));
+            const saved = Array.isArray(res?.data) ? res.data : [];
+            const target = this.licenseSignature(item);
+            const match = saved.find((x) => this.licenseSignature(this.mapSavedLicenseToPreview(x)) === target);
+            const matchId = this.getEntityId(match);
+            if (matchId)
+                this.licenseServerIds[index] = matchId;
+        }
+        catch (err) {
+            console.error('Unable to resolve license server id', err);
+        }
+    }
+    async ensureSkillServerId(index) {
+        if (this.skillServerIds[index] || !this.payloadUserId)
+            return;
+        try {
+            const payload = this.mapSkills(this.resumeData)[index];
+            if (!payload)
+                return;
+            const res = await firstValueFrom(this.userSkillSetService.getUserSkillSet(this.buildSectionQuery('skillSetName asc', true)));
+            const saved = Array.isArray(res?.data) ? res.data : [];
+            const targetName = this.normalizedText(payload.skillSetName);
+            const targetYear = payload.year;
+            const targetStars = payload.starRating;
+            const match = saved.find((x) => this.normalizedText(x?.skillSetName) === targetName
+                && (x?.year ?? null) === (targetYear ?? null)
+                && (x?.starRating ?? null) === (targetStars ?? null));
+            const matchId = this.getEntityId(match);
+            if (matchId)
+                this.skillServerIds[index] = matchId;
+        }
+        catch (err) {
+            console.error('Unable to resolve skill server id', err);
+        }
+    }
+    async ensureToolServerId(index) {
+        if (this.toolServerIds[index] || !this.payloadUserId)
+            return;
+        try {
+            const payload = this.mapTools(this.resumeData)[index];
+            if (!payload)
+                return;
+            const res = await firstValueFrom(this.userToolService.getUserTool(this.buildSectionQuery('toolName asc', true)));
+            const saved = Array.isArray(res?.data) ? res.data : [];
+            const targetName = this.normalizedText(payload.toolName);
+            const targetYear = payload.year;
+            const targetStars = payload.starRating;
+            const match = saved.find((x) => this.normalizedText(x?.toolName) === targetName
+                && (x?.year ?? null) === (targetYear ?? null)
+                && (x?.starRating ?? null) === (targetStars ?? null));
+            const matchId = this.getEntityId(match);
+            if (matchId)
+                this.toolServerIds[index] = matchId;
+        }
+        catch (err) {
+            console.error('Unable to resolve tool server id', err);
+        }
+    }
+    async loadSavedSectionsFromApis() {
+        const current = this.store.profileSignal();
+        if (!current || !this.payloadUserId)
+            return;
+        try {
+            this.workExperienceServerIds = {};
+            this.educationServerIds = {};
+            this.certificationServerIds = {};
+            this.licenseServerIds = {};
+            this.skillServerIds = {};
+            this.toolServerIds = {};
+            this.workExperienceLocallySaved = {};
+            this.educationLocallySaved = {};
+            this.certificationLocallySaved = {};
+            this.licenseLocallySaved = {};
+            this.skillLocallySaved = {};
+            this.toolLocallySaved = {};
+            const [workRes, educationRes, certificationsRes, licensesRes, skillsRes, toolsRes, userDetailRes] = await Promise.all([
+                firstValueFrom(this.userExperienceService.getUserExperience(this.buildSectionQuery('createdDateTime asc'))),
+                firstValueFrom(this.userEducation.getUserEducation(this.buildSectionQuery('createdDateTime asc'))),
+                // ✅ Certifications (mainType = 2)
+                firstValueFrom(this.userDocumentService.getUserDocument({
+                    page: 1,
+                    pageSize: 100,
+                    orderBy: 'createdDateTime asc',
+                    filter: `mainType=2,userId=${this.payloadUserId}`,
+                })),
+                // ✅ Licenses (mainType = 1)
+                firstValueFrom(this.userDocumentService.getUserDocument({
+                    page: 1,
+                    pageSize: 100,
+                    orderBy: 'createdDateTime asc',
+                    filter: `mainType=1,userId=${this.payloadUserId}`,
+                })),
+                firstValueFrom(this.userSkillSetService.getUserSkillSet(this.buildSectionQuery('skillSetName asc', true))),
+                firstValueFrom(this.userToolService.getUserTool(this.buildSectionQuery('toolName asc', true))),
+                firstValueFrom(this.userDetailService.getByUserId(this.payloadUserId)).catch(() => null),
+            ]);
+            // Enable dashboard button when GetByUserId has any payload.
+            this.hasUserDetailData = this.hasUserDetailPayload(userDetailRes);
+            // Mark basic details as already saved if user data exists on the server
+            const savedBasicDetails = this.mapSavedBasicDetailsToPreview(userDetailRes);
+            if (savedBasicDetails) {
+                this.basicDetailsSaved = true;
+                this.details.set(savedBasicDetails);
+            }
+            const savedWork = Array.isArray(workRes?.data) ? workRes.data : [];
+            const savedEducation = Array.isArray(educationRes?.data) ? educationRes.data : [];
+            const savedCertifications = Array.isArray(certificationsRes?.data) ? certificationsRes.data : [];
+            const savedLicenses = Array.isArray(licensesRes?.data) ? licensesRes.data : [];
+            const savedSkills = Array.isArray(skillsRes?.data) ? skillsRes.data : [];
+            const savedTools = Array.isArray(toolsRes?.data) ? toolsRes.data : [];
+            const savedWorkPreview = savedWork.map((item) => this.mapSavedWorkToPreview(item));
+            const mergedWork = this.mergeSavedAndCurrent(savedWorkPreview, current.workExperience ?? [], (item) => this.workSignature(item));
+            const nextWork = mergedWork.merged;
+            savedWork.forEach((item, index) => {
+                const id = this.getEntityId(item);
+                if (id)
+                    this.workExperienceServerIds[index] = id;
+            });
+            const savedEducationPreview = savedEducation.map((item) => this.mapSavedEducationToPreview(item));
+            const mergedEducation = this.mergeSavedAndCurrent(savedEducationPreview, current.education ?? [], (item) => this.educationSignature(item));
+            const nextEducation = mergedEducation.merged;
+            savedEducation.forEach((item, index) => {
+                const id = this.getEntityId(item);
+                if (id)
+                    this.educationServerIds[index] = id;
+            });
+            const savedCertPreview = savedCertifications.map((item) => this.mapSavedCertificationToPreview(item));
+            const mergedCertifications = this.mergeSavedAndCurrent(savedCertPreview, current.certifications ?? [], (item) => this.certificationSignature(item));
+            const nextCertifications = mergedCertifications.merged;
+            savedCertifications.forEach((item, index) => {
+                const id = this.getEntityId(item);
+                if (id)
+                    this.certificationServerIds[index] = id;
+            });
+            const savedLicensePreview = savedLicenses.map((item) => this.mapSavedLicenseToPreview(item));
+            const mergedLicenses = this.mergeSavedAndCurrent(savedLicensePreview, current.licenses ?? [], (item) => this.licenseSignature(item));
+            const nextLicenses = mergedLicenses.merged;
+            savedLicenses.forEach((item, index) => {
+                const id = this.getEntityId(item);
+                if (id)
+                    this.licenseServerIds[index] = id;
+            });
+            const currentSkills = current.skills ?? [];
+            const savedSkillNames = savedSkills.map((item) => (item?.skillSetName ?? '').toString());
+            const mergedSkills = this.mergeSavedAndCurrent(savedSkillNames, currentSkills, (name) => this.normalizedText(name));
+            const nextSkills = mergedSkills.merged;
+            const nextSkillMeta = {};
+            savedSkills.forEach((item, index) => {
+                const id = this.getEntityId(item);
+                if (id)
+                    this.skillServerIds[index] = id;
+                nextSkillMeta[index] = {
+                    providerName: item?.providerName ?? undefined,
+                    starRating: item?.starRating ?? null,
+                    year: item?.year ?? null,
+                    profileVisibility: !!item?.profileVisibility,
+                    notes: item?.notes ?? '',
+                };
+            });
+            const oldSkillMeta = this.store.resumeSkillMeta() ?? {};
+            for (let i = savedSkills.length; i < nextSkills.length; i++) {
+                const sourceCurrentIndex = mergedSkills.appendedCurrentIndexes[i - savedSkills.length];
+                if (sourceCurrentIndex !== undefined && oldSkillMeta[sourceCurrentIndex]) {
+                    nextSkillMeta[i] = oldSkillMeta[sourceCurrentIndex];
+                }
+            }
+            this.store.resumeSkillMeta.set(nextSkillMeta);
+            const currentTools = current.tools ?? [];
+            const savedToolNames = savedTools.map((item) => (item?.toolName ?? '').toString());
+            const mergedTools = this.mergeSavedAndCurrent(savedToolNames, currentTools, (name) => this.normalizedText(name));
+            const nextTools = mergedTools.merged;
+            const nextToolMeta = {};
+            savedTools.forEach((item, index) => {
+                const id = this.getEntityId(item);
+                if (id)
+                    this.toolServerIds[index] = id;
+                nextToolMeta[index] = {
+                    providerName: item?.providerName ?? undefined,
+                    starRating: item?.starRating ?? null,
+                    year: item?.year ?? null,
+                    profileVisibility: !!item?.profileVisibility,
+                    notes: item?.notes ?? '',
+                };
+            });
+            const oldToolMeta = this.store.resumeToolMeta() ?? {};
+            for (let i = savedTools.length; i < nextTools.length; i++) {
+                const sourceCurrentIndex = mergedTools.appendedCurrentIndexes[i - savedTools.length];
+                if (sourceCurrentIndex !== undefined && oldToolMeta[sourceCurrentIndex]) {
+                    nextToolMeta[i] = oldToolMeta[sourceCurrentIndex];
+                }
+            }
+            this.store.resumeToolMeta.set(nextToolMeta);
+            this.commitProfile({
+                ...current,
+                basicDetails: savedBasicDetails ?? current.basicDetails,
+                workExperience: nextWork,
+                education: nextEducation,
+                certifications: nextCertifications,
+                licenses: nextLicenses,
+                skills: nextSkills,
+                tools: nextTools,
+            });
+        }
+        catch (err) {
+            console.error('Unable to load saved section data', err);
+        }
+    }
     formatMonthYear(value) {
         if (!value)
             return '';
@@ -29708,6 +30256,9 @@ class PreviewComponent {
         const job = current?.workExperience?.[jobIndex];
         if (!current || !job)
             return;
+        if (!this.workExperienceServerIds[jobIndex]) {
+            void this.ensureWorkServerId(jobIndex, job);
+        }
         this.jobEditor.set({
             mode: 'edit', index: jobIndex, data: {
                 ...job,
@@ -29727,9 +30278,9 @@ class PreviewComponent {
         const nextJob = this.tempJob();
         if (!current || !nextJob)
             return;
-        if (nextJob.fileObject) {
-            this.isSavingWork = true;
-            try {
+        this.isSavingWork = true;
+        try {
+            if (nextJob.fileObject) {
                 this.fileData = nextJob.fileObject;
                 const uploaded = await this.saveAWSFile(this.uploadFolderBySection.work);
                 nextJob.fileId = uploaded.fileId;
@@ -29737,33 +30288,21 @@ class PreviewComponent {
                 nextJob.fileName = uploaded.fileName;
                 nextJob.fileObject = null;
             }
-            finally {
-                this.isSavingWork = false;
-            }
+            const next = this.isAddingJob()
+                ? { ...current, workExperience: [...(current.workExperience ?? []), nextJob] }
+                : {
+                    ...current,
+                    workExperience: current.workExperience.map((j, idx) => (idx === jobIndex ? nextJob : j))
+                };
+            this.commitProfile(next);
+            const savedIndex = this.isAddingJob() ? next.workExperience.length - 1 : (jobIndex ?? -1);
+            await this.persistWorkExperience(nextJob, savedIndex, !this.isAddingJob());
+        }
+        finally {
+            this.isSavingWork = false;
         }
-        const next = this.isAddingJob()
-            ? { ...current, workExperience: [...(current.workExperience ?? []), nextJob] }
-            : {
-                ...current,
-                workExperience: current.workExperience.map((j, idx) => (idx === jobIndex ? nextJob : j))
-            };
-        this.commitProfile(next);
         this.cancelEditJob();
     }
-    onWorkExperienceFileSelected(event) {
-        this.revokeObjectUrl(this.tempJob()?.filePreviewUrl);
-        this.selectFile(event);
-        const file = this.fileData;
-        if (!file)
-            return;
-        this.patchTempJob({
-            fileId: null,
-            fileUrl: null,
-            fileName: file.name,
-            fileObject: file,
-            filePreviewUrl: URL.createObjectURL(file)
-        });
-    }
     deleteJob(index) {
         const current = this.store.profileSignal();
         if (!current?.workExperience?.length)
@@ -29776,6 +30315,8 @@ class PreviewComponent {
             ...current,
             workExperience: current.workExperience.filter((_, i) => i !== index),
         });
+        this.workExperienceServerIds = this.reindexServerIdsAfterDelete(this.workExperienceServerIds, index);
+        this.workExperienceLocallySaved = this.reindexSavedFlagsAfterDelete(this.workExperienceLocallySaved, index);
         if (this.editingJobIndex() === index)
             this.cancelEditJob();
         if (this.expandedIndex() === index)
@@ -29797,6 +30338,20 @@ class PreviewComponent {
             return;
         this.jobEditor.update((e) => ({ ...e, data: { ...job, ...patch } }));
     }
+    onWorkExperienceFileSelected(event) {
+        this.revokeObjectUrl(this.tempJob()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempJob({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     setTempJobIsCurrent(isCurrent) {
         const job = this.tempJob();
         if (!job)
@@ -29825,6 +30380,9 @@ class PreviewComponent {
         const current = this.store.profileSignal();
         if (!current || !current.skills?.length || index < 0 || index >= current.skills.length)
             return;
+        if (!this.skillServerIds[index]) {
+            void this.ensureSkillServerId(index);
+        }
         const meta = this.store.resumeSkillMeta()?.[index] ?? {};
         this.skillEditor.set({
             mode: 'edit',
@@ -29852,7 +30410,7 @@ class PreviewComponent {
     setTempSkillStars(stars) {
         this.patchSkillForm({ stars });
     }
-    saveSkillEditor() {
+    async saveSkillEditor() {
         const current = this.store.profileSignal();
         const idx = this.editingSkillIndex();
         if (!current)
@@ -29867,31 +30425,38 @@ class PreviewComponent {
             return;
         if (form.year === null || form.year === undefined)
             return;
-        const nextSkills = [...(current.skills ?? [])];
-        if (this.isAddingSkill()) {
-            nextSkills.push(nextName);
-        }
-        else if (idx !== null) {
-            nextSkills[idx] = nextName;
-        }
-        else {
-            return;
-        }
-        if (this.isAddingSkill()) {
-            this.appendToMainModel('skills', nextName);
-        }
-        else if (idx !== null) {
-            this.updateInMainModel('skills', idx, nextName);
+        this.isSavingSkill = true;
+        try {
+            const nextSkills = [...(current.skills ?? [])];
+            if (this.isAddingSkill()) {
+                nextSkills.push(nextName);
+            }
+            else if (idx !== null) {
+                nextSkills[idx] = nextName;
+            }
+            else {
+                return;
+            }
+            if (this.isAddingSkill()) {
+                this.appendToMainModel('skills', nextName);
+            }
+            else if (idx !== null) {
+                this.updateInMainModel('skills', idx, nextName);
+            }
+            const metaIndex = this.isAddingSkill() ? nextSkills.length - 1 : idx;
+            if (metaIndex !== null) {
+                this.store.setResumeSkillMeta(metaIndex, {
+                    providerName: (form.providerName || '').trim() || undefined,
+                    starRating: (form.stars || 0) * 2,
+                    year: form.year,
+                    profileVisibility: form.profileVisibility,
+                    notes: form.notes,
+                });
+                await this.persistSkill(metaIndex, !this.isAddingSkill());
+            }
         }
-        const metaIndex = this.isAddingSkill() ? nextSkills.length - 1 : idx;
-        if (metaIndex !== null) {
-            this.store.setResumeSkillMeta(metaIndex, {
-                providerName: (form.providerName || '').trim() || undefined,
-                starRating: (form.stars || 0) * 2,
-                year: form.year,
-                profileVisibility: form.profileVisibility,
-                notes: form.notes,
-            });
+        finally {
+            this.isSavingSkill = false;
         }
         this.closeSkillEditor();
     }
@@ -29920,6 +30485,8 @@ class PreviewComponent {
         const nextSkills = current.skills.filter((_, i) => i !== index);
         this.commitProfile({ ...current, skills: nextSkills });
         this.reindexSkillMetaAfterDelete(index);
+        this.skillServerIds = this.reindexServerIdsAfterDelete(this.skillServerIds, index);
+        this.skillLocallySaved = this.reindexSavedFlagsAfterDelete(this.skillLocallySaved, index);
         if (this.editingSkillIndex() === index)
             this.closeSkillEditor();
     }
@@ -29939,6 +30506,9 @@ class PreviewComponent {
         const current = this.store.profileSignal();
         if (!current || !current.tools?.length || index < 0 || index >= current.tools.length)
             return;
+        if (!this.toolServerIds[index]) {
+            void this.ensureToolServerId(index);
+        }
         const meta = this.store.resumeToolMeta()?.[index] ?? {};
         this.toolEditor.set({
             mode: 'edit',
@@ -29966,7 +30536,7 @@ class PreviewComponent {
     setTempToolStars(stars) {
         this.patchToolForm({ stars });
     }
-    saveToolEditor() {
+    async saveToolEditor() {
         const current = this.store.profileSignal();
         const idx = this.editingToolIndex();
         if (!current)
@@ -29981,31 +30551,38 @@ class PreviewComponent {
             return;
         if (form.year === null || form.year === undefined)
             return;
-        const nextTools = [...(current.tools ?? [])];
-        if (this.isAddingTool()) {
-            nextTools.push(nextName);
-        }
-        else if (idx !== null) {
-            nextTools[idx] = nextName;
-        }
-        else {
-            return;
-        }
-        if (this.isAddingTool()) {
-            this.appendToMainModel('tools', nextName);
-        }
-        else if (idx !== null) {
-            this.updateInMainModel('tools', idx, nextName);
+        this.isSavingTool = true;
+        try {
+            const nextTools = [...(current.tools ?? [])];
+            if (this.isAddingTool()) {
+                nextTools.push(nextName);
+            }
+            else if (idx !== null) {
+                nextTools[idx] = nextName;
+            }
+            else {
+                return;
+            }
+            if (this.isAddingTool()) {
+                this.appendToMainModel('tools', nextName);
+            }
+            else if (idx !== null) {
+                this.updateInMainModel('tools', idx, nextName);
+            }
+            const metaIndex = this.isAddingTool() ? nextTools.length - 1 : idx;
+            if (metaIndex !== null) {
+                this.store.setResumeToolMeta(metaIndex, {
+                    providerName: (form.providerName || '').trim() || undefined,
+                    starRating: (form.stars || 0) * 2,
+                    year: form.year,
+                    profileVisibility: form.profileVisibility,
+                    notes: form.notes,
+                });
+                await this.persistTool(metaIndex, !this.isAddingTool());
+            }
         }
-        const metaIndex = this.isAddingTool() ? nextTools.length - 1 : idx;
-        if (metaIndex !== null) {
-            this.store.setResumeToolMeta(metaIndex, {
-                providerName: (form.providerName || '').trim() || undefined,
-                starRating: (form.stars || 0) * 2,
-                year: form.year,
-                profileVisibility: form.profileVisibility,
-                notes: form.notes,
-            });
+        finally {
+            this.isSavingTool = false;
         }
         this.closeToolEditor();
     }
@@ -30034,6 +30611,8 @@ class PreviewComponent {
         const nextTools = current.tools.filter((_, i) => i !== index);
         this.commitProfile({ ...current, tools: nextTools });
         this.reindexToolMetaAfterDelete(index);
+        this.toolServerIds = this.reindexServerIdsAfterDelete(this.toolServerIds, index);
+        this.toolLocallySaved = this.reindexSavedFlagsAfterDelete(this.toolLocallySaved, index);
         if (this.editingToolIndex() === index)
             this.closeToolEditor();
     }
@@ -30068,25 +30647,14 @@ class PreviewComponent {
             }
         });
     }
-    onCertificationFileSelected(event) {
-        this.revokeObjectUrl(this.tempCertification()?.filePreviewUrl);
-        this.selectFile(event);
-        const file = this.fileData;
-        if (!file)
-            return;
-        this.patchTempCertification({
-            fileId: null,
-            fileUrl: null,
-            fileName: file.name,
-            fileObject: file,
-            filePreviewUrl: URL.createObjectURL(file)
-        });
-    }
     startEditCertification(index) {
         const current = this.store.profileSignal();
         const cert = current?.certifications?.[index];
         if (!current || !cert)
             return;
+        if (!this.certificationServerIds[index]) {
+            void this.ensureCertificationServerId(index, cert);
+        }
         this.certificationEditor.set({
             mode: 'edit', index, data: {
                 ...cert,
@@ -30104,15 +30672,29 @@ class PreviewComponent {
             return;
         this.certificationEditor.update((e) => ({ ...e, data: { ...cert, ...patch } }));
     }
+    onCertificationFileSelected(event) {
+        this.revokeObjectUrl(this.tempCertification()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempCertification({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     async saveCertificationEditor() {
         const current = this.store.profileSignal();
         const idx = this.editingCertificationIndex();
         const nextCert = this.tempCertification();
         if (!current || !nextCert)
             return;
-        if (nextCert.fileObject) {
-            this.isSavingCertification = true;
-            try {
+        this.isSavingCertification = true;
+        try {
+            if (nextCert.fileObject) {
                 this.fileData = nextCert.fileObject;
                 const uploaded = await this.saveAWSFile(this.uploadFolderBySection.certification);
                 nextCert.fileId = uploaded.fileId;
@@ -30120,26 +30702,30 @@ class PreviewComponent {
                 nextCert.fileName = uploaded.fileName;
                 nextCert.fileObject = null;
             }
-            finally {
-                this.isSavingCertification = false;
-            }
+            const name = this.normalizeNullableString(nextCert.name);
+            if (!name)
+                return;
+            const normalized = {
+                ...nextCert,
+                name,
+                issuingOrganization: this.normalizeNullableString(nextCert.issuingOrganization),
+                state: this.normalizeNullableString(nextCert.state),
+                credentialId: this.normalizeNullableString(nextCert.credentialId),
+                issueDate: this.normalizeMonthInput(nextCert.issueDate),
+                expiryDate: this.normalizeMonthInput(nextCert.expiryDate),
+            };
+            if (this.isAddingCertification())
+                this.appendToMainModel('certifications', normalized);
+            else if (idx !== null)
+                this.updateInMainModel('certifications', idx, normalized);
+            const savedIndex = this.isAddingCertification()
+                ? (this.store.profileSignal()?.certifications?.length ?? 1) - 1
+                : (idx ?? -1);
+            await this.persistCertification(normalized, savedIndex, !this.isAddingCertification());
+        }
+        finally {
+            this.isSavingCertification = false;
         }
-        const name = this.normalizeNullableString(nextCert.name);
-        if (!name)
-            return;
-        const normalized = {
-            ...nextCert,
-            name,
-            issuingOrganization: this.normalizeNullableString(nextCert.issuingOrganization),
-            state: this.normalizeNullableString(nextCert.state),
-            credentialId: this.normalizeNullableString(nextCert.credentialId),
-            issueDate: this.normalizeMonthInput(nextCert.issueDate),
-            expiryDate: this.normalizeMonthInput(nextCert.expiryDate),
-        };
-        if (this.isAddingCertification())
-            this.appendToMainModel('certifications', normalized);
-        else if (idx !== null)
-            this.updateInMainModel('certifications', idx, normalized);
         this.cancelEditCertification();
     }
     deleteCertification(index) {
@@ -30154,6 +30740,8 @@ class PreviewComponent {
             ...current,
             certifications: current.certifications.filter((_, i) => i !== index),
         });
+        this.certificationServerIds = this.reindexServerIdsAfterDelete(this.certificationServerIds, index);
+        this.certificationLocallySaved = this.reindexSavedFlagsAfterDelete(this.certificationLocallySaved, index);
         if (this.editingCertificationIndex() === index)
             this.cancelEditCertification();
     }
@@ -30178,25 +30766,14 @@ class PreviewComponent {
             }
         });
     }
-    onLicenseFileSelected(event) {
-        this.revokeObjectUrl(this.tempLicense()?.filePreviewUrl);
-        this.selectFile(event);
-        const file = this.fileData;
-        if (!file)
-            return;
-        this.patchTempLicense({
-            fileId: null,
-            fileUrl: null,
-            fileName: file.name,
-            fileObject: file,
-            filePreviewUrl: URL.createObjectURL(file)
-        });
-    }
     startEditLicense(index) {
         const current = this.store.profileSignal();
         const lic = current?.licenses?.[index];
         if (!current || !lic)
             return;
+        if (!this.licenseServerIds[index]) {
+            void this.ensureLicenseServerId(index, lic);
+        }
         this.licenseEditor.set({
             mode: 'edit', index, data: {
                 ...lic,
@@ -30214,15 +30791,29 @@ class PreviewComponent {
             return;
         this.licenseEditor.update((e) => ({ ...e, data: { ...lic, ...patch } }));
     }
+    onLicenseFileSelected(event) {
+        this.revokeObjectUrl(this.tempLicense()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempLicense({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     async saveLicenseEditor() {
         const current = this.store.profileSignal();
         const idx = this.editingLicenseIndex();
         const nextLic = this.tempLicense();
         if (!current || !nextLic)
             return;
-        if (nextLic.fileObject) {
-            this.isSavingLicense = true;
-            try {
+        this.isSavingLicense = true;
+        try {
+            if (nextLic.fileObject) {
                 this.fileData = nextLic.fileObject;
                 const uploaded = await this.saveAWSFile(this.uploadFolderBySection.license);
                 nextLic.fileId = uploaded.fileId;
@@ -30230,26 +30821,30 @@ class PreviewComponent {
                 nextLic.fileName = uploaded.fileName;
                 nextLic.fileObject = null;
             }
-            finally {
-                this.isSavingLicense = false;
-            }
+            const name = this.normalizeNullableString(nextLic.name);
+            if (!name)
+                return;
+            const normalized = {
+                ...nextLic,
+                name,
+                issuingAuthority: this.normalizeNullableString(nextLic.issuingAuthority),
+                licenseNumber: this.normalizeNullableString(nextLic.licenseNumber),
+                state: this.normalizeNullableString(nextLic.state),
+                issueDate: this.normalizeMonthInput(nextLic.issueDate),
+                expiryDate: this.normalizeMonthInput(nextLic.expiryDate),
+            };
+            if (this.isAddingLicense())
+                this.appendToMainModel('licenses', normalized);
+            else if (idx !== null)
+                this.updateInMainModel('licenses', idx, normalized);
+            const savedIndex = this.isAddingLicense()
+                ? (this.store.profileSignal()?.licenses?.length ?? 1) - 1
+                : (idx ?? -1);
+            await this.persistLicense(normalized, savedIndex, !this.isAddingLicense());
+        }
+        finally {
+            this.isSavingLicense = false;
         }
-        const name = this.normalizeNullableString(nextLic.name);
-        if (!name)
-            return;
-        const normalized = {
-            ...nextLic,
-            name,
-            issuingAuthority: this.normalizeNullableString(nextLic.issuingAuthority),
-            licenseNumber: this.normalizeNullableString(nextLic.licenseNumber),
-            state: this.normalizeNullableString(nextLic.state),
-            issueDate: this.normalizeMonthInput(nextLic.issueDate),
-            expiryDate: this.normalizeMonthInput(nextLic.expiryDate),
-        };
-        if (this.isAddingLicense())
-            this.appendToMainModel('licenses', normalized);
-        else if (idx !== null)
-            this.updateInMainModel('licenses', idx, normalized);
         this.cancelEditLicense();
     }
     deleteLicense(index) {
@@ -30264,6 +30859,8 @@ class PreviewComponent {
             ...current,
             licenses: current.licenses.filter((_, i) => i !== index),
         });
+        this.licenseServerIds = this.reindexServerIdsAfterDelete(this.licenseServerIds, index);
+        this.licenseLocallySaved = this.reindexSavedFlagsAfterDelete(this.licenseLocallySaved, index);
         if (this.editingLicenseIndex() === index)
             this.cancelEditLicense();
     }
@@ -30291,25 +30888,14 @@ class PreviewComponent {
             }
         });
     }
-    onEducationFileSelected(event) {
-        this.revokeObjectUrl(this.tempEducation()?.filePreviewUrl);
-        this.selectFile(event);
-        const file = this.fileData;
-        if (!file)
-            return;
-        this.patchTempEducation({
-            fileId: null,
-            fileUrl: null,
-            fileName: file.name,
-            fileObject: file,
-            filePreviewUrl: URL.createObjectURL(file)
-        });
-    }
     startEditEducation(index) {
         const current = this.store.profileSignal();
         const edu = current?.education?.[index];
         if (!current || !edu)
             return;
+        if (!this.educationServerIds[index]) {
+            void this.ensureEducationServerId(index, edu);
+        }
         this.educationEditor.set({
             mode: 'edit', index, data: {
                 ...edu,
@@ -30328,15 +30914,29 @@ class PreviewComponent {
             return;
         this.educationEditor.update((e) => ({ ...e, data: { ...edu, ...patch } }));
     }
+    onEducationFileSelected(event) {
+        this.revokeObjectUrl(this.tempEducation()?.filePreviewUrl);
+        this.selectFile(event);
+        const file = this.fileData;
+        if (!file)
+            return;
+        this.patchTempEducation({
+            fileId: null,
+            fileUrl: null,
+            fileName: file.name,
+            fileObject: file,
+            filePreviewUrl: URL.createObjectURL(file)
+        });
+    }
     async saveEducation() {
         const current = this.store.profileSignal();
         const idx = this.editingEducationIndex();
         const nextEdu = this.tempEducation();
         if (!current || !nextEdu)
             return;
-        if (nextEdu.fileObject) {
-            this.isSavingEducation = true;
-            try {
+        this.isSavingEducation = true;
+        try {
+            if (nextEdu.fileObject) {
                 this.fileData = nextEdu.fileObject;
                 const uploaded = await this.saveAWSFile(this.uploadFolderBySection.education);
                 nextEdu.fileId = uploaded.fileId;
@@ -30344,16 +30944,20 @@ class PreviewComponent {
                 nextEdu.fileName = uploaded.fileName;
                 nextEdu.fileObject = null;
             }
-            finally {
-                this.isSavingEducation = false;
-            }
+            if (this.isAddingEducation())
+                this.appendToMainModel('education', nextEdu);
+            else if (idx !== null)
+                this.updateInMainModel('education', idx, nextEdu);
+            else
+                return;
+            const savedIndex = this.isAddingEducation()
+                ? (this.store.profileSignal()?.education?.length ?? 1) - 1
+                : (idx ?? -1);
+            await this.persistEducation(nextEdu, savedIndex, !this.isAddingEducation());
+        }
+        finally {
+            this.isSavingEducation = false;
         }
-        if (this.isAddingEducation())
-            this.appendToMainModel('education', nextEdu);
-        else if (idx !== null)
-            this.updateInMainModel('education', idx, nextEdu);
-        else
-            return;
         this.cancelEditEducation();
     }
     deleteEducation(index) {
@@ -30368,6 +30972,8 @@ class PreviewComponent {
             ...current,
             education: current.education.filter((_, i) => i !== index),
         });
+        this.educationServerIds = this.reindexServerIdsAfterDelete(this.educationServerIds, index);
+        this.educationLocallySaved = this.reindexSavedFlagsAfterDelete(this.educationLocallySaved, index);
         if (this.editingEducationIndex() === index)
             this.cancelEditEducation();
     }
@@ -30377,74 +30983,39 @@ class PreviewComponent {
     stayOnPreview() {
         this.showBackConfirmPopup = false;
     }
-    closeSavePopup() {
-        this.showPopup = false;
-    }
-    allSaveStepsSucceeded() {
-        return this.statusList.length > 0 && this.statusList.every((x) => x.status === 'success');
-    }
-    goToDashboard() {
-        this.showPopup = false;
-        this.showLoader = true;
-        const payload = this.mapBasicDetailsDashboard(this.resumeData);
-        this.userDetailService.initialSetUpCreateUserDetail(payload).subscribe({
-            next: (res) => {
-                console.log('Initial setup completed successfully', res);
-                setTimeout(() => {
-                    this.showLoader = false;
-                    window.location.href = this.libConfig.dashboardUrl;
-                    ;
-                }, 2000); // 2 seconds     
-            },
-            error: (err) => {
-                console.error('Error while saving initial setup', err);
-                this.showLoader = false;
-            }
-        });
-    }
-    mapBasicDetailsDashboard(data) {
-        const basic = data.basicDetails;
-        this.email = data.email;
-        const jobTitle = (basic?.jobTitle ?? '').toString().trim() || 'Drone Pilot';
-        console.log(basic);
-        this.payloadUserName = basic?.firstName + ' ' + basic?.lastName;
-        console.log(basic);
-        return {
-            providerName: this.providerName,
-            providerId: this.providerId,
-            UserRoleId: this.roleData.roleInfo.id,
-            userDetail: {
-                userBio: basic.summary || "",
-                firstName: basic.firstName,
-                lastName: basic.lastName,
-                email: basic.email,
-                address1: basic.address,
-                address2: "",
-                city: basic.city,
-                state: basic.state,
-                zipcode: basic.zipCode,
-                county: "", // you don’t have this → keep empty or derive
-                country: basic.country,
-                latitude: null, // optional (if using Google API later)
-                longitude: null,
-                yearsActive: 0,
-                isInitialSetupCompleted: true,
-                id: this.payloadUserId,
-                phoneNumber: basic.phone,
-                yearsOfExperince: basic.yearsOfExperience,
-                userJobTitle: [jobTitle],
-                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
-                datePattern: new Date().toLocaleDateString(),
-                dateTimePattern: new Date().toLocaleString(),
-                timePattern: new Date().toLocaleTimeString()
-            }
-        };
+    async goToDashboard() {
+        if (!this.canConfirmAndContinue())
+            return;
+        const payload = this.mapBasicDetailsToUserDetail(this.resumeData);
+        payload.userDetail.isInitialSetupCompleted = true;
+        this.isSavingBasic = true;
+        try {
+            await firstValueFrom(this.userDetailService.initialSetUpCreateUserDetail(payload));
+            this.showDashboardConfirmPopup = false;
+            window.location.href = this.libConfig.dashboardUrl;
+        }
+        catch (err) {
+            console.error('Error while saving initial setup', err);
+        }
+        finally {
+            this.isSavingBasic = false;
+        }
     }
     proceedBack() {
         this.showBackConfirmPopup = false;
         this.backToParent.emit();
         this.store.currentStep.set(1);
     }
+    onGoToDashboardClick() {
+        if (!this.canConfirmAndContinue())
+            return;
+        this.showDashboardConfirmPopup = true;
+    }
+    cancelDashboardRedirect() {
+        if (this.isSavingBasic)
+            return;
+        this.showDashboardConfirmPopup = false;
+    }
     tempProfile;
     isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
     toggleEdit() {
@@ -30457,141 +31028,165 @@ class PreviewComponent {
     cancel() {
         this.isEditMode.set(false);
     }
-    save() {
+    async save() {
         this.details.update(() => ({ ...this.tempProfile }));
-        this.isEditMode.set(false);
-        const current = this.store.profileSignal();
-        if (!current)
-            return;
-        this.commitProfile({ ...current, basicDetails: { ...this.tempProfile } });
-    }
-    async saveResumedetails() {
-        this.showPopup = true;
-        const rawSteps = [
-            {
-                name: 'Basic Details',
-                type: 'single',
-                call: () => {
-                    const payload = this.mapBasicDetailsToUserDetail(this.resumeData);
-                    return this.userDetailService.initialSetUpCreateUserDetail(payload);
-                }
-            },
-            {
-                name: 'Work Experience',
-                type: 'multiple',
-                data: () => this.mapWorkExperience(this.resumeData),
-                call: (item) => this.userExperienceService.createUserExperience(item)
-            },
-            {
-                name: 'Education',
-                type: 'multiple',
-                data: () => this.mapEducation(this.resumeData),
-                call: (item) => this.userEducation.createUserEducation(item)
-            },
-            {
-                name: 'Certification',
-                type: 'multiple',
-                data: () => this.mapCertifications(this.resumeData),
-                call: (item) => this.userDocumentService.createUserDocument(item)
-            },
-            {
-                name: 'License',
-                type: 'multiple',
-                data: () => this.mapLicenses(this.resumeData),
-                call: (item) => this.userDocumentService.createUserDocument(item)
-            },
-            {
-                name: 'Skills',
-                type: 'batch',
-                data: () => this.mapSkills(this.resumeData),
-                call: (items) => this.userSkillSetService.createUserSkillSet(items)
-            },
-            {
-                name: 'Tools',
-                type: 'batch',
-                data: () => this.mapTools(this.resumeData),
-                call: (items) => this.userToolService.createUserTool(items)
-            }
-        ];
-        // Skip empty sections and continue with available ones.
-        const steps = rawSteps.filter((step) => {
-            if (step.type === 'multiple' || step.type === 'batch') {
-                const data = step.data(); // ✅ call function
-                return Array.isArray(data) && data.length > 0;
-            }
-            return true;
-        });
-        this.statusList = [];
-        from(steps)
-            .pipe(concatMap((step) => {
-            const stepStatus = {
-                name: step.name,
-                status: 'pending',
-                successCount: 0,
-                failCount: 0
-            };
-            this.statusList.push(stepStatus);
-            // ✅ SINGLE API
-            if (step.type === 'single') {
-                return step.call(null).pipe(tap$1((res) => {
-                    if (res?.failed) {
-                        stepStatus.status = 'error';
-                        stepStatus.error = res.message;
-                    }
-                    else {
-                        stepStatus.status = 'success';
-                    }
-                }), catchError((err) => {
-                    stepStatus.status = 'error';
-                    stepStatus.error = err.message;
-                    return of(null); // 🔥 continue flow
-                }));
-            }
-            if (step.type === 'batch') {
-                const stepData = step.data();
-                return step.call(stepData).pipe(tap$1((res) => {
-                    if (res?.failed) {
-                        stepStatus.status = 'error';
-                        stepStatus.error = res.message;
-                    }
-                    else {
-                        stepStatus.status = 'success';
-                        stepStatus.successCount = step.data?.length ?? 0;
-                    }
-                }), catchError((err) => {
-                    stepStatus.status = 'error';
-                    stepStatus.error = err.message;
-                    return of(null);
-                }));
-            }
-            // ✅ MULTIPLE LOOP (like 2 work experiences)
-            const stepData = step.data(); // ✅ executed AFTER username set
-            return from(stepData).pipe(concatMap((item) => step.call(item).pipe(tap$1((res) => {
-                if (res?.failed) {
-                    stepStatus.failCount++;
-                }
-                else {
-                    stepStatus.successCount++;
-                }
-            }), catchError(() => {
-                stepStatus.failCount++;
-                return of(null); // 🔥 continue next item
-            }))), tap$1(() => {
-                // final step status
-                if (stepStatus.failCount > 0) {
-                    stepStatus.status = 'partial'; // 🔥 mixed result
-                }
-                else {
-                    stepStatus.status = 'success';
+        this.isSavingBasic = true;
+        try {
+            const current = this.store.profileSignal();
+            if (current) {
+                this.commitProfile({ ...current, basicDetails: { ...this.tempProfile } });
+                const payload = this.mapBasicDetailsToUserDetail(this.resumeData);
+                if (payload) {
+                    await firstValueFrom(this.userDetailService.initialSetUpCreateUserDetail(payload));
+                    this.hasUserDetailData = true;
                 }
-            }), catchError(() => of(null)) // 🔥 safety
-            );
-        }))
-            .subscribe({
-            complete: () => {
-                console.log('All steps completed (with possible errors)');
             }
-        });
+        }
+        catch (err) {
+            console.error('Unable to save basic details', err);
+        }
+        finally {
+            this.isSavingBasic = false;
+            this.basicDetailsSaved = true;
+            this.isEditMode.set(false);
+        }
+    }
+    async persistWorkExperience(item, index, isEdit) {
+        this.buildUserName();
+        const payload = this.mapWorkExperience({ workExperience: [item] })[0];
+        if (isEdit && !this.workExperienceServerIds[index]) {
+            await this.ensureWorkServerId(index, item);
+        }
+        const hasServerId = !!this.workExperienceServerIds[index];
+        if (hasServerId)
+            payload.id = this.workExperienceServerIds[index];
+        try {
+            const res = (isEdit && hasServerId)
+                ? await firstValueFrom(this.userExperienceService
+                    .updateUserExperience(payload))
+                : await firstValueFrom(this.userExperienceService.createUserExperience(payload));
+            const createdId = this.getCreatedId(res);
+            this.markItemSaved(this.workExperienceServerIds, this.workExperienceLocallySaved, index, createdId);
+        }
+        catch (err) {
+            console.error('Unable to persist work experience', err);
+        }
+    }
+    async persistEducation(item, index, isEdit) {
+        this.buildUserName();
+        const payload = this.mapEducation({ education: [item] })[0];
+        if (isEdit && !this.educationServerIds[index]) {
+            await this.ensureEducationServerId(index, item);
+        }
+        const hasServerId = !!this.educationServerIds[index];
+        if (hasServerId)
+            payload.id = this.educationServerIds[index];
+        try {
+            const res = (isEdit && hasServerId)
+                ? await firstValueFrom(this.userEducation.updateUserEducation(payload))
+                : await firstValueFrom(this.userEducation.createUserEducation(payload));
+            const createdId = this.getCreatedId(res);
+            this.markItemSaved(this.educationServerIds, this.educationLocallySaved, index, createdId);
+        }
+        catch (err) {
+            console.error('Unable to persist education', err);
+        }
+    }
+    async persistCertification(item, index, isEdit) {
+        this.buildUserName();
+        const payload = this.mapCertifications({
+            certifications: [item],
+            basicDetails: this.store.profileSignal()?.basicDetails
+        })[0];
+        if (isEdit && !this.certificationServerIds[index]) {
+            await this.ensureCertificationServerId(index, item);
+        }
+        const hasServerId = !!this.certificationServerIds[index];
+        if (hasServerId)
+            payload.id = this.certificationServerIds[index];
+        try {
+            const res = (isEdit && hasServerId)
+                ? await firstValueFrom(this.userDocumentService
+                    .updateUserDocument(payload))
+                : await firstValueFrom(this.userDocumentService.createUserDocument(payload));
+            const createdId = this.getCreatedId(res);
+            this.markItemSaved(this.certificationServerIds, this.certificationLocallySaved, index, createdId);
+        }
+        catch (err) {
+            console.error('Unable to persist certification', err);
+        }
+    }
+    async persistLicense(item, index, isEdit) {
+        this.buildUserName();
+        const payload = this.mapLicenses({
+            licenses: [item],
+            basicDetails: this.store.profileSignal()?.basicDetails
+        })[0];
+        if (isEdit && !this.licenseServerIds[index]) {
+            await this.ensureLicenseServerId(index, item);
+        }
+        const hasServerId = !!this.licenseServerIds[index];
+        if (hasServerId)
+            payload.id = this.licenseServerIds[index];
+        try {
+            const res = (isEdit && hasServerId)
+                ? await firstValueFrom(this.userDocumentService
+                    .updateUserDocument(payload))
+                : await firstValueFrom(this.userDocumentService.createUserDocument(payload));
+            const createdId = this.getCreatedId(res);
+            this.markItemSaved(this.licenseServerIds, this.licenseLocallySaved, index, createdId);
+        }
+        catch (err) {
+            console.error('Unable to persist license', err);
+        }
+    }
+    async persistSkill(index, isEdit) {
+        if (!this.resumeData)
+            return;
+        this.buildUserName();
+        const payload = this.mapSkills(this.resumeData)[index];
+        if (!payload)
+            return;
+        if (isEdit && !this.skillServerIds[index]) {
+            await this.ensureSkillServerId(index);
+        }
+        const hasServerId = !!this.skillServerIds[index];
+        if (hasServerId)
+            payload.id = this.skillServerIds[index];
+        try {
+            const res = (isEdit && hasServerId)
+                ? await firstValueFrom(this.userSkillSetService.updateUserSkillSet(payload))
+                : await firstValueFrom(this.userSkillSetService.createUserSkillSet([payload]));
+            const createdId = this.getCreatedId(res);
+            this.markItemSaved(this.skillServerIds, this.skillLocallySaved, index, createdId);
+        }
+        catch (err) {
+            console.error('Unable to persist skill', err);
+        }
+    }
+    async persistTool(index, isEdit) {
+        if (!this.resumeData)
+            return;
+        this.buildUserName();
+        const payload = this.mapTools(this.resumeData)[index];
+        if (!payload)
+            return;
+        if (isEdit && !this.toolServerIds[index]) {
+            await this.ensureToolServerId(index);
+        }
+        const hasServerId = !!this.toolServerIds[index];
+        if (hasServerId)
+            payload.id = this.toolServerIds[index];
+        try {
+            const res = (isEdit && hasServerId)
+                ? await firstValueFrom(this.userToolService.updateUserTool(payload))
+                : await firstValueFrom(this.userToolService.createUserTool([payload]));
+            const createdId = this.getCreatedId(res);
+            this.markItemSaved(this.toolServerIds, this.toolLocallySaved, index, createdId);
+        }
+        catch (err) {
+            console.error('Unable to persist tool', err);
+        }
     }
     async saveAWSFile(sectionFolder) {
         if (!this.fileData)
@@ -30705,6 +31300,81 @@ class PreviewComponent {
             }
         };
     }
+    mapBasicDetailsDashboard(data) {
+        const basic = data.basicDetails;
+        this.email = data.email;
+        const jobTitle = (basic?.jobTitle ?? '').toString().trim() || 'Drone Pilot';
+        console.log(basic);
+        this.payloadUserName = basic?.firstName + ' ' + basic?.lastName;
+        console.log(basic);
+        return {
+            providerName: this.providerName,
+            providerId: this.providerId,
+            UserRoleId: this.roleData.roleInfo.id,
+            userDetail: {
+                userBio: basic.summary || "",
+                firstName: basic.firstName,
+                lastName: basic.lastName,
+                email: basic.email,
+                address1: basic.address,
+                address2: "",
+                city: basic.city,
+                state: basic.state,
+                zipcode: basic.zipCode,
+                county: "", // you don’t have this → keep empty or derive
+                country: basic.country,
+                latitude: null, // optional (if using Google API later)
+                longitude: null,
+                yearsActive: 0,
+                isInitialSetupCompleted: true,
+                id: this.payloadUserId,
+                phoneNumber: basic.phone,
+                yearsOfExperince: basic.yearsOfExperience,
+                userJobTitle: [jobTitle],
+                timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+                datePattern: new Date().toLocaleDateString(),
+                dateTimePattern: new Date().toLocaleString(),
+                timePattern: new Date().toLocaleTimeString()
+            }
+        };
+    }
+    mapSavedBasicDetailsToPreview(userDetailRes) {
+        const server = userDetailRes?.data?.userDetail ?? userDetailRes?.userDetail ?? userDetailRes?.data ?? userDetailRes;
+        if (!server)
+            return null;
+        if (!(server?.firstName || server?.lastName || server?.email))
+            return null;
+        const source = this.store.profileSignal()?.basicDetails;
+        const fallback = source ?? {};
+        const serverJobTitle = Array.isArray(server?.userJobTitle)
+            ? (server.userJobTitle[0] ?? '')
+            : (server?.userJobTitle ?? server?.jobTitle ?? '');
+        const parsedYears = Number(server?.yearsOfExperince ?? server?.yearsOfExperience);
+        return {
+            firstName: server?.firstName ?? fallback.firstName ?? '',
+            lastName: server?.lastName ?? fallback.lastName ?? '',
+            email: server?.email ?? fallback.email ?? '',
+            phone: server?.phoneNumber ?? server?.phone ?? fallback.phone ?? '',
+            address: server?.address1 ?? server?.address ?? fallback.address ?? '',
+            city: server?.city ?? fallback.city ?? '',
+            state: server?.state ?? fallback.state ?? '',
+            zipCode: server?.zipcode ?? server?.zipCode ?? fallback.zipCode ?? '',
+            country: server?.country ?? fallback.country ?? '',
+            jobTitle: serverJobTitle || fallback.jobTitle || '',
+            yearsOfExperience: Number.isFinite(parsedYears) ? parsedYears : Number(fallback.yearsOfExperience ?? 0),
+            summary: server?.userBio ?? fallback.summary ?? '',
+        };
+    }
+    hasUserDetailPayload(userDetailRes) {
+        const payload = userDetailRes?.data?.userDetail ?? userDetailRes?.userDetail ?? userDetailRes?.data ?? userDetailRes;
+        if (!payload)
+            return false;
+        if (Array.isArray(payload))
+            return payload.length > 0;
+        if (typeof payload !== 'object')
+            return !!payload;
+        return Object.keys(payload).length > 0;
+    }
     mapWorkExperience(data) {
         return data.workExperience.map((exp) => {
             return {
@@ -30869,12 +31539,54 @@ class PreviewComponent {
         const d = new Date(date + "-01"); // add day
         return d.toISOString();
     }
+    workActionLabel(index) {
+        if (this.isAddingJob())
+            return 'Save';
+        if (index === null || index < 0)
+            return 'Save';
+        return this.hasUnsavedWorkItem(index) ? 'Save' : 'Update';
+    }
+    educationActionLabel(index) {
+        if (this.isAddingEducation())
+            return 'Save';
+        if (index === null || index < 0)
+            return 'Save';
+        return this.hasUnsavedEducationItem(index) ? 'Save' : 'Update';
+    }
+    certificationActionLabel(index) {
+        if (this.isAddingCertification())
+            return 'Save';
+        if (index === null || index < 0)
+            return 'Save';
+        return this.hasUnsavedCertificationItem(index) ? 'Save' : 'Update';
+    }
+    licenseActionLabel(index) {
+        if (this.isAddingLicense())
+            return 'Save';
+        if (index === null || index < 0)
+            return 'Save';
+        return this.hasUnsavedLicenseItem(index) ? 'Save' : 'Update';
+    }
+    skillActionLabel(index) {
+        if (this.isAddingSkill())
+            return 'Save';
+        if (index === null || index < 0)
+            return 'Save';
+        return this.hasUnsavedSkillItem(index) ? 'Save' : 'Update';
+    }
+    toolActionLabel(index) {
+        if (this.isAddingTool())
+            return 'Save';
+        if (index === null || index < 0)
+            return 'Save';
+        return this.hasUnsavedToolItem(index) ? 'Save' : 'Update';
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, deps: [{ token: CredentialingStore }, { token: FileService }, { token: UserSkillSetService }, { token: UserToolService }, { token: UserDocumentService }, { token: UserEducationService }, { token: UserDetailService }, { token: UserExperienceService }, { token: i6.TokenService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: false, selector: "app-preview", inputs: { providerId: "providerId", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "\r\n<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end\">\r\n          <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.firstName\"\r\n                name=\"fName\"\r\n                placeholder=\"First Name\"\r\n                required\r\n                #fName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.lastName\"\r\n                name=\"lName\"\r\n                placeholder=\"Last Name\"\r\n                required\r\n                #lName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"email\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.email\"\r\n                name=\"email\"\r\n                placeholder=\"Email\"\r\n                required\r\n                email\r\n                #email=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\"\r\n                name=\"phone\"\r\n                placeholder=\"Phone (10 digits)\"\r\n                required\r\n                pattern=\"^\\d{10}$\"\r\n                maxlength=\"10\"\r\n                inputmode=\"numeric\"\r\n                #phone=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.address\"\r\n                name=\"address\"\r\n                placeholder=\"Home Address\"\r\n                required\r\n                #address=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.city\"\r\n                name=\"city\"\r\n                placeholder=\"City\"\r\n                required\r\n                #city=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.state\"\r\n                name=\"state\"\r\n                placeholder=\"State\"\r\n                required\r\n                #state=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.zipCode\"\r\n                name=\"zipCode\"\r\n                placeholder=\"Zip Code\"\r\n                required\r\n                #zipCode=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.country\"\r\n                name=\"country\"\r\n                placeholder=\"Country\"\r\n                required\r\n                #country=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.jobTitle\"\r\n                name=\"jobTitle\"\r\n                placeholder=\"Job Title\"\r\n                required\r\n                #jobTitle=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"number\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\"\r\n                placeholder=\"Years of Experience\"\r\n                required\r\n                min=\"0\"\r\n                #yearsOfExperience=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"save()\">Save Changes</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"workSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add work experience\"\r\n        (click)=\"addJob()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one work experience.</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n              name=\"newJobTitle\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n              name=\"newCompany\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n              name=\"newCity\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n              name=\"newStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\"\r\n              (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n              name=\"newEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                name=\"newIsCurrent\"\r\n                id=\"newIsCurrent\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea\r\n              rows=\"4\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n              name=\"newResponsibilities\"\r\n            ></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\"\r\n              name=\"newWorkAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' : formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div\r\n                *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\"\r\n              >\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            \r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditJob(i)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteJob(i);\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n                  name=\"jobTitle{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n                  name=\"company{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n                  name=\"city{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n                  name=\"startDate{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\"\r\n                  (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\"\r\n                />\r\n                <div\r\n                  class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\"\r\n                >\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                    name=\"isCurrent{{ i }}\"\r\n                    id=\"isCurrent{{ i }}\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n                  name=\"responsibilities{{ i }}\"\r\n                ></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n                <input\r\n                  type=\"file\"\r\n                  accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                  class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\"\r\n                  name=\"workAttachment{{ i }}\"\r\n                />\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n         <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>      \r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certificationsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add certification\"\r\n        (click)=\"addCertification()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one certification.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n              name=\"newCertName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n              name=\"newCertOrg\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n              name=\"newCertState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n              name=\"newCertCredentialId\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n              name=\"newCertIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n              name=\"newCertExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\"\r\n              name=\"newCertAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n          </button>        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n               <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditCertification(ci)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteCertification(ci)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n                name=\"certName{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n                name=\"certState{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n                name=\"certIssue{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n                name=\"certExpiry{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\"\r\n                name=\"certAttachment{{ ci }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n            </button>          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licensesSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add license\"\r\n        (click)=\"addLicense()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one license.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n              name=\"newLicName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n              name=\"newLicAuthority\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n              name=\"newLicNumber\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n              name=\"newLicState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n              name=\"newLicIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n              name=\"newLicExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\"\r\n              name=\"newLicenseAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditLicense(li)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteLicense(li)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n                name=\"licName{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n                name=\"licAuthority{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n                name=\"licNumber{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n                name=\"licState{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n                name=\"licIssue{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n                name=\"licExpiry{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\"\r\n                name=\"licenseAttachment{{ li }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"toolsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add tool\"\r\n        (click)=\"addTool()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\"\r\n          title=\"Edit\"\r\n        >\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n            <span\r\n              *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Delete tool\"\r\n          (click)=\"deleteTool(ti)\"\r\n        >\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div\r\n      *ngIf=\"isToolEditorOpen()\"\r\n      class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n      (click)=\"closeToolEditor()\"\r\n    >\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}</div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\"\r\n                  name=\"toolName\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Service Provider</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.providerName\"\r\n                  (ngModelChange)=\"patchToolForm({ providerName: $event })\"\r\n                  name=\"toolProvider\"\r\n                  placeholder=\"Service Provider\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button\r\n                    *ngFor=\"let s of [1,2,3,4,5]\"\r\n                    type=\"button\"\r\n                    class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\"\r\n                    [attr.aria-label]=\"'Set rating ' + s\"\r\n                  >\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"number\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\"\r\n                  name=\"toolYear\"\r\n                  min=\"1\"\r\n                  max=\"30\"\r\n                  placeholder=\"Years of Experience\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\"\r\n                    name=\"toolVisible\"\r\n                    id=\"toolVisible\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\"\r\n                  name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button\r\n              *ngIf=\"!isAddingTool() && editingToolIndex() !== null\"\r\n              type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\"\r\n              (click)=\"deleteTool(editingToolIndex()!)\"\r\n            >\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveToolEditor()\">\r\n              {{ isAddingTool() ? 'Save' : 'Update' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skillsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add skill\"\r\n          (click)=\"addSkill()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\"\r\n            title=\"Edit\"\r\n          >\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span\r\n              *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\"\r\n            title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div\r\n        *ngIf=\"isSkillEditorOpen()\"\r\n        class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n        (click)=\"closeSkillEditor()\"\r\n      >\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill') }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\"\r\n                    name=\"skillName\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Service Provider</label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.providerName\"\r\n                    (ngModelChange)=\"patchSkillForm({ providerName: $event })\"\r\n                    name=\"skillProvider\"\r\n                    placeholder=\"Service Provider\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button\r\n                      *ngFor=\"let s of [1,2,3,4,5]\"\r\n                      type=\"button\"\r\n                      class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\"\r\n                      [attr.aria-label]=\"'Set rating ' + s\"\r\n                    >\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"number\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\"\r\n                    name=\"skillYear\"\r\n                    min=\"1\"\r\n                    max=\"30\"\r\n                    placeholder=\"Years of Experience\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\"\r\n                      name=\"skillVisible\"\r\n                      id=\"skillVisible\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea\r\n                    rows=\"4\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\"\r\n                    name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"\r\n                  ></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button\r\n                *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\"\r\n                type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\"\r\n                (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n              >\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveSkillEditor()\">\r\n                {{ isAddingSkill() ? 'Save' : 'Update' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add education\"\r\n          (click)=\"addEducation()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">Missing required fields</div>\r\n        <div class=\"small\">Add at least one education.</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n              name=\"newEduDegree\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n              name=\"newEduInstitution\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n              name=\"newEduDegreeType\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n              name=\"newEduStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n              name=\"newEduEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n                name=\"eduDegree{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n                name=\"eduInstitution{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n                name=\"eduDegreeType{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\"\r\n                name=\"eduCity{{ ei }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n                name=\"eduStartDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n                name=\"eduEndDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0\" class=\"text-muted small\">No education added.</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button\r\n      class=\"btn btn-primary px-5 shadow\"\r\n      [disabled]=\"!canConfirmAndContinue()\"\r\n      [title]=\"canConfirmAndContinue() ? '' : 'Please fill all required fields in all mandatory sections.'\"\r\n      (click)=\"saveResumedetails()\"\r\n    >\r\n      Confirm All & Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showPopup\" >\r\n  <div class=\"status-modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"status-modal-header\">\r\n      <h3 class=\"mb-1\">Saving Resume Details</h3>\r\n      <p class=\"text-muted mb-0\">Please wait while we process each section.</p>\r\n    </div>\r\n\r\n    <div class=\"status-modal-body\">\r\n      <div class=\"status-modal-row\" *ngFor=\"let item of statusList\">\r\n        <div class=\"status-modal-name\">{{ item.name }}</div>\r\n\r\n        <div class=\"status-modal-state pending\" *ngIf=\"item.status === 'pending'\">\r\n          <span class=\"spinner-border spinner-border-sm me-2\"></span> In progress\r\n        </div>\r\n\r\n        <div class=\"status-modal-state success\" *ngIf=\"item.status === 'success'\">\r\n          <span class=\"me-1\">\u2713</span> Saved\r\n        </div>\r\n\r\n        <div class=\"status-modal-state partial\" *ngIf=\"item.status === 'partial'\">\r\n          <span class=\"me-1\">!</span> {{ item.successCount }} Success / {{ item.failCount }} Failed\r\n        </div>\r\n\r\n        <div class=\"status-modal-state error\" *ngIf=\"item.status === 'error'\">\r\n          <span class=\"me-1\">\u2716</span> {{ item.error || 'Failed' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"status-modal-footer\">\r\n      <!-- <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeSavePopup()\">Back to Preview</button> -->\r\n      <div class=\"d-flex justify-content-end\">\r\n        <button\r\n        [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          *ngIf=\"allSaveStepsSucceeded()\"\r\n          type=\"button\"\r\n          class=\"btn btn-primary\"\r\n          (click)=\"goToDashboard()\"\r\n        >\r\n          Go to Dashboard\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">Your data might be lost if you go back now.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\n"], dependencies: [{ kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: false, selector: "app-preview", inputs: { providerId: "providerId", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl" }, outputs: { backToParent: "backToParent" }, ngImport: i0, template: "<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n                <span class=\"badge border section-flag\"\r\n                  [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                  {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light d-flex align-items-center justify-content-between\">\r\n          <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n            <i class=\"bi bi-exclamation-circle me-1\"></i> Click \"Edit Details\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <i class=\"bi bi-check-circle me-1\"></i> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n                placeholder=\"First Name\" required #fName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n                placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n                required email #email=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\" name=\"phone\" placeholder=\"Phone (10 digits)\"\r\n                required pattern=\"^\\d{10}$\" maxlength=\"10\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.address\" name=\"address\"\r\n                placeholder=\"Home Address\" required #address=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n                address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n                required #city=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n                required #state=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n                required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n                (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n                required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n                is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n                Zip code must be up to 6 digits\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n                placeholder=\"Country\" required #country=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n                is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n                placeholder=\"Job Title\" required #jobTitle=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n                title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input type=\"number\" class=\"form-control\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"0\"\r\n                #yearsOfExperience=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic\" (click)=\"save()\">\r\n            <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">No work experience added</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\" name=\"newStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\" (ngModelChange)=\"patchTempJob({ endDate: $event })\" name=\"newEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n              required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <span class=\"badge border mt-1\"\r\n                [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n              </span>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n                formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n              title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n              title=\"Delete\">\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\" name=\"startDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"month\" class=\"form-control form-control-sm\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\" (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n                <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">No certification added</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\" name=\"newCertIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\" name=\"newCertExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n            (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <span class=\"badge border mt-1\"\r\n                [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n              </span>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n                (click)=\"deleteCertification(ci)\" title=\"Delete\">\r\n                <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\" name=\"certIssue{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\" name=\"certExpiry{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n              <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n              (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">No license added</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\" name=\"newLicIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\" name=\"newLicExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n            (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <span class=\"badge border mt-1\"\r\n                [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n              </span>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n                title=\"Delete\">\r\n                <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\" name=\"licIssue{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\" name=\"licExpiry{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n              <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n              (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n          <span class=\"badge border ms-1\"\r\n            [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n          <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n            class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n            Missing info\r\n          </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\">\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeToolEditor()\">\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n            </div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n                    class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\" name=\"toolYear\" min=\"1\"\r\n                  max=\"30\" placeholder=\"Years of Experience\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">\r\n                  Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\"\r\n                    id=\"toolVisible\" />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\">\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n              <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\"\r\n            class=\"badge border section-flag\"\r\n            [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span class=\"badge border ms-1\"\r\n              [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\">\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeSkillEditor()\">\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n                }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n                      class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\" name=\"skillYear\" min=\"1\"\r\n                    max=\"30\" placeholder=\"Years of Experience\" />\r\n                  <div class=\"small text-danger mt-1\"\r\n                    *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is\r\n                    required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\"\r\n                      id=\"skillVisible\" />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\">\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n                <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\"\r\n            class=\"badge border section-flag\"\r\n            [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">No education added</div>\r\n        <!-- <div class=\"small\">Add at least one education.</div> -->\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\" name=\"newEduStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\" name=\"newEduEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n              <span>{{ tempEducation()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n            (click)=\"saveEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <span class=\"badge border mt-1\"\r\n              [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\">\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\" name=\"eduStartDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\" name=\"eduEndDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n              <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n                <span>{{ tempEducation()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n              <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button class=\"btn btn-primary px-5 shadow\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n      (click)=\"onGoToDashboardClick()\">\r\n      <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">You are redirecting to dashboard</h4>\r\n    <p class=\"text-muted mb-4\">Proceed to save initial setup completion and continue?</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n        <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i8.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i8.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: i8.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i8.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i8.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i8.EmailValidator, selector: "[email][formControlName],[email][formControl],[email][ngModel]", inputs: ["email"] }, { kind: "directive", type: i8.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i8.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-preview', standalone: false, template: "\r\n<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end\">\r\n          <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.firstName\"\r\n                name=\"fName\"\r\n                placeholder=\"First Name\"\r\n                required\r\n                #fName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.lastName\"\r\n                name=\"lName\"\r\n                placeholder=\"Last Name\"\r\n                required\r\n                #lName=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"email\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.email\"\r\n                name=\"email\"\r\n                placeholder=\"Email\"\r\n                required\r\n                email\r\n                #email=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\"\r\n                name=\"phone\"\r\n                placeholder=\"Phone (10 digits)\"\r\n                required\r\n                pattern=\"^\\d{10}$\"\r\n                maxlength=\"10\"\r\n                inputmode=\"numeric\"\r\n                #phone=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.address\"\r\n                name=\"address\"\r\n                placeholder=\"Home Address\"\r\n                required\r\n                #address=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.city\"\r\n                name=\"city\"\r\n                placeholder=\"City\"\r\n                required\r\n                #city=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.state\"\r\n                name=\"state\"\r\n                placeholder=\"State\"\r\n                required\r\n                #state=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.zipCode\"\r\n                name=\"zipCode\"\r\n                placeholder=\"Zip Code\"\r\n                required\r\n                #zipCode=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.country\"\r\n                name=\"country\"\r\n                placeholder=\"Country\"\r\n                required\r\n                #country=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.jobTitle\"\r\n                name=\"jobTitle\"\r\n                placeholder=\"Job Title\"\r\n                required\r\n                #jobTitle=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"number\"\r\n                class=\"form-control\"\r\n                [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\"\r\n                placeholder=\"Years of Experience\"\r\n                required\r\n                min=\"0\"\r\n                #yearsOfExperience=\"ngModel\"\r\n              >\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" (click)=\"save()\">Save Changes</button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"workSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add work experience\"\r\n        (click)=\"addJob()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one work experience.</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n              name=\"newJobTitle\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n              name=\"newCompany\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n              name=\"newCity\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n              name=\"newStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\"\r\n              (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n              name=\"newEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                name=\"newIsCurrent\"\r\n                id=\"newIsCurrent\"\r\n              />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea\r\n              rows=\"4\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n              name=\"newResponsibilities\"\r\n            ></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\"\r\n              name=\"newWorkAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' : formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div\r\n                *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\"\r\n              >\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n            \r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditJob(i)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteJob(i);\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            \r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\"\r\n                  name=\"jobTitle{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\"\r\n                  name=\"company{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\"\r\n                  name=\"city{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\"\r\n                  name=\"startDate{{ i }}\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"month\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\"\r\n                  (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\"\r\n                />\r\n                <div\r\n                  class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\"\r\n                >\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\"\r\n                    name=\"isCurrent{{ i }}\"\r\n                    id=\"isCurrent{{ i }}\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\"\r\n                  name=\"responsibilities{{ i }}\"\r\n                ></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n                <input\r\n                  type=\"file\"\r\n                  accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                  class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\"\r\n                  name=\"workAttachment{{ i }}\"\r\n                />\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n         <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\" (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>      \r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certificationsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add certification\"\r\n        (click)=\"addCertification()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one certification.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n              name=\"newCertName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n              name=\"newCertOrg\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n              name=\"newCertState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n              name=\"newCertCredentialId\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n              name=\"newCertIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n              name=\"newCertExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\"\r\n              name=\"newCertAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n          </button>        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n               <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditCertification(ci)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteCertification(ci)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\"\r\n                name=\"certName{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\"\r\n                name=\"certState{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\"\r\n                name=\"certIssue{{ ci }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\"\r\n                name=\"certExpiry{{ ci }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\"\r\n                name=\"certAttachment{{ ci }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditCertification()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\" (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : 'Save' }}\r\n            </button>          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licensesSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add license\"\r\n        (click)=\"addLicense()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">Missing required fields</div>\r\n      <div class=\"small\">Add at least one license.</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n              name=\"newLicName\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n              name=\"newLicAuthority\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n              name=\"newLicNumber\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n              name=\"newLicState\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n              name=\"newLicIssueDate\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n              name=\"newLicExpiryDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n            <input\r\n              type=\"file\"\r\n              accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n              class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\"\r\n              name=\"newLicenseAttachment\"\r\n            />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n        <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditLicense(li)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteLicense(li)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\"\r\n                name=\"licName{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\"\r\n                name=\"licAuthority{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\"\r\n                name=\"licNumber{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\"\r\n                name=\"licState{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\"\r\n                name=\"licIssue{{ li }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\"\r\n                name=\"licExpiry{{ li }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n              <input\r\n                type=\"file\"\r\n                accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\"\r\n                class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\"\r\n                name=\"licenseAttachment{{ li }}\"\r\n              />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\" (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\" (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : 'Save' }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"toolsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n          Missing info\r\n        </span>\r\n      </div>\r\n      <button\r\n        type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\"\r\n        title=\"Add tool\"\r\n        (click)=\"addTool()\"\r\n      >\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\"\r\n          title=\"Edit\"\r\n        >\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n            <span\r\n              *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Delete tool\"\r\n          (click)=\"deleteTool(ti)\"\r\n        >\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div\r\n      *ngIf=\"isToolEditorOpen()\"\r\n      class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n      (click)=\"closeToolEditor()\"\r\n    >\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}</div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\"\r\n                  name=\"toolName\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Service Provider</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.providerName\"\r\n                  (ngModelChange)=\"patchToolForm({ providerName: $event })\"\r\n                  name=\"toolProvider\"\r\n                  placeholder=\"Service Provider\"\r\n                />\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button\r\n                    *ngFor=\"let s of [1,2,3,4,5]\"\r\n                    type=\"button\"\r\n                    class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\"\r\n                    [attr.aria-label]=\"'Set rating ' + s\"\r\n                  >\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input\r\n                  type=\"number\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\"\r\n                  name=\"toolYear\"\r\n                  min=\"1\"\r\n                  max=\"30\"\r\n                  placeholder=\"Years of Experience\"\r\n                />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    type=\"checkbox\"\r\n                    [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\"\r\n                    name=\"toolVisible\"\r\n                    id=\"toolVisible\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea\r\n                  rows=\"4\"\r\n                  class=\"form-control\"\r\n                  [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\"\r\n                  name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"\r\n                ></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button\r\n              *ngIf=\"!isAddingTool() && editingToolIndex() !== null\"\r\n              type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\"\r\n              (click)=\"deleteTool(editingToolIndex()!)\"\r\n            >\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveToolEditor()\">\r\n              {{ isAddingTool() ? 'Save' : 'Update' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skillsSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add skill\"\r\n          (click)=\"addSkill()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\"\r\n            title=\"Edit\"\r\n          >\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span\r\n              *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\"\r\n            >\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\"\r\n            title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\"\r\n          >\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div\r\n        *ngIf=\"isSkillEditorOpen()\"\r\n        class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\"\r\n        (click)=\"closeSkillEditor()\"\r\n      >\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\" (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill') }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\"\r\n                    name=\"skillName\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Service Provider</label>\r\n                  <input\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.providerName\"\r\n                    (ngModelChange)=\"patchSkillForm({ providerName: $event })\"\r\n                    name=\"skillProvider\"\r\n                    placeholder=\"Service Provider\"\r\n                  />\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button\r\n                      *ngFor=\"let s of [1,2,3,4,5]\"\r\n                      type=\"button\"\r\n                      class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\"\r\n                      [attr.aria-label]=\"'Set rating ' + s\"\r\n                    >\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input\r\n                    type=\"number\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\"\r\n                    name=\"skillYear\"\r\n                    min=\"1\"\r\n                    max=\"30\"\r\n                    placeholder=\"Years of Experience\"\r\n                  />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input\r\n                      class=\"form-check-input\"\r\n                      type=\"checkbox\"\r\n                      [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\"\r\n                      name=\"skillVisible\"\r\n                      id=\"skillVisible\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea\r\n                    rows=\"4\"\r\n                    class=\"form-control\"\r\n                    [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\"\r\n                    name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"\r\n                  ></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button\r\n                *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\"\r\n                type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\"\r\n                (click)=\"deleteSkill(editingSkillIndex()!)\"\r\n              >\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" (click)=\"saveSkillEditor()\">\r\n                {{ isAddingSkill() ? 'Save' : 'Update' }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n</div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n            Missing info\r\n          </span>\r\n        </div>\r\n        <button\r\n          type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\"\r\n          title=\"Add education\"\r\n          (click)=\"addEducation()\"\r\n        >\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">Missing required fields</div>\r\n        <div class=\"small\">Add at least one education.</div>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n              name=\"newEduDegree\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n              name=\"newEduInstitution\"\r\n            />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n              name=\"newEduDegreeType\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n              name=\"newEduStartDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input\r\n              type=\"month\"\r\n              class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n              name=\"newEduEndDate\"\r\n            />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\"\r\n              title=\"Edit\"\r\n            >\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n              (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\"\r\n            >\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\"\r\n                name=\"eduDegree{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\"\r\n                name=\"eduInstitution{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\"\r\n                name=\"eduDegreeType{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input\r\n                type=\"text\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\"\r\n                name=\"eduCity{{ ei }}\"\r\n              />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\"\r\n                name=\"eduStartDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input\r\n                type=\"month\"\r\n                class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\"\r\n                name=\"eduEndDate{{ ei }}\"\r\n              />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" (click)=\"saveEducation()\">Save</button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0\" class=\"text-muted small\">No education added.</div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button\r\n      class=\"btn btn-primary px-5 shadow\"\r\n      [disabled]=\"!canConfirmAndContinue()\"\r\n      [title]=\"canConfirmAndContinue() ? '' : 'Please fill all required fields in all mandatory sections.'\"\r\n      (click)=\"saveResumedetails()\"\r\n    >\r\n      Confirm All & Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showPopup\" >\r\n  <div class=\"status-modal-card\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"status-modal-header\">\r\n      <h3 class=\"mb-1\">Saving Resume Details</h3>\r\n      <p class=\"text-muted mb-0\">Please wait while we process each section.</p>\r\n    </div>\r\n\r\n    <div class=\"status-modal-body\">\r\n      <div class=\"status-modal-row\" *ngFor=\"let item of statusList\">\r\n        <div class=\"status-modal-name\">{{ item.name }}</div>\r\n\r\n        <div class=\"status-modal-state pending\" *ngIf=\"item.status === 'pending'\">\r\n          <span class=\"spinner-border spinner-border-sm me-2\"></span> In progress\r\n        </div>\r\n\r\n        <div class=\"status-modal-state success\" *ngIf=\"item.status === 'success'\">\r\n          <span class=\"me-1\">\u2713</span> Saved\r\n        </div>\r\n\r\n        <div class=\"status-modal-state partial\" *ngIf=\"item.status === 'partial'\">\r\n          <span class=\"me-1\">!</span> {{ item.successCount }} Success / {{ item.failCount }} Failed\r\n        </div>\r\n\r\n        <div class=\"status-modal-state error\" *ngIf=\"item.status === 'error'\">\r\n          <span class=\"me-1\">\u2716</span> {{ item.error || 'Failed' }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <div class=\"status-modal-footer\">\r\n      <!-- <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"closeSavePopup()\">Back to Preview</button> -->\r\n      <div class=\"d-flex justify-content-end\">\r\n        <button\r\n        [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          *ngIf=\"allSaveStepsSucceeded()\"\r\n          type=\"button\"\r\n          class=\"btn btn-primary\"\r\n          (click)=\"goToDashboard()\"\r\n        >\r\n          Go to Dashboard\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">Your data might be lost if you go back now.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\n"] }]
+            args: [{ selector: 'app-preview', standalone: false, template: "<div class=\"preview-page-header\">\r\n  <h2 class=\"preview-title\">Confirm based on your resume</h2>\r\n  <p class=\"preview-subtitle\">Please confirm everything is accurate. It is based on your resume</p>\r\n</div>\r\n\r\n\r\n<div class=\"container py-4\">\r\n  <div class=\"section mb-5\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-4\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div>\r\n              <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n                <h2 class=\"fw-bold mb-1\">{{ data.firstName }} {{ data.lastName }}</h2>\r\n                <span *ngIf=\"basicSectionHasIssues()\" class=\"badge bg-warning-subtle text-warning border section-flag\">\r\n                  Missing info\r\n                </span>\r\n                <span class=\"badge border section-flag\"\r\n                  [ngClass]=\"basicDetailsSaved ? 'bg-success-subtle text-success' : 'bg-warning-subtle text-warning'\">\r\n                  {{ basicDetailsSaved ? 'Saved' : 'Not saved yet' }}\r\n                </span>\r\n              </div>\r\n              <p class=\"text-muted\">{{ data.jobTitle }} \u2022 {{ data.yearsOfExperience }} Years Exp.</p>\r\n              <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">ID: Verified</span>\r\n          </div>\r\n\r\n          <div class=\"row g-4\">\r\n            <div class=\"col-12 border-bottom pb-2\">\r\n              <h6 class=\"text-uppercase small fw-bold text-muted\">Summary</h6>\r\n              <p class=\"text-secondary small mb-0\">{{ data.summary }}</p>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">EMAIL</label>\r\n              <span class=\"fw-bold small\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">PHONE</label>\r\n              <span class=\"fw-bold small\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">LOCATION</label>\r\n              <span class=\"small\">{{ data.address }},{{ data.city }},{{ data.state }},{{ data.zipCode }}, {{\r\n                data.country }}</span>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"card-footer bg-light d-flex align-items-center justify-content-between\">\r\n          <span *ngIf=\"!basicDetailsSaved\" class=\"small text-warning fw-semibold\">\r\n            <i class=\"bi bi-exclamation-circle me-1\"></i> Click \"Edit Details\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <i class=\"bi bi-check-circle me-1\"></i> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit Details</button>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card shadow-sm border-0\" *ngIf=\"isEditMode()\">\r\n        <div class=\"card-header bg-white fw-bold\">Update Profile</div>\r\n        <div class=\"card-body p-4\">\r\n          <form class=\"row g-3\" #basicForm=\"ngForm\" novalidate>\r\n            <div *ngIf=\"basicIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ basicIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">First Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.firstName\" name=\"fName\"\r\n                placeholder=\"First Name\" required #fName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"fName.invalid && (fName.dirty || fName.touched)\">First name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Last Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.lastName\" name=\"lName\"\r\n                placeholder=\"Last Name\" required #lName=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"lName.invalid && (lName.dirty || lName.touched)\">Last name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">Summary</label>\r\n              <textarea class=\"form-control\" rows=\"3\" [(ngModel)]=\"tempProfile.summary\" name=\"sum\"\r\n                placeholder=\"Summary\"></textarea>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Email <span class=\"text-danger\">*</span></label>\r\n              <input type=\"email\" class=\"form-control\" [(ngModel)]=\"tempProfile.email\" name=\"email\" placeholder=\"Email\"\r\n                required email #email=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"email.invalid && (email.dirty || email.touched)\">\r\n                <span *ngIf=\"email.errors?.['required']\">Email is required</span>\r\n                <span *ngIf=\"email.errors?.['email']\">Email format is invalid</span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Phone Number <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.phone\"\r\n                (ngModelChange)=\"tempProfile.phone = sanitizePhone($event)\" name=\"phone\" placeholder=\"Phone (10 digits)\"\r\n                required pattern=\"^\\d{10}$\" maxlength=\"10\" inputmode=\"numeric\" #phone=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"phone.invalid && (phone.dirty || phone.touched)\">\r\n                <span *ngIf=\"phone.errors?.['required']\">Phone number is required</span>\r\n                <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-3\">\r\n              <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.address\" name=\"address\"\r\n                placeholder=\"Home Address\" required #address=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"address.invalid && (address.dirty || address.touched)\">Home\r\n                address is required</div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">City <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.city\" name=\"city\" placeholder=\"City\"\r\n                required #city=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"city.invalid && (city.dirty || city.touched)\">City is required\r\n              </div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.state\" name=\"state\" placeholder=\"State\"\r\n                required #state=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"state.invalid && (state.dirty || state.touched)\">State is\r\n                required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Zip Code <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [ngModel]=\"tempProfile.zipCode\"\r\n                (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\" name=\"zipCode\" placeholder=\"Zip Code\"\r\n                required pattern=\"^\\d{1,6}$\" maxlength=\"6\" inputmode=\"numeric\" #zipCode=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"zipCode.invalid && (zipCode.dirty || zipCode.touched)\">Zip code\r\n                is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"zipCode.errors?.['pattern'] && (zipCode.dirty || zipCode.touched)\">\r\n                Zip code must be up to 6 digits\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-2\">\r\n              <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.country\" name=\"country\"\r\n                placeholder=\"Country\" required #country=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"country.invalid && (country.dirty || country.touched)\">Country\r\n                is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Job Title <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"jobTitle\"\r\n                placeholder=\"Job Title\" required #jobTitle=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"jobTitle.invalid && (jobTitle.dirty || jobTitle.touched)\">Job\r\n                title is required</div>\r\n            </div>\r\n\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n              <input type=\"number\" class=\"form-control\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                name=\"yearsOfExperience\" placeholder=\"Years of Experience\" required min=\"0\"\r\n                #yearsOfExperience=\"ngModel\">\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"yearsOfExperience.invalid && (yearsOfExperience.dirty || yearsOfExperience.touched)\">\r\n                Years of experience is required\r\n              </div>\r\n            </div>\r\n\r\n\r\n          </form>\r\n        </div>\r\n        <div class=\"card-footer bg-light text-end gap-2 d-flex justify-content-end\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancel()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingBasic\" (click)=\"save()\">\r\n            <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingBasic ? 'Saving...' : 'Save Changes' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"workSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ workSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add work experience\" (click)=\"addJob()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">No work experience added</div>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n              (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"newJobTitle\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n              (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"newCompany\" />\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n              (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"newCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.startDate\"\r\n              (ngModelChange)=\"patchTempJob({ startDate: $event })\" name=\"newStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"tempJob()?.endDate\" (ngModelChange)=\"patchTempJob({ endDate: $event })\" name=\"newEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">End date is\r\n              required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-4 d-flex align-items-end\">\r\n            <div class=\"form-check\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"newIsCurrent\" id=\"newIsCurrent\" />\r\n              <label class=\"form-check-label\" for=\"newIsCurrent\">Current</label>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n            <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n              (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"newResponsibilities\"></textarea>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onWorkExperienceFileSelected($event)\" name=\"newWorkAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n              <span>{{ tempJob()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"card-footer bg-light text-end mt-3\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-3\">\r\n\r\n        <div class=\"d-flex justify-content-between align-items-center\">\r\n          <div class=\"d-flex align-items-center cursor-pointer flex-grow-1\" (click)=\"toggleJob(i)\">\r\n            <i class=\"bi bi-briefcase text-primary me-3 fs-4\"></i>\r\n            <div>\r\n              <h6 class=\"mb-0 fw-bold\">{{ job.jobTitle }}</h6>\r\n              <span class=\"badge border mt-1\"\r\n                [ngClass]=\"hasUnsavedWorkItem(i) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                {{ hasUnsavedWorkItem(i) ? 'Not saved yet' : 'Saved' }}\r\n              </span>\r\n              <small class=\"text-muted\">\r\n                {{ job.company }} \u2022 {{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n                formatMonthYear(job.endDate) }}\r\n              </small>\r\n              <div *ngIf=\"editingJobIndex() !== i && (workIssuesByIndex()[i] || []).length > 0\"\r\n                class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"d-flex align-items-center gap-2\">\r\n\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\" (click)=\"startEditJob(i)\"\r\n              title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteJob(i);\"\r\n              title=\"Delete\">\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n\r\n\r\n            <!-- <button\r\n              type=\"button\"\r\n              class=\"btn btn-sm btn-light p-0\"\r\n              style=\"width: 34px; height: 34px;\"\r\n              (click)=\"toggleJob(i)\"\r\n              title=\"Expand\"\r\n            >\r\n              <i class=\"bi cursor-pointer\" [ngClass]=\"expandedIndex() === i ? 'bi-chevron-up' : 'bi-chevron-down'\"></i>\r\n            </button> -->\r\n          </div>\r\n        </div>\r\n\r\n\r\n\r\n        <div class=\"mt-3 bg-light p-3 rounded small\" *ngIf=\"expandedIndex() === i\">\r\n          <ng-container *ngIf=\"editingJobIndex() !== i; else editJobForm\">\r\n            <ul class=\"mb-0\">\r\n              <li *ngFor=\"let res of job.responsibilities\">{{ res }}</li>\r\n            </ul>\r\n          </ng-container>\r\n\r\n          <ng-template #editJobForm>\r\n            <div *ngIf=\"(workIssuesByIndex()[i] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ (workIssuesByIndex()[i] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n            <form class=\"row g-2\">\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">JOB TITLE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.jobTitle\"\r\n                  (ngModelChange)=\"patchTempJob({ jobTitle: $event })\" name=\"jobTitle{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.jobTitle)\">Job title is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-6\">\r\n                <label class=\"small text-muted d-block\">COMPANY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.company\"\r\n                  (ngModelChange)=\"patchTempJob({ company: $event })\" name=\"company{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.company)\">Company name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">CITY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.city\"\r\n                  (ngModelChange)=\"patchTempJob({ city: $event })\" name=\"city{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.city)\">City is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.startDate\"\r\n                  (ngModelChange)=\"patchTempJob({ startDate: $event })\" name=\"startDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.startDate)\">Start date is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"month\" class=\"form-control form-control-sm\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"tempJob()?.endDate\" (ngModelChange)=\"patchTempJob({ endDate: $event })\"\r\n                  name=\"endDate{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"!tempJob()?.isCurrent && isBlank(tempJob()?.endDate)\">\r\n                  End date is required\r\n                </div>\r\n                <div class=\"small text-danger mt-1\"\r\n                  *ngIf=\"!tempJob()?.isCurrent && isMonthRangeInvalid(tempJob()?.startDate, tempJob()?.endDate)\">\r\n                  Start date must be less than end date\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4 d-flex align-items-end\">\r\n                <div class=\"form-check\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"tempJob()?.isCurrent\"\r\n                    (ngModelChange)=\"setTempJobIsCurrent($event)\" name=\"isCurrent{{ i }}\" id=\"isCurrent{{ i }}\" />\r\n                  <label class=\"form-check-label\" for=\"isCurrent{{ i }}\">Current</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">RESPONSIBILITIES (one per line)</label>\r\n                <textarea rows=\"4\" class=\"form-control form-control-sm\"\r\n                  [ngModel]=\"(tempJob()?.responsibilities || []).join('\\n')\"\r\n                  (ngModelChange)=\"updateTempResponsibilities($event)\" name=\"responsibilities{{ i }}\"></textarea>\r\n              </div>\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n                <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                  (change)=\"onWorkExperienceFileSelected($event)\" name=\"workAttachment{{ i }}\" />\r\n                <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempJob()?.fileName\">\r\n                  <span>{{ tempJob()?.fileName }}</span>\r\n                  <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                    (click)=\"previewSelectedFile(tempJob())\">Preview</button>\r\n                </div>\r\n              </div>\r\n            </form>\r\n          </ng-template>\r\n        </div>\r\n\r\n        <div class=\"card-footer bg-light text-end\" *ngIf=\"editingJobIndex() === i\">\r\n          <button class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditJob(); $event.stopPropagation()\">Cancel</button>\r\n          <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingWork\"\r\n            (click)=\"saveEditJob(); $event.stopPropagation()\">\r\n            <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingWork ? 'Uploading...' : workActionLabel(editingJobIndex()) }}\r\n          </button>\r\n        </div>\r\n\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"certificationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ certificationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add certification\" (click)=\"addCertification()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">No certification added</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n              (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"newCertName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n              [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\" name=\"newCertOrg\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"newCertState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Credential ID</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\" name=\"newCertCredentialId\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\" name=\"newCertIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\" name=\"newCertExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onCertificationFileSelected($event)\" name=\"newCertAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n              <span>{{ tempCertification()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditCertification()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n            (click)=\"saveCertificationEditor()\">\r\n            <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let cert of certs(); let ci = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingCertificationIndex() !== ci; else editCert\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ cert.name }}</div>\r\n              <span class=\"badge border mt-1\"\r\n                [ngClass]=\"hasUnsavedCertificationItem(ci) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                {{ hasUnsavedCertificationItem(ci) ? 'Not saved yet' : 'Saved' }}\r\n              </span>\r\n              <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ cert.issuingOrganization || '\u2014' }}\r\n                <span *ngIf=\"cert.state\"> \u2022 {{ cert.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditCertification(ci)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\"\r\n                (click)=\"deleteCertification(ci)\" title=\"Delete\">\r\n                <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editCert>\r\n          <div *ngIf=\"(certIssuesByIndex()[ci] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (certIssuesByIndex()[ci] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.name\"\r\n                (ngModelChange)=\"patchTempCertification({ name: $event })\" name=\"certName{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempCertification()?.name)\">Certificate name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Organization</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.issuingOrganization || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issuingOrganization: $event || null })\"\r\n                name=\"certOrg{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.state || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ state: $event || null })\" name=\"certState{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Credential ID</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\"\r\n                [ngModel]=\"tempCertification()?.credentialId || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ credentialId: $event || null })\"\r\n                name=\"certCredentialId{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ issueDate: $event || null })\" name=\"certIssue{{ ci }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempCertification()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempCertification({ expiryDate: $event || null })\" name=\"certExpiry{{ ci }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"isMonthRangeInvalid(tempCertification()?.issueDate || null, tempCertification()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">CERTIFICATION FILE</label>\r\n              <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onCertificationFileSelected($event)\" name=\"certAttachment{{ ci }}\" />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempCertification()?.fileName\">\r\n                <span>{{ tempCertification()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempCertification())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditCertification()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCertification\"\r\n              (click)=\"saveCertificationEditor()\">\r\n              <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingCertification ? 'Uploading...' : certificationActionLabel(editingCertificationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"licenseSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ licenseSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add license\" (click)=\"addLicense()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"alert alert-warning py-2 px-3 mb-3\">\r\n      <div class=\"fw-semibold\">No license added</div>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n              (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"newLicName\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"newLicAuthority\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License Number</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"newLicNumber\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"newLicState\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Issue Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\" name=\"newLicIssueDate\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Expiry Date</label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n              (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\" name=\"newLicExpiryDate\" />\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n              Issued date must be less than expiry date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onLicenseFileSelected($event)\" name=\"newLicenseAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n              <span>{{ tempLicense()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditLicense()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n            (click)=\"saveLicenseEditor()\">\r\n            <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let lic of licenses(); let li = index\" class=\"list-group-item py-3\">\r\n        <ng-container *ngIf=\"editingLicenseIndex() !== li; else editLic\">\r\n          <div class=\"d-flex justify-content-between align-items-start gap-3\">\r\n            <div>\r\n              <div class=\"fw-semibold\">{{ lic.name }}</div>\r\n              <span class=\"badge border mt-1\"\r\n                [ngClass]=\"hasUnsavedLicenseItem(li) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n                {{ hasUnsavedLicenseItem(li) ? 'Not saved yet' : 'Saved' }}\r\n              </span>\r\n              <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n                <div class=\"fw-semibold small\">Missing required fields</div>\r\n                <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                {{ lic.issuingAuthority || '\u2014' }}\r\n                <span *ngIf=\"lic.state\"> \u2022 {{ lic.state }}</span>\r\n              </div>\r\n              <div class=\"small text-muted\">\r\n                Issue: {{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }}\r\n                <span class=\"mx-1\">|</span>\r\n                Expiry: {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}\r\n              </div>\r\n            </div>\r\n            <div class=\"d-flex align-items-center gap-2\">\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n                (click)=\"startEditLicense(li)\" title=\"Edit\">\r\n                <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n              </button>\r\n\r\n              <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteLicense(li)\"\r\n                title=\"Delete\">\r\n                <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n              </button>\r\n\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n\r\n        <ng-template #editLic>\r\n          <div *ngIf=\"(licenseIssuesByIndex()[li] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (licenseIssuesByIndex()[li] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Name <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.name\"\r\n                (ngModelChange)=\"patchTempLicense({ name: $event })\" name=\"licName{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempLicense()?.name)\">License name is required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issuing Authority</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issuingAuthority || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issuingAuthority: $event || null })\" name=\"licAuthority{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">License Number</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.licenseNumber || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ licenseNumber: $event || null })\" name=\"licNumber{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">State</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.state || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ state: $event || null })\" name=\"licState{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Issue Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.issueDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ issueDate: $event || null })\" name=\"licIssue{{ li }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">Expiry Date</label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempLicense()?.expiryDate || ''\"\r\n                (ngModelChange)=\"patchTempLicense({ expiryDate: $event || null })\" name=\"licExpiry{{ li }}\" />\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"isMonthRangeInvalid(tempLicense()?.issueDate || null, tempLicense()?.expiryDate || null)\">\r\n                Issued date must be less than expiry date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">LICENSE FILE</label>\r\n              <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onLicenseFileSelected($event)\" name=\"licenseAttachment{{ li }}\" />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempLicense()?.fileName\">\r\n                <span>{{ tempLicense()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempLicense())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n              (click)=\"cancelEditLicense()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingLicense\"\r\n              (click)=\"saveLicenseEditor()\">\r\n              <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingLicense ? 'Uploading...' : licenseActionLabel(editingLicenseIndex()) }}\r\n            </button>\r\n          </div>\r\n        </ng-template>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n      <div class=\"d-flex align-items-center gap-2\">\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\"\r\n          class=\"badge border section-flag\"\r\n          [ngClass]=\"toolsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n          {{ toolsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n        </span>\r\n      </div>\r\n      <button type=\"button\"\r\n        class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n        style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add tool\" (click)=\"addTool()\">\r\n        <span class=\"fw-bold fs-5\">+</span>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n      <div *ngFor=\"let tool of tools(); let ti = index\" class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n          (click)=\"openToolEditor(ti)\" title=\"Edit\">\r\n          <span class=\"fw-normal text-dark\">{{ tool }}</span>\r\n          <span class=\"badge border ms-1\"\r\n            [ngClass]=\"hasUnsavedToolItem(ti) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ hasUnsavedToolItem(ti) ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n          <span *ngIf=\"(toolIssuesByIndex()[ti] || []).length > 0\"\r\n            class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n            Missing info\r\n          </span>\r\n          <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n        </button>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete tool\" (click)=\"deleteTool(ti)\">\r\n          <span class=\"fw-bold\">\u00D7</span>\r\n        </button>\r\n      </div>\r\n\r\n      <span *ngIf=\"tools().length === 0\" class=\"text-muted small\">No tools added.</span>\r\n    </div>\r\n\r\n    <!-- Tool edit panel (overlay) -->\r\n    <div *ngIf=\"isToolEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n      style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeToolEditor()\">\r\n      <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n        (click)=\"$event.stopPropagation()\">\r\n        <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n          <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n            <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeToolEditor()\">\r\n              <i class=\"bi bi-arrow-left fs-5\"></i>\r\n            </button>\r\n            <div class=\"fw-bold\">{{ isAddingTool() ? 'Add Tool' : ('Edit ' + (toolForm()?.name || '') + ' Tool') }}\r\n            </div>\r\n          </div>\r\n          <div class=\"card-body p-4\">\r\n            <div *ngIf=\"toolFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n              <div class=\"fw-semibold\">Missing required fields</div>\r\n              <div class=\"small\">{{ toolFormIssues().join(' \u2022 ') }}</div>\r\n            </div>\r\n            <div class=\"row g-3\">\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Tool Name <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control\" [ngModel]=\"toolForm()?.name\"\r\n                  (ngModelChange)=\"patchToolForm({ name: $event })\" name=\"toolName\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(toolForm()?.name)\">Tool name is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n                    class=\"text-danger\">*</span></label>\r\n                <div class=\"d-flex align-items-center gap-2\">\r\n                  <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                    (click)=\"setTempToolStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                    <span [class]=\"(toolForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                      {{ (toolForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                    </span>\r\n                  </button>\r\n                  <span class=\"small text-muted\">{{ toolForm()?.stars || 0 }}/5</span>\r\n                </div>\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"(toolForm()?.stars || 0) <= 0\">Star rating is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                <input type=\"number\" class=\"form-control\" [ngModel]=\"toolForm()?.year\"\r\n                  (ngModelChange)=\"patchToolForm({ year: $event === '' ? null : +$event })\" name=\"toolYear\" min=\"1\"\r\n                  max=\"30\" placeholder=\"Years of Experience\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"toolForm()?.year === null || toolForm()?.year === undefined\">\r\n                  Years of experience is required</div>\r\n              </div>\r\n\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-check form-switch mt-2\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\"\r\n                    id=\"toolVisible\" />\r\n                  <label class=\"form-check-label\" for=\"toolVisible\">Visible</label>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"col-12\">\r\n                <label class=\"small text-muted d-block\">Comment</label>\r\n                <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"toolForm()?.notes\"\r\n                  (ngModelChange)=\"patchToolForm({ notes: $event })\" name=\"toolNotes\"\r\n                  placeholder=\"Comment your tool here...\"></textarea>\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n            <button *ngIf=\"!isAddingTool() && editingToolIndex() !== null\" type=\"button\"\r\n              class=\"btn btn-link text-danger me-auto\" (click)=\"deleteTool(editingToolIndex()!)\">\r\n              Delete\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeToolEditor()\">Cancel</button>\r\n            <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingTool\" (click)=\"saveToolEditor()\">\r\n              <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingTool ? 'Saving...' : toolActionLabel(editingToolIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\"\r\n            class=\"badge border section-flag\"\r\n            [ngClass]=\"skillsSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ skillsSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add skill\" (click)=\"addSkill()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"d-flex flex-wrap gap-2 p-3 bg-white border rounded shadow-sm\">\r\n        <div *ngFor=\"let skill of skills(); let si = index\" class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\"\r\n            class=\"btn btn-light border rounded-pill d-inline-flex align-items-center gap-2 px-3 py-2\"\r\n            (click)=\"openSkillEditor(si)\" title=\"Edit\">\r\n            <span class=\"fw-normal text-dark\">{{ skill }}</span>\r\n            <span class=\"badge border ms-1\"\r\n              [ngClass]=\"hasUnsavedSkillItem(si) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedSkillItem(si) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <span *ngIf=\"(skillIssuesByIndex()[si] || []).length > 0\"\r\n              class=\"badge bg-warning-subtle text-warning border ms-1\">\r\n              Missing info\r\n            </span>\r\n            <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n          </button>\r\n\r\n          <button type=\"button\"\r\n            class=\"btn btn-sm btn-outline-danger rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n            style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Delete skill\"\r\n            (click)=\"deleteSkill(si); $event.stopPropagation()\">\r\n            <span class=\"fw-bold\">\u00D7</span>\r\n          </button>\r\n        </div>\r\n\r\n        <span *ngIf=\"skills().length === 0\" class=\"text-muted small\">No skills added.</span>\r\n      </div>\r\n      <!-- Skill edit panel (overlay) -->\r\n      <div *ngIf=\"isSkillEditorOpen()\" class=\"position-fixed top-0 start-0 w-100 h-100\"\r\n        style=\"background: rgba(0,0,0,0.35); z-index: 2000;\" (click)=\"closeSkillEditor()\">\r\n        <div class=\"container h-100 d-flex align-items-start justify-content-center pt-4\"\r\n          (click)=\"$event.stopPropagation()\">\r\n          <div class=\"card shadow border-0 w-100\" style=\"max-width: 900px;\">\r\n            <div class=\"card-header bg-white d-flex align-items-center gap-3\">\r\n              <button type=\"button\" class=\"btn btn-link p-0 text-decoration-none\" (click)=\"closeSkillEditor()\">\r\n                <i class=\"bi bi-arrow-left fs-5\"></i>\r\n              </button>\r\n              <div class=\"fw-bold\">{{ isAddingSkill() ? 'Add Skill' : ('Edit ' + (skillForm()?.name || '') + ' Skill')\r\n                }}</div>\r\n            </div>\r\n            <div class=\"card-body p-4\">\r\n              <div *ngIf=\"skillFormIssues().length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n                <div class=\"fw-semibold\">Missing required fields</div>\r\n                <div class=\"small\">{{ skillFormIssues().join(' \u2022 ') }}</div>\r\n              </div>\r\n              <div class=\"row g-3\">\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Skills Name <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"text\" class=\"form-control\" [ngModel]=\"skillForm()?.name\"\r\n                    (ngModelChange)=\"patchSkillForm({ name: $event })\" name=\"skillName\" />\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(skillForm()?.name)\">Skillset name is required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block mb-1\">Self-ability Rating <span\r\n                      class=\"text-danger\">*</span></label>\r\n                  <div class=\"d-flex align-items-center gap-2\">\r\n                    <button *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n                      (click)=\"setTempSkillStars(s)\" [attr.aria-label]=\"'Set rating ' + s\">\r\n                      <span [class]=\"(skillForm()?.stars || 0) >= s ? 'text-warning fs-5' : 'text-muted fs-5'\">\r\n                        {{ (skillForm()?.stars || 0) >= s ? '\u2605' : '\u2606' }}\r\n                      </span>\r\n                    </button>\r\n                    <span class=\"small text-muted\">{{ skillForm()?.stars || 0 }}/5</span>\r\n                  </div>\r\n                  <div class=\"small text-danger mt-1\" *ngIf=\"(skillForm()?.stars || 0) <= 0\">Star rating is required\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n                  <input type=\"number\" class=\"form-control\" [ngModel]=\"skillForm()?.year\"\r\n                    (ngModelChange)=\"patchSkillForm({ year: $event === '' ? null : +$event })\" name=\"skillYear\" min=\"1\"\r\n                    max=\"30\" placeholder=\"Years of Experience\" />\r\n                  <div class=\"small text-danger mt-1\"\r\n                    *ngIf=\"skillForm()?.year === null || skillForm()?.year === undefined\">Years of experience is\r\n                    required</div>\r\n                </div>\r\n\r\n                <div class=\"col-md-4\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-check form-switch mt-2\">\r\n                    <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"skillForm()?.profileVisibility\"\r\n                      (ngModelChange)=\"patchSkillForm({ profileVisibility: $event })\" name=\"skillVisible\"\r\n                      id=\"skillVisible\" />\r\n                    <label class=\"form-check-label\" for=\"skillVisible\">Visible</label>\r\n                  </div>\r\n                </div>\r\n\r\n                <div class=\"col-12\">\r\n                  <label class=\"small text-muted d-block\">Comment</label>\r\n                  <textarea rows=\"4\" class=\"form-control\" [ngModel]=\"skillForm()?.notes\"\r\n                    (ngModelChange)=\"patchSkillForm({ notes: $event })\" name=\"skillNotes\"\r\n                    placeholder=\"Comment your skill here...\"></textarea>\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"card-footer bg-white d-flex justify-content-end gap-2\">\r\n              <button *ngIf=\"!isAddingSkill() && editingSkillIndex() !== null\" type=\"button\"\r\n                class=\"btn btn-link text-danger me-auto\" (click)=\"deleteSkill(editingSkillIndex()!)\">\r\n                Delete\r\n              </button>\r\n              <button type=\"button\" class=\"btn btn-link text-secondary\" (click)=\"closeSkillEditor()\">Cancel</button>\r\n              <button type=\"button\" class=\"btn btn-primary px-4\" [disabled]=\"isSavingSkill\" (click)=\"saveSkillEditor()\">\r\n                <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n                {{ isSavingSkill ? 'Saving...' : skillActionLabel(editingSkillIndex()) }}\r\n              </button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <div class=\"row g-4 mb-5\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"d-flex justify-content-between align-items-center mb-3\">\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\"\r\n            class=\"badge border section-flag\"\r\n            [ngClass]=\"educationSectionHasUnsavedItems() ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n            {{ educationSectionHasUnsavedItems() ? 'Not saved yet' : 'Saved' }}\r\n          </span>\r\n        </div>\r\n        <button type=\"button\"\r\n          class=\"btn btn-sm btn-outline-primary rounded-circle d-inline-flex align-items-center justify-content-center\"\r\n          style=\"width: 32px; height: 32px; line-height: 1;\" title=\"Add education\" (click)=\"addEducation()\">\r\n          <span class=\"fw-bold fs-5\">+</span>\r\n        </button>\r\n      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"alert alert-warning py-2 px-3 mb-3\">\r\n        <div class=\"fw-semibold\">No education added</div>\r\n        <!-- <div class=\"small\">Add at least one education.</div> -->\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n              (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"newEduDegree\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n              (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"newEduInstitution\" />\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n              required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.startDate\"\r\n              (ngModelChange)=\"patchTempEducation({ startDate: $event })\" name=\"newEduStartDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.endDate\"\r\n              (ngModelChange)=\"patchTempEducation({ endDate: $event })\" name=\"newEduEndDate\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n            <div class=\"small text-danger mt-1\"\r\n              *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n              Start date must be less than end date\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n            <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n              (change)=\"onEducationFileSelected($event)\" name=\"newEducationAttachment\" />\r\n            <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n              <span>{{ tempEducation()?.fileName }}</span>\r\n              <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n            </div>\r\n          </div>\r\n        </form>\r\n        <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n            (click)=\"cancelEditEducation()\">Cancel</button>\r\n          <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n            (click)=\"saveEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"p-3 bg-white border rounded shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div>\r\n            <h6 class=\"fw-bold mb-1\">{{ edu.degree }}</h6>\r\n            <span class=\"badge border mt-1\"\r\n              [ngClass]=\"hasUnsavedEducationItem(ei) ? 'bg-warning-subtle text-warning' : 'bg-success-subtle text-success'\">\r\n              {{ hasUnsavedEducationItem(ei) ? 'Not saved yet' : 'Saved' }}\r\n            </span>\r\n            <p class=\"small text-primary mb-0\">{{ edu.institution }}</p>\r\n            <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-1 px-2 mt-2\">\r\n              <div class=\"fw-semibold small\">Missing required fields</div>\r\n              <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex align-items-center gap-2\" *ngIf=\"editingEducationIndex() !== ei\">\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-primary action-icon-btn\"\r\n              (click)=\"startEditEducation(ei)\" title=\"Edit\">\r\n              <img class=\"action-icon-image edit-icon\" src=\"/assets/images/icons/edit-text.png\" alt=\"Edit\" />\r\n            </button>\r\n            <button type=\"button\" class=\"btn btn-sm btn-outline-danger action-icon-btn\" (click)=\"deleteEducation(ei)\"\r\n              title=\"Delete\">\r\n              <img class=\"action-icon-image delete-icon\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n          </div>\r\n        </div>\r\n\r\n        <div *ngIf=\"editingEducationIndex() === ei\" class=\"mt-3\">\r\n          <div *ngIf=\"(educationIssuesByIndex()[ei] || []).length > 0\" class=\"alert alert-warning py-2 px-3 mb-3\">\r\n            <div class=\"fw-semibold\">Missing required fields</div>\r\n            <div class=\"small\">{{ (educationIssuesByIndex()[ei] || []).join(' \u2022 ') }}</div>\r\n          </div>\r\n          <form class=\"row g-2\">\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degree\"\r\n                (ngModelChange)=\"patchTempEducation({ degree: $event })\" name=\"eduDegree{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degree)\">Degree / Course name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">INSTITUTION <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.institution\"\r\n                (ngModelChange)=\"patchTempEducation({ institution: $event })\" name=\"eduInstitution{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.institution)\">Institution name is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">DEGREE / COURSE TYPE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.degreeType)\">Degree / Course type is\r\n                required</div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">City</label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.startDate\"\r\n                (ngModelChange)=\"patchTempEducation({ startDate: $event })\" name=\"eduStartDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.startDate)\">Start date is required\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\">\r\n              <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"month\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.endDate\"\r\n                (ngModelChange)=\"patchTempEducation({ endDate: $event })\" name=\"eduEndDate{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.endDate)\">End date is required</div>\r\n              <div class=\"small text-danger mt-1\"\r\n                *ngIf=\"isMonthRangeInvalid(tempEducation()?.startDate, tempEducation()?.endDate)\">\r\n                Start date must be less than end date\r\n              </div>\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label class=\"small text-muted d-block\">EDUCATION FILE</label>\r\n              <input type=\"file\" accept=\".pdf,.doc,.docx,.jpg,.jpeg,.png\" class=\"form-control form-control-sm\"\r\n                (change)=\"onEducationFileSelected($event)\" name=\"educationAttachment{{ ei }}\" />\r\n              <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n                <span>{{ tempEducation()?.fileName }}</span>\r\n                <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n                  (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n              </div>\r\n            </div>\r\n          </form>\r\n\r\n          <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n            <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n            <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n              <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n              {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"d-flex gap-2 justify-content-center mt-5\">\r\n    <button class=\"btn btn-outline-secondary px-5\" (click)=\"onBackClick()\">Back</button>\r\n    <button class=\"btn btn-primary px-5 shadow\" [disabled]=\"!canConfirmAndContinue() || isSavingBasic\"\r\n      (click)=\"onGoToDashboardClick()\">\r\n      <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n      {{ isSavingBasic ? 'Saving...' : 'Go to Dashboard' }}\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<ng-template #loading>\r\n  <div class=\"text-center p-5\">\r\n    <div class=\"spinner-border text-primary\"></div>\r\n    <p class=\"text-muted mt-2\">Loading data...</p>\r\n  </div>\r\n</ng-template>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showBackConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">Leave this page?</h4>\r\n    <p class=\"text-muted mb-4\">If you go back, only saved data will be retained.</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger\" (click)=\"proceedBack()\">Proceed Back</button>\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<div class=\"modal-overlay\" *ngIf=\"showDashboardConfirmPopup\">\r\n  <div class=\"confirm-modal-card\">\r\n    <h4 class=\"mb-2\">You are redirecting to dashboard</h4>\r\n    <p class=\"text-muted mb-4\">Proceed to save initial setup completion and continue?</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary\" [disabled]=\"isSavingBasic\" (click)=\"goToDashboard()\">\r\n        <span *ngIf=\"isSavingBasic\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingBasic ? 'Proceeding...' : 'Proceed' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{max-width:900px;margin:30px auto;font-family:Arial,sans-serif;color:#333}.preview-page-header{max-width:900px;margin:50px auto 10px;padding:0 12px}.preview-title{font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:16px}.section{margin-bottom:25px}.section-title{font-weight:600;display:block;margin-bottom:8px}.section-title .sub{font-weight:400;color:#777;font-size:13px}.dropdown-box{border:1px solid #ddd;border-radius:8px;padding:12px 15px;display:flex;justify-content:space-between;align-items:center}.icons{display:flex;gap:10px}.icon{cursor:pointer;font-size:14px;color:#777}.card{border:1px solid #ddd;border-radius:10px;padding:20px;background:#fff}.category{border-bottom:1px solid #eee;padding:15px 0}.category:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;font-weight:600;margin-bottom:10px}.tags{display:flex;flex-wrap:wrap;gap:10px}.tag{background:#f2f4f7;padding:6px 12px;border-radius:6px;font-size:13px}.footer{text-align:center;margin-top:15px;color:#777;cursor:pointer}.actions{display:flex;justify-content:space-between;margin:50px 0 27px}.text-secondary{white-space:pre-line;font-size:.95rem}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px);box-shadow:0 .5rem 1rem #0000001a!important}.achievement-section .badge{font-size:.75rem;white-space:normal;text-align:left}.skill-tag .badge{font-weight:500;font-size:.9rem;transition:all .2s ease;cursor:default}.skill-tag .badge:hover{transform:translateY(-2px);box-shadow:0 4px 8px #0000001a}.skill-tag .btn-close{opacity:.5}.skill-tag .btn-close:hover{opacity:1}.bg-light.text-dark.border{background-color:#f8f9fa!important;border-color:#dee2e6!important}.card{transition:all .3s cubic-bezier(.25,.8,.25,1)}.card:hover{box-shadow:0 10px 20px #0000001a!important}.card:hover .bg-light{background-color:#e8f5e9!important}.position-fixed .card:hover{transform:none!important}code{background-color:#f8f9fa;padding:2px 6px;border-radius:4px}.list-group-item{transition:all .2s ease-in-out}.list-group-item:hover{background-color:#fcfcfc;transform:translate(5px);box-shadow:-5px 0 15px #0000000d}.border-dashed{border-style:dashed!important}.tool-card{transition:all .2s ease-in-out;border-radius:12px}.tool-card:hover{transform:translateY(-5px);border-color:var(--bs-primary)!important;box-shadow:0 10px 15px #0000001a!important}.tool-card:hover .icon-box{background-color:var(--bs-primary-subtle)!important}.tool-card .icon-box{width:60px;height:60px;transition:background-color .2s ease}.border-dashed{border:2px dashed #dee2e6!important}.border-dashed:hover{border-color:var(--bs-primary)!important;background-color:#fff!important}.popup{position:fixed;top:20%;right:20px;width:320px;background:#fff;border-radius:10px;padding:16px;box-shadow:0 4px 12px #0003}.status-row{display:flex;justify-content:space-between;margin:10px 0}.success{color:#2e7d32;font-weight:700}.error{color:#d32f2f}.pending{color:#f9a825}.section-flag{font-weight:600}button.btn.btn-sm.btn-outline-primary{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:10px}button.btn.btn-sm.btn-outline-primary:hover{background-color:#356895;border-color:#356895;color:#fff}button.btn.btn-sm.btn-outline-danger{border-color:#dc3545;color:#dc3545;border-radius:10px}button.btn.btn-sm.btn-outline-danger:hover{background-color:#bb2d3b;border-color:#bb2d3b;color:#fff}button.btn.btn-sm.btn-outline-primary.rounded-circle{background-color:#4077ad;border-color:#4077ad;color:#fff;border-radius:50%!important}button.action-icon-btn{min-width:22px;width:22px;height:22px;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:0!important;background:transparent!important;border:none!important;box-shadow:none!important;line-height:1}button.action-icon-btn.btn-outline-primary{color:#4077ad!important;border-color:#4077ad!important}button.action-icon-btn.btn-outline-danger{color:#dc3545!important}.action-icon-image{width:20px;height:20px;object-fit:contain;display:inline-block}.action-icon-image.edit-icon{filter:brightness(0) saturate(100%) invert(41%) sepia(39%) saturate(774%) hue-rotate(170deg) brightness(91%) contrast(89%)}.action-icon-image.delete-icon{filter:brightness(0) saturate(100%) invert(24%) sepia(79%) saturate(4008%) hue-rotate(344deg) brightness(91%) contrast(90%)}.modal-overlay{position:fixed;inset:0;background:#11182773;display:flex;align-items:center;justify-content:center;z-index:2500;padding:20px}.status-modal-card{width:min(760px,96vw);max-height:85vh;overflow:auto;background:#fff;border-radius:16px;box-shadow:0 20px 40px #0f172a40;border:1px solid #e5e7eb}.status-modal-header{padding:20px 24px 14px;border-bottom:1px solid #eef2f7}.status-modal-body{padding:12px 20px 20px}.status-modal-footer{padding:12px 20px 20px;border-top:1px solid #eef2f7;display:flex;justify-content:end;align-items:center;gap:12px}.status-modal-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 10px;border-bottom:1px solid #f1f5f9}.status-modal-row:last-child{border-bottom:0}.status-modal-name{font-weight:600;color:#1f2937}.status-modal-state{font-size:.92rem;font-weight:600}.status-modal-state.pending{color:#a16207}.status-modal-state.success{color:#166534}.status-modal-state.partial{color:#b45309}.status-modal-state.error{color:#b91c1c}.confirm-modal-card{width:min(520px,96vw);background:#fff;border-radius:14px;box-shadow:0 20px 35px #0f172a38;border:1px solid #e5e7eb;padding:24px}.year-experience-select{max-height:150px}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i6.TokenService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
@@ -30884,10 +31596,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                 type: Input
             }], roleData: [{
                 type: Input
-            }], cloudfrontUrl: [{
-                type: Input
             }], backToParent: [{
                 type: Output
+            }], cloudfrontUrl: [{
+                type: Input
             }] } });
 
 class CredentialingComponent {