@idsoftsource/initial-process 1.9.4 → 1.9.7

package/fesm2022/idsoftsource-initial-process.mjs

@@ -1779,7 +1779,7 @@ class UserSkillSetService {
     // Bulk Delete User Skill Set
     // --------------------------------
     bulkDelete(ids) {
-        return this.httpClient.post(`${this.baseUrl}/BulkDelete`, ids);
+        return this.httpClient.post(`FrontEndUser/UserSkillSetBulkDelete`, ids);
     }
     // --------------------------------
     // Get User Skill Set (Gridify)
@@ -1962,7 +1962,7 @@ class UserDocumentService {
           BULK DELETE USER DOCUMENT
     ============================== */
     bulkDelete(ids) {
-        return this.httpClient.post(`${this.baseUrl}/BulkDelete`, ids);
+        return this.httpClient.post(`FrontEndUser/UserDocumentBulkDelete`, ids);
     }
     buildParams(query) {
         let params = new HttpParams();
@@ -2023,7 +2023,7 @@ class UserEducationService {
           BULK DELETE USER EDUCATION
     ============================== */
     bulkDelete(ids) {
-        return this.httpClient.post(`${this.baseUrl}/BulkDelete`, ids);
+        return this.httpClient.post(`FrontEndMaster/UserEducationBulkDelete`, ids);
     }
     /* ==============================
           PARAM BUILDER
@@ -2085,7 +2085,7 @@ class UserExperienceService {
           BULK DELETE USER EXPERIENCE
     ============================== */
     bulkDelete(ids) {
-        return this.httpClient.post(`${this.baseUrl}/BulkDelete`, ids);
+        return this.httpClient.post(`FrontEndMaster/UserExperienceBulkDelete`, ids);
     }
     /* ==============================
           PARAM BUILDER
@@ -2848,6 +2848,9 @@ class PreviewComponent {
         const directId = res?.id ?? res?.value?.id ?? res?.data?.id ?? null;
         if (typeof directId === 'string' && directId.trim())
             return directId;
+        if (Array.isArray(res?.value) && typeof res.value[0] === 'string' && res.value[0].trim()) {
+            return res.value[0];
+        }
         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)
@@ -5465,14 +5468,14 @@ class PreviewComponent {
         }
     }
     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: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: ProvidersService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: true, selector: "app-preview", inputs: { providerId: "providerId", isResume: "isResume", resumeModel: "resumeModel", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", signatureFileId: "signatureFileId", signatureUrl: "signatureUrl" }, outputs: { backToParent: "backToParent" }, viewQueries: [{ propertyName: "companyForm", first: true, predicate: ["companyForm"], descendants: true }], ngImport: i0, template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <img src=\"/assets/images/icons/file-person.svg\" width=\"24\" height=\"24\" alt=\"\" />\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Company & Personal Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input type=\"file\" accept=\"image/*\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</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 form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeUser($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.address?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\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 form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6 position-relative\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                   placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n            <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n            <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer bg-light d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 rounded-pill\"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\"headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\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            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\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              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\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            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</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\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\d{10}$\" maxlength=\"14\" 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              </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  ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(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\" #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            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #editHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"headshotFile\" />\r\n              <input type=\"text\" class=\"form-control pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"editHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"editHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n              <label class=\"small text-muted d-block\">Preview</label>\r\n              <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" alt=\"Profile preview\" />\r\n            </div>\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  <div class=\"section mb-5 provider-company-first\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData\">\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        <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n        <span *ngIf=\"companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-success-subtle text-success\">\r\n          Saved\r\n        </span>\r\n        <span *ngIf=\"!companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          Not saved yet\r\n        </span>\r\n      </div>\r\n      <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n    </div>\r\n\r\n    <!-- Company Details Display Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-4\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address</label>\r\n            <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Company Details Edit Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"  \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\"  ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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 form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\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)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\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        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel 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\">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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('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-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              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\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=\"d-flex justify-content-end gap-2 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 rounded-pill\" [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      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\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            <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n              <img src=\"/assets/images/icons/briefcase-fill-blue.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n                <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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=\"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-6\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('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-6\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('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-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=\"d-flex justify-content-end gap-2 mt-3\" *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 rounded-pill\" [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      </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        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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 cert-accent-item\">\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\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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 lic-accent-item\">\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\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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    </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\"\r\n          class=\"btn btn-light border res-flex 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: 9999999;\" (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              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-checks form-switch mt-2\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n                    style=\"width: 55px;height: 25px;\" />\r\n                  <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </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 res-flex 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: 9999999;\" (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                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-checks 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\" style=\"width: 55px;height: 25px;\" />\r\n                    <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\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            <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\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-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div class=\"d-flex align-items-start gap-3\">\r\n            <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n              <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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>\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              <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\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-4\">\r\n              <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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><!-- end sections-locked -->\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n      <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Back\r\n    </button>\r\n    <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [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      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\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<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\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\">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 h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (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\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [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>\r\n", 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}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}.provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgxStarsModule }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: TextMaskModule }, { kind: "ngmodule", type: GooglePlaceModule }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: PreviewComponent, isStandalone: true, selector: "app-preview", inputs: { providerId: "providerId", isResume: "isResume", resumeModel: "resumeModel", providerName: "providerName", roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", signatureFileId: "signatureFileId", signatureUrl: "signatureUrl" }, outputs: { backToParent: "backToParent" }, viewQueries: [{ propertyName: "companyForm", first: true, predicate: ["companyForm"], descendants: true }], ngImport: i0, template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <img src=\"/assets/images/icons/file-person.svg\" width=\"24\" height=\"24\" alt=\"\" />\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Company & Personal Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input type=\"file\" accept=\"image/*\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</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 form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeUser($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.address?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\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 form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6 position-relative\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                   placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n            <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n            <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <img [src]=\"cloudfrontUrl + headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer bg-light d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 rounded-pill\"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\" cloudfrontUrl + headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\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            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\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              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\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            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</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\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\d{10}$\" maxlength=\"14\" 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              </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  ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(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\" #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            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #editHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"headshotFile\" />\r\n              <input type=\"text\" class=\"form-control pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"editHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"editHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n              <label class=\"small text-muted d-block\">Preview</label>\r\n              <img [src]=\" cloudfrontUrl + headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" alt=\"Profile preview\" />\r\n            </div>\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  <div class=\"section mb-5 provider-company-first\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData\">\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        <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n        <span *ngIf=\"companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-success-subtle text-success\">\r\n          Saved\r\n        </span>\r\n        <span *ngIf=\"!companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          Not saved yet\r\n        </span>\r\n      </div>\r\n      <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n    </div>\r\n\r\n    <!-- Company Details Display Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-4\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address</label>\r\n            <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Company Details Edit Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"  \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\"  ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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 form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\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)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\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        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel 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\">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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('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-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              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\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=\"d-flex justify-content-end gap-2 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 rounded-pill\" [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      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\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            <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n              <img src=\"/assets/images/icons/briefcase-fill-blue.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n                <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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=\"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-6\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('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-6\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('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-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=\"d-flex justify-content-end gap-2 mt-3\" *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 rounded-pill\" [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      </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        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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 cert-accent-item\">\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\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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 lic-accent-item\">\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\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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    </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\"\r\n          class=\"btn btn-light border res-flex 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: 9999999;\" (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              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-checks form-switch mt-2\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n                    style=\"width: 55px;height: 25px;\" />\r\n                  <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </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 res-flex 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: 9999999;\" (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                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-checks 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\" style=\"width: 55px;height: 25px;\" />\r\n                    <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\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            <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\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-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div class=\"d-flex align-items-start gap-3\">\r\n            <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n              <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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>\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              <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\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-4\">\r\n              <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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><!-- end sections-locked -->\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n      <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Back\r\n    </button>\r\n    <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [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      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\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<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\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\">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 h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (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\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [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>\r\n", 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}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#fff,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}.provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "ngmodule", type: ModalModule }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "ngmodule", type: NgxStarsModule }, { kind: "ngmodule", type: BsDatepickerModule }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "ngmodule", type: TextMaskModule }, { kind: "ngmodule", type: GooglePlaceModule }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-preview', standalone: true, imports: [
                         CommonModule, ModalModule, FormsModule, ReactiveFormsModule,
                         NgSelectModule, NgxStarsModule, BsDatepickerModule, TextMaskModule, GooglePlaceModule
-                    ], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <img src=\"/assets/images/icons/file-person.svg\" width=\"24\" height=\"24\" alt=\"\" />\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Company & Personal Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input type=\"file\" accept=\"image/*\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</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 form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeUser($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.address?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\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 form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6 position-relative\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                   placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n            <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n            <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer bg-light d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 rounded-pill\"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\"headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\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            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\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              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\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            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</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\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\d{10}$\" maxlength=\"14\" 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              </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  ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(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\" #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            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #editHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"headshotFile\" />\r\n              <input type=\"text\" class=\"form-control pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"editHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"editHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n              <label class=\"small text-muted d-block\">Preview</label>\r\n              <img [src]=\"headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" alt=\"Profile preview\" />\r\n            </div>\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  <div class=\"section mb-5 provider-company-first\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData\">\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        <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n        <span *ngIf=\"companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-success-subtle text-success\">\r\n          Saved\r\n        </span>\r\n        <span *ngIf=\"!companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          Not saved yet\r\n        </span>\r\n      </div>\r\n      <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n    </div>\r\n\r\n    <!-- Company Details Display Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-4\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address</label>\r\n            <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Company Details Edit Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"  \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\"  ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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 form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\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)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\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        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel 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\">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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('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-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              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\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=\"d-flex justify-content-end gap-2 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 rounded-pill\" [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      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\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            <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n              <img src=\"/assets/images/icons/briefcase-fill-blue.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n                <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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=\"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-6\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('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-6\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('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-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=\"d-flex justify-content-end gap-2 mt-3\" *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 rounded-pill\" [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      </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        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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 cert-accent-item\">\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\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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 lic-accent-item\">\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\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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    </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\"\r\n          class=\"btn btn-light border res-flex 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: 9999999;\" (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              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-checks form-switch mt-2\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n                    style=\"width: 55px;height: 25px;\" />\r\n                  <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </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 res-flex 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: 9999999;\" (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                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-checks 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\" style=\"width: 55px;height: 25px;\" />\r\n                    <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\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            <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\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-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div class=\"d-flex align-items-start gap-3\">\r\n            <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n              <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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>\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              <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\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-4\">\r\n              <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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><!-- end sections-locked -->\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n      <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Back\r\n    </button>\r\n    <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [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      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\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<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\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\">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 h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (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\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [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>\r\n", 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}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}.provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}\n"] }]
+                    ], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n  <div class=\"d-flex align-items-center gap-2 mb-1\">\r\n    <img src=\"/assets/images/icons/file-person.svg\" width=\"24\" height=\"24\" alt=\"\" />\r\n    <h2 class=\"preview-title mb-0\">Review Extracted Information</h2>\r\n  </div>\r\n  <p class=\"preview-subtitle text-muted\">We\u2019ve automatically extracted details from your uploaded resume. Please review and confirm accuracy before proceeding.</p>\r\n</div>\r\n\r\n\r\n<div [ngClass]=\"isResume ? '' : 'container py-4'\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- Provider initial setup: combined company + personal form (shown until both APIs succeed) -->\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\r\n    <div class=\"d-flex align-items-center gap-2 mb-3\">\r\n      <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n      <h5 class=\"fw-bold mb-0\">Company & Personal Details</h5>\r\n      <span class=\"badge border section-flag bg-warning-subtle text-warning\">Required to continue</span>\r\n    </div>\r\n    <div class=\"card shadow-sm border-0\">\r\n      <div class=\"card-header bg-white fw-semibold\">Company Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"setupCompanyName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">Company name is required</div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">{{ companyNameError }}</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'company')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"setupCompanyPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">Company phone is required</div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"setupCompanyAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">Address is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"setupCompanyCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"setupCompanyState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"setupCompanyZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">Zip code is required</div>\r\n          </div>\r\n          <div class=\"col-md-3\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"setupCompanyCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input type=\"file\" accept=\"image/*\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-header bg-white fw-semibold border-top\">Personal Information</div>\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-3\">\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.firstName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.firstName\" name=\"setupFirstName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.firstName?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.lastName?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.lastName\" name=\"setupLastName\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.lastName?.trim() && companyFormSubmitted\">Last name is required</div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.email?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.email\" name=\"setupEmail\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.email?.trim() && companyFormSubmitted\">Email is required</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 form-control-sm\" maxlength=\"14\" inputmode=\"numeric\"\r\n                   (input)=\"phoneMask($event, 'profile')\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.phone?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.phone\" name=\"setupPhone\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.phone?.trim() && companyFormSubmitted\">Phone number is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">Home Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" ngx-google-places-autocomplete [options]=\"options\" class=\"form-control form-control-sm\"\r\n                   (onAddressChange)=\"AddressChangeUser($event)\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.address?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.address\" name=\"setupAddress\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.address?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.city?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.city\" name=\"setupUserCity\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.city?.trim() && companyFormSubmitted\">City is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.state?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.state\" name=\"setupUserState\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.state?.trim() && companyFormSubmitted\">State is required</div>\r\n          </div>\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 form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.zipCode?.trim() && companyFormSubmitted}\"\r\n                   [ngModel]=\"tempProfile?.zipCode\" (ngModelChange)=\"tempProfile.zipCode = sanitizeZipCode($event)\"\r\n                   name=\"setupUserZip\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.zipCode?.trim() && companyFormSubmitted\">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 type=\"text\" class=\"form-control form-control-sm\"\r\n                   [ngClass]=\"{'is-invalid': !tempProfile?.country?.trim() && companyFormSubmitted}\"\r\n                   [(ngModel)]=\"tempProfile.country\" name=\"setupUserCountry\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempProfile?.country?.trim() && companyFormSubmitted\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Job Title</label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [(ngModel)]=\"tempProfile.jobTitle\" name=\"setupJobTitle\" />\r\n          </div>\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 form-control-sm\" [(ngModel)]=\"tempProfile.yearsOfExperience\"\r\n                   [ngClass]=\"{'is-invalid': !(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted}\"\r\n                   name=\"setupYearsOfExp\" min=\"1\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!(tempProfile?.yearsOfExperience > 0) && companyFormSubmitted\">Years of experience is required</div>\r\n          </div>\r\n          <div class=\"col-md-6 position-relative\">\r\n            <label class=\"small text-muted d-block\">Profile Picture</label>\r\n            <input #setupHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"setupHeadshotFile\" />\r\n            <input type=\"text\" class=\"form-control form-control-sm pe-5\" [value]=\"headshotFileName\" readonly\r\n                   placeholder=\"Upload Profile Picture\" (click)=\"setupHeadshotFile.click()\" />\r\n            <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"setupHeadshotFile.click()\" />\r\n            <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n            <label class=\"small text-muted d-block\">Preview</label>\r\n            <img [src]=\"cloudfrontUrl + headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"card-footer bg-light d-flex align-items-center justify-content-end gap-2\">\r\n        <span *ngIf=\"providerSetupError\" class=\"small text-danger me-auto\">{{ providerSetupError }}</span>\r\n        <button class=\"btn btn-success px-5 rounded-pill\"\r\n                [disabled]=\"isSavingProviderSetup || !isProviderSetupFormComplete\"\r\n                (click)=\"saveProviderSetup()\">\r\n          <span *ngIf=\"isSavingProviderSetup\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingProviderSetup ? 'Saving...' : 'Save & Continue' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"section mb-5\" *ngIf=\"roleData?.role?.name !== 'Provider' || hasUserDetailData\">\r\n    <div *ngIf=\"details() as data; else loading\">\r\n      <div class=\"card shadow-sm border-0 rounded-3 overflow-hidden\" *ngIf=\"!isEditMode()\">\r\n        <div class=\"card-body p-0\">\r\n          <div class=\"preview-card-gradient\">\r\n          <div class=\"d-flex justify-content-between align-items-start mb-4\">\r\n            <div class=\"d-flex align-items-start gap-3\">\r\n              <div class=\"profile-avatar-circle\" *ngIf=\"!headshotPreviewUrl\">\r\n                {{ (data.firstName?.[0] || '') }}{{ (data.lastName?.[0] || '') }}\r\n              </div>\r\n              <img *ngIf=\"headshotPreviewUrl\" [src]=\" cloudfrontUrl + headshotPreviewUrl\"\r\n                   class=\"rounded-circle\" style=\"width:56px;height:56px;object-fit:cover;\" alt=\"Profile\" />\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            </div>\r\n            <span class=\"badge bg-primary-subtle text-primary border p-2\">Email Verified</span>\r\n          </div>\r\n\r\n          </div>\r\n          <div class=\"px-4 py-3\">\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              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/envelope.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Email</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.email }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/telephone.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Phone</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.phone }}</span>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <span class=\"field-label-sm\"><img src=\"/assets/images/icons/geo-alt.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" />Location</span>\r\n              <span class=\"field-value-sm d-block\">{{ data.address }}, {{ data.city }}, {{ data.state }}, {{ data.zipCode }}, {{ data.country }}</span>\r\n            </div>\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            <img src=\"/assets/images/icons/exclamation-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Click \"Edit\" to review and save your basic info.\r\n          </span>\r\n          <span *ngIf=\"basicDetailsSaved\" class=\"small text-success fw-semibold\">\r\n            <img src=\"/assets/images/icons/check-circle.svg\" width=\"13\" height=\"13\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Basic details saved.\r\n          </span>\r\n          <button class=\"btn btn-sm btn-primary px-4 ms-auto\" (click)=\"toggleEdit()\">Edit</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\" (input)=\"phoneMask($event, 'profile')\"\r\n                 name=\"phone\" placeholder=\"Phone (10 digits)\" (keypress)=\"allowOnlyNumbers($event)\"\r\n                required pattern=\"^\\d{10}$\" maxlength=\"14\" 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              </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  ngx-google-places-autocomplete [options]=\"options\" type=\"text\" class=\"form-control\" (onAddressChange)=\"AddressChangeUser($event)\" [(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\" #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            <div class=\"col-md-6 position-relative\">\r\n              <label class=\"small text-muted d-block\">Profile Picture</label>\r\n              <input #editHeadshotFile type=\"file\" accept=\"image/*\" class=\"d-none\" (change)=\"uploadHeadshotImage($event)\" name=\"headshotFile\" />\r\n              <input type=\"text\" class=\"form-control pe-5\" [value]=\"headshotFileName\" readonly\r\n                     placeholder=\"Upload Profile Picture\" (click)=\"editHeadshotFile.click()\" />\r\n              <img *ngIf=\"!isHeadshotLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" style=\"position:absolute;right:12px;top:32px;cursor:pointer;width:18px;\" (click)=\"editHeadshotFile.click()\" />\r\n              <div *ngIf=\"isHeadshotLoading\" style=\"position:absolute;right:12px;top:32px;\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"col-md-6\" *ngIf=\"headshotPreviewUrl\">\r\n              <label class=\"small text-muted d-block\">Preview</label>\r\n              <img [src]=\" cloudfrontUrl + headshotPreviewUrl\" class=\"img-thumbnail rounded-circle\" style=\"width:64px;height:64px;object-fit:cover;\" alt=\"Profile preview\" />\r\n            </div>\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  <div class=\"section mb-5 provider-company-first\" *ngIf=\"roleData?.role?.name === 'Provider' && hasUserDetailData\">\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        <img src=\"/assets/images/icons/building.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Company Details</h5>\r\n        <span *ngIf=\"companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-success-subtle text-success\">\r\n          Saved\r\n        </span>\r\n        <span *ngIf=\"!companyDetailsSaved\"\r\n          class=\"badge border section-flag bg-warning-subtle text-warning\">\r\n          Not saved yet\r\n        </span>\r\n      </div>\r\n      <button class=\"btn btn-sm btn-primary px-4\" (click)=\"toggleCompanyEdit()\">Edit</button>\r\n    </div>\r\n\r\n    <!-- Company Details Display Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"!isCompanyEditMode()\">\r\n      <div class=\"card-body p-4\">\r\n        <div class=\"row g-4\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyName}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone</label>\r\n            <span class=\"fw-bold small\">{{ companyDetails()?.companyPhoneNumber}}</span>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Company Address</label>\r\n            <span class=\"small\">{{ companyDetails()?.address1}}, {{ companyDetails()?.city}}, {{ companyDetails()?.state}}, {{ companyDetails()?.zipcode}}, {{ companyDetails()?.country}}</span>\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"companyLogoUrl()\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <img [src]=\"companyLogoUrl()\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Company Details Edit Mode -->\r\n    <div class=\"card shadow-sm border-0\" *ngIf=\"isCompanyEditMode()\">\r\n      <div class=\"card-header bg-white fw-bold\">Update Company Details</div>\r\n      <div class=\"card-body p-4\">\r\n        <form class=\"row g-3\" #companyForm=\"ngForm\" novalidate>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Name <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': (!tempCompanyDetails.companyName?.trim() && companyFormSubmitted) || companyNameError }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyName\" name=\"companyName\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyName?.trim() && companyFormSubmitted\">\r\n              Company name is required\r\n            </div>\r\n            <div class=\"invalid-feedback\" *ngIf=\"companyNameError\">\r\n              {{ companyNameError }}\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Phone <span class=\"text-danger\">*</span></label>\r\n           <input  (input)=\"phoneMask($event, 'company')\" type=\"text\" maxlength=\"14\" (keypress)=\"allowOnlyNumbers($event)\"  inputmode=\"numeric\" class=\"form-control form-control-sm\"  \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.companyPhoneNumber\" name=\"companyPhoneNumber\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.companyPhoneNumber?.trim() && companyFormSubmitted\">\r\n              Company phone is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-12\">\r\n            <label class=\"small text-muted d-block\">Address <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\"  ngx-google-places-autocomplete class=\"form-control form-control-sm\" (onAddressChange)=\"AddressChangeCompany($event)\"\r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.address1?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.address1\" name=\"address1\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.address1?.trim() && companyFormSubmitted\">\r\n              Address is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.city?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.city\" name=\"city\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.city?.trim() && companyFormSubmitted\">\r\n              City is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">State <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.state?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.state\" name=\"state\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.state?.trim() && companyFormSubmitted\">\r\n              State is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\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 form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.zipcode?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.zipcode\" name=\"zipcode\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.zipcode?.trim() && companyFormSubmitted\">\r\n              Zip code is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Country <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" \r\n                   [ngClass]=\"{ 'is-invalid': !tempCompanyDetails.country?.trim() && companyFormSubmitted }\"\r\n                   [(ngModel)]=\"tempCompanyDetails.country\" name=\"country\" required />\r\n            <div class=\"invalid-feedback\" *ngIf=\"!tempCompanyDetails.country?.trim() && companyFormSubmitted\">\r\n              Country is required\r\n            </div>\r\n          </div>\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Company Logo</label>\r\n            <input #uploadCompanyFile type=\"file\" accept=\"image/*\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n          </div>\r\n          <div class=\"col-md-6\" *ngIf=\"tempCompanyLogoUrl\">\r\n            <label class=\"small text-muted d-block\">Logo Preview</label>\r\n            <img [src]=\"tempCompanyLogoUrl\" class=\"img-thumbnail\" style=\"max-height: 80px;\" />\r\n          </div>\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)=\"cancelCompanyEdit()\">Cancel</button>\r\n        <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingCompany\" \r\n                (click)=\"saveCompanyDetails()\">\r\n          <span *ngIf=\"isSavingCompany\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCompany ? 'Saving...' : 'Save Changes' }}\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div [class.section-locked]=\"roleData?.role?.name === 'Provider' && !hasUserDetailData\">\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        <img src=\"/assets/images/icons/briefcase-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Work Experience</h5>\r\n        <span *ngIf=\"experience().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"experience().length === 0 || isSavingWork || isAddingJob() || editingJobIndex() !== null\"\r\n          (click)=\"confirmAllWork()\">\r\n          <span *ngIf=\"isSavingWork\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingWork ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"experience().length === 0 && !isAddingJob()\" class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/briefcase.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No work experience added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3\">\r\n      <div *ngIf=\"isAddingJob() && tempJob()\" class=\"list-group-item p-0 border-0\">\r\n        <div class=\"form-panel 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\">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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n              (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"newCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n              (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"newState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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-6\">\r\n            <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n              (bsValueChange)=\"setTempJobMonth('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-6\">\r\n            <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n            <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n              [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('endDate', $event)\"\r\n              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\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=\"d-flex justify-content-end gap-2 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 rounded-pill\" [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      </div>\r\n\r\n\r\n      <div *ngFor=\"let job of experience(); let i = index\" class=\"list-group-item p-0 border-0 mb-2\">\r\n\r\n        <div class=\"work-accent-item p-3 rounded-3 bg-white border\">\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            <div class=\"item-icon-circle bg-primary-subtle text-primary me-3\">\r\n              <img src=\"/assets/images/icons/briefcase-fill-blue.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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=\"align-items-end col-md-12 d-flex justify-content-end pe-3\">\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-md-4\">\r\n                <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.country\"\r\n                  (ngModelChange)=\"patchTempJob({ country: $event })\" name=\"country{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.country)\">Country is required</div>\r\n              </div>\r\n              <div class=\"col-md-4\">\r\n                <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n                <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempJob()?.state\"\r\n                  (ngModelChange)=\"patchTempJob({ state: $event })\" name=\"state{{ i }}\" />\r\n                <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempJob()?.state)\">State is required</div>\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=\"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-6\">\r\n                <label class=\"small text-muted d-block\">START DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempJob()?.startDate)\"\r\n                  (bsValueChange)=\"setTempJobMonth('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-6\">\r\n                <label class=\"small text-muted d-block\">END DATE <span class=\"text-danger\">*</span></label>\r\n                <input class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                  [bsConfig]=\"monthPickerConfig\" [disabled]=\"tempJob()?.isCurrent\"\r\n                  [ngModel]=\"monthInputToDate(tempJob()?.endDate)\" (bsValueChange)=\"setTempJobMonth('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-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=\"d-flex justify-content-end gap-2 mt-3\" *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 rounded-pill\" [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      </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        <img src=\"/assets/images/icons/patch-check-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Certifications</h5>\r\n        <span *ngIf=\"certs().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"certs().length === 0 || isSavingCertification || isAddingCertification() || editingCertificationIndex() !== null\"\r\n          (click)=\"confirmAllCertifications()\">\r\n          <span *ngIf=\"isSavingCertification\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingCertification ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"certs().length === 0 && !isAddingCertification() && editingCertificationIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/patch-check.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No certifications added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingCertification() && tempCertification()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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 cert-accent-item\">\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\">Certificate 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\">Certificate Issued By</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\">Issued 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\">Certification Number</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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempCertification()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempCertificationMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/card-checklist-warning.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Licenses</h5>\r\n        <span *ngIf=\"licenses().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"licenses().length === 0 || isSavingLicense || isAddingLicense() || editingLicenseIndex() !== null\"\r\n          (click)=\"confirmAllLicenses()\">\r\n          <span *ngIf=\"isSavingLicense\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingLicense ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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>\r\n    <div *ngIf=\"licenses().length === 0 && !isAddingLicense() && editingLicenseIndex() === null\"\r\n      class=\"empty-state-wrap mb-3\">\r\n      <div class=\"empty-icon\"><img src=\"/assets/images/icons/card-checklist.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n      <p>No licenses added yet. Click <strong>+</strong> to add one.</p>\r\n    </div>\r\n\r\n    <div class=\"list-group list-group-flush shadow-sm rounded-3 border\">\r\n      <div *ngIf=\"isAddingLicense() && tempLicense()\" class=\"list-group-item py-3 px-3\">\r\n        <form class=\"row g-2\">\r\n          <div class=\"col-md-6\">\r\n            <label class=\"small text-muted d-block\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n              (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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 lic-accent-item\">\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\">License 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\">License Issued By</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\">Issued 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.issueDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('issueDate', $event)\" 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempLicense()?.expiryDate || null)\"\r\n                (bsValueChange)=\"setTempLicenseMonth('expiryDate', $event)\" 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        <img src=\"/assets/images/icons/tools.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n        <h5 class=\"fw-bold mb-0\">Tools</h5>\r\n        <span *ngIf=\"tools().length > 0\" 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      <div class=\"d-flex align-items-center gap-2\">\r\n        <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n          [disabled]=\"tools().length === 0 || isSavingTool || isToolEditorOpen()\" (click)=\"confirmAllTools()\">\r\n          <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n          {{ isSavingTool ? 'Confirming...' : 'Confirm All' }}\r\n        </button>\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    </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\"\r\n          class=\"btn btn-light border res-flex 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: 9999999;\" (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              <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                <div class=\"form-checks form-switch mt-2\">\r\n                  <input class=\"form-check-input\" type=\"checkbox\" [ngModel]=\"toolForm()?.profileVisibility\"\r\n                    (ngModelChange)=\"patchToolForm({ profileVisibility: $event })\" name=\"toolVisible\" id=\"toolVisible\"\r\n                    style=\"width: 55px;height: 25px;\" />\r\n                  <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/stars.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Skills</h5>\r\n          <span *ngIf=\"skills().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"skills().length === 0 || isSavingSkill || isSkillEditorOpen()\" (click)=\"confirmAllSkills()\">\r\n            <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingSkill ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </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 res-flex 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: 9999999;\" (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                <img src=\"/assets/images/icons/arrow-left-blue.svg\" width=\"20\" height=\"20\" alt=\"\" />\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 text-center\">\r\n                  <label class=\"small text-muted d-block\">Profile Visibility</label>\r\n                  <div class=\"form-checks 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\" style=\"width: 55px;height: 25px;\" />\r\n                    <label class=\"form-check-label ps-2 pt-1\" 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          <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"20\" height=\"20\" class=\"section-header-icon\" alt=\"\" />\r\n          <h5 class=\"fw-bold mb-0\">Education</h5>\r\n          <span *ngIf=\"educationList().length > 0\" 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        <div class=\"d-flex align-items-center gap-2\">\r\n          <button type=\"button\" class=\"btn btn-sm btn-outline-success\"\r\n            [disabled]=\"educationList().length === 0 || isSavingEducation || isAddingEducation() || editingEducationIndex() !== null\"\r\n            (click)=\"confirmAllEducation()\">\r\n            <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n            {{ isSavingEducation ? 'Confirming...' : 'Confirm All' }}\r\n          </button>\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      </div>\r\n\r\n      <div *ngIf=\"educationList().length === 0 && !isAddingEducation() && editingEducationIndex() === null\"\r\n        class=\"empty-state-wrap mb-3\">\r\n        <div class=\"empty-icon\"><img src=\"/assets/images/icons/mortarboard.svg\" width=\"32\" height=\"32\" alt=\"\" /></div>\r\n        <p>No education added yet. Click <strong>+</strong> to add one.</p>\r\n      </div>\r\n\r\n      <div *ngIf=\"isAddingEducation() && tempEducation()\" class=\"mb-2\">\r\n        <div class=\"form-panel\">\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            <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n              placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n              (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"newEduDegreeType\">\r\n            </ng-select>\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-4\">\r\n            <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n              (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"newEduCountry\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n          </div>\r\n          <div class=\"col-md-4\">\r\n            <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n            <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n              (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"newEduState\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n              (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"newEduCity\" />\r\n            <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n              [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n              (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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      </div>\r\n\r\n      <div *ngFor=\"let edu of educationList(); let ei = index\" class=\"edu-accent-item p-3 bg-white border rounded-3 shadow-sm mb-2\">\r\n        <div class=\"d-flex justify-content-between align-items-start\">\r\n          <div class=\"d-flex align-items-start gap-3\">\r\n            <div class=\"item-icon-circle flex-shrink-0\" style=\"background:#f5f3ff; color:#6366f1;\">\r\n              <img src=\"/assets/images/icons/mortarboard-fill.svg\" width=\"16\" height=\"16\" alt=\"\" />\r\n            </div>\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>\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              <ng-select class=\"ng-select-sm\" [items]=\"educationDegreeTypeOptions\" [clearable]=\"false\"\r\n                placeholder=\"Select degree / course type\" [ngModel]=\"tempEducation()?.degreeType\"\r\n                (ngModelChange)=\"patchTempEducation({ degreeType: $event })\" name=\"eduDegreeType{{ ei }}\">\r\n              </ng-select>\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-4\">\r\n              <label class=\"small text-muted d-block\">COUNTRY <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.country\"\r\n                (ngModelChange)=\"patchTempEducation({ country: $event })\" name=\"eduCountry{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.country)\">Country is required</div>\r\n            </div>\r\n            <div class=\"col-md-4\">\r\n              <label class=\"small text-muted d-block\">STATE <span class=\"text-danger\">*</span></label>\r\n              <input type=\"text\" class=\"form-control form-control-sm\" [ngModel]=\"tempEducation()?.state\"\r\n                (ngModelChange)=\"patchTempEducation({ state: $event })\" name=\"eduState{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.state)\">State is required</div>\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]=\"tempEducation()?.city\"\r\n                (ngModelChange)=\"patchTempEducation({ city: $event })\" name=\"eduCity{{ ei }}\" />\r\n              <div class=\"small text-danger mt-1\" *ngIf=\"isBlank(tempEducation()?.city)\">City 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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"maxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.startDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 class=\"form-control form-control-sm\" placeholder=\"MM/YYYY\" bsDatepicker [maxDate]=\"futureMaxDate\"\r\n                [bsConfig]=\"monthPickerConfig\" [ngModel]=\"monthInputToDate(tempEducation()?.endDate)\"\r\n                (bsValueChange)=\"setTempEducationMonth('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 rounded-pill\" [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><!-- end sections-locked -->\r\n  <div class=\"d-flex gap-3 justify-content-center mt-5 pt-2\" *ngIf=\"!isResume\">\r\n    <button class=\"btn btn-outline-secondary px-5 h-auto rounded-pill\" (click)=\"onBackClick()\">\r\n      <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em\" alt=\"\" /> Back\r\n    </button>\r\n    <button class=\"btn btn-primary px-5 shadow-sm h-auto rounded-pill\" [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      <img *ngIf=\"!isSavingBasic\" src=\"/assets/images/icons/arrow-right-white.svg\" width=\"14\" height=\"14\" class=\"ms-1\" style=\"vertical-align:-0.1em\" alt=\"\" />\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<!-- Bulk Skill Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkSkillConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Skills</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all skills that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkSkillStars = s\">\r\n          <span [class]=\"bulkSkillStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkSkillStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkSkillStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkSkillYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkSkillYear === null || bulkSkillYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkSkillConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingSkill || bulkSkillStars <= 0 || bulkSkillYear === null\"\r\n        (click)=\"applyBulkSkillConfirm()\">\r\n        <span *ngIf=\"isSavingSkill\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingSkill ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Bulk Tool Confirm Dialog -->\r\n<div class=\"modal-overlay\" *ngIf=\"showBulkToolConfirm\">\r\n  <div class=\"confirm-modal-card\" style=\"max-width: 480px;\">\r\n    <h4 class=\"mb-1\">Set Rating for All Tools</h4>\r\n    <p class=\"text-muted small mb-4\">Enter a star rating and years of experience to apply to all tools that are missing these values.</p>\r\n    <div class=\"mb-3\">\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 *ngFor=\"let s of [1,2,3,4,5]\" type=\"button\" class=\"btn btn-link p-0 text-decoration-none\"\r\n          (click)=\"bulkToolStars = s\">\r\n          <span [class]=\"bulkToolStars >= s ? 'text-warning fs-4' : 'text-muted fs-4'\">\r\n            {{ bulkToolStars >= s ? '\u2605' : '\u2606' }}\r\n          </span>\r\n        </button>\r\n        <span class=\"small text-muted\">{{ bulkToolStars }}/5</span>\r\n      </div>\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolStars <= 0\">Star rating is required</div>\r\n    </div>\r\n    <div class=\"mb-4\">\r\n      <label class=\"small text-muted d-block mb-1\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n      <input type=\"number\" class=\"form-control\" [(ngModel)]=\"bulkToolYear\" min=\"1\" max=\"30\"\r\n        placeholder=\"Years of Experience\" />\r\n      <div class=\"small text-danger mt-1\" *ngIf=\"bulkToolYear === null || bulkToolYear === undefined\">Years of experience is required</div>\r\n    </div>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" (click)=\"cancelBulkToolConfirm()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [disabled]=\"isSavingTool || bulkToolStars <= 0 || bulkToolYear === null\"\r\n        (click)=\"applyBulkToolConfirm()\">\r\n        <span *ngIf=\"isSavingTool\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n        {{ isSavingTool ? 'Saving...' : 'Apply to All & Save' }}\r\n      </button>\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\">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 h-auto\" (click)=\"stayOnPreview()\">Stay</button>\r\n      <button type=\"button\" class=\"btn btn-danger h-auto\" (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\">Finish Setup and Continue</h4>\r\n    <p class=\"text-muted mb-4\">Save your information and go to your dashboard</p>\r\n    <div class=\"d-flex justify-content-end gap-2\">\r\n      <button type=\"button\" class=\"btn btn-outline-secondary h-auto\" [disabled]=\"isSavingBasic\"\r\n        (click)=\"cancelDashboardRedirect()\">Cancel</button>\r\n      <button type=\"button\" class=\"btn btn-primary h-auto\" [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>\r\n", 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}@media screen and (max-width: 768px){.res-flex{display:unset!important}.res-flex .fw-normal{width:100%;display:block;font-size:13px!important}}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .bs-datepicker-body table td span.selected,.bs-datepicker-body table td.selected span{background-color:#4077ad!important}.profile-avatar-circle{width:58px;height:58px;border-radius:16px;background:linear-gradient(135deg,#4077ad,#6ca0dc);display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0;box-shadow:0 4px 12px #4077ad4d}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.work-accent-item:hover{background-color:#f5f8ff!important;box-shadow:0 4px 14px #4077ad17!important}.edu-accent-item{border-left:4px solid #6366f1!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease,box-shadow .18s ease}.edu-accent-item:hover{background-color:#f8f8ff!important;box-shadow:0 4px 14px #6366f117!important}.cert-accent-item{border-left:4px solid #059669!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.cert-accent-item:hover{background-color:#f0fdf4!important}.lic-accent-item{border-left:4px solid #d97706!important;border-radius:0 10px 10px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:.67rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:.875rem;color:#1f2937}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:12px}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:.875rem}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:.875rem}.form-panel .form-control:focus,.form-panel .form-select:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.section-header-bar{display:flex;align-items:center;justify-content:space-between;padding:10px 0 14px;border-bottom:2px solid #f1f5f9;margin-bottom:16px}.preview-card-gradient{background:linear-gradient(135deg,#fff,#eff6ff);border-bottom:1px solid #e2e8f0;padding:20px 24px 16px;border-radius:13px 13px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0}.provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: ProvidersService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
@@ -6651,7 +6654,18 @@ class EducationComponent {
         if (!confirm('Delete this education item?'))
             return;
         this.userEducation.bulkDelete([exp.id]).subscribe({
-            next: () => this.workStore.loadFromApi(this.userId),
+            next: () => {
+                this.workStore.loadFromApi(this.userId);
+                this.educationForm.reset();
+                this.educationForm.patchValue({ country: 'US' });
+                this.showedit = false;
+                this.isEditing.set(false);
+                this.editingIndex = -1;
+                this.fileName = '';
+                this.fileData = null;
+                this.fileChanged = false;
+                this.model = { fileId: null, fileUrl: null, fileName: null };
+            },
             error: (err) => console.error(err)
         });
     }
@@ -6695,11 +6709,11 @@ class EducationComponent {
         this.fileName = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserEducationService }, { token: UserService }, { token: CredentialingStore }, { token: EducationStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name</div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Education</h3>\r\n    <p class=\"preview-subtitle\">Review your educational history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Name</span>\r\n              <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Type</span>\r\n              <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Institution Name</span>\r\n              <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Comments</span>\r\n            <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: EducationComponent, isStandalone: false, selector: "app-education", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Education</h3>\r\n    <p class=\"preview-subtitle\">Review your educational history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Name</span>\r\n              <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Type</span>\r\n              <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Institution Name</span>\r\n              <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Comments</span>\r\n            <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EducationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type</div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name</div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Education</h3>\r\n    <p class=\"preview-subtitle\">Review your educational history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Name</span>\r\n              <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Type</span>\r\n              <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Institution Name</span>\r\n              <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Comments</span>\r\n            <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"] }]
+            args: [{ selector: 'app-education', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Add Education</h3>\r\n    <p class=\"hint\">\r\n      Please list your educational history. This can cover anything from GED to college degree\r\n    </p>\r\n    <form [formGroup]=\"educationForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">General Equivalency Diploma / Degree <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma here\" formControlName=\"courseName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseName')?.touched &&\r\n               educationForm.get('courseName')?.hasError('required')\">\r\n            Degree is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Diploma / Degree Type <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your Diploma / Degree Type\" formControlName=\"courseType\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('courseType')?.touched &&\r\n               educationForm.get('courseType')?.hasError('required')\">\r\n            Diploma / Degree Type is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Institution Name <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter institution name here\" formControlName=\"instituteName\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('instituteName')?.touched &&\r\n               educationForm.get('instituteName')?.hasError('required')\">\r\n            Institution name is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n            <!-- <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\" let-item$=\"item$\" let-index=\"index\">\r\n          <span class=\"ng-value-label\">\r\n            {{item.country}}\r\n          </span>\r\n          <span class=\"ng-value-icon right\" (click)=\"clear(item)\" aria-hidden=\"true\">\r\n            <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n          </span> &nbsp;\r\n        </ng-template> -->\r\n          </ng-select>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field city\">\r\n          <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"educationForm.get('city')?.touched &&\r\n               educationForm.get('city')?.hasError('required')\">\r\n            Enter City\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" [maxDate]=\"maxDate\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('startDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"startDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('startDate')?.touched &&\r\n               educationForm.get('startDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !educationForm.get('endDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"endDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"educationForm.get('endDate')?.touched &&\r\n               educationForm.get('endDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Comments</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"comments\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n    <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your diploma, degree certificate, or transcript (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"action\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/mortarboard-fill.svg\" alt=\"education\" class=\"me-2\" width=\"18\" height=\"18\" />Education</h3>\r\n    <p class=\"preview-subtitle\">Review your educational history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#edu_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.courseName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.instituteName }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'edu_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Name</span>\r\n              <span class=\"preview-value\">{{ exp.courseName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Course Type</span>\r\n              <span class=\"preview-value\">{{ exp.courseType || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Institution Name</span>\r\n              <span class=\"preview-value\">{{ exp.instituteName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.startDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.endDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Comments</span>\r\n            <span class=\"preview-value\">{{ exp.comments || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Educations</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.row{flex-direction:column;gap:12px}.right-actions{gap:8px;flex-direction:column-reverse}.detail-grid{grid-template-columns:1fr}.actions,.action{gap:8px;display:flex;flex-direction:column-reverse}.add-btn{width:unset}.actions{margin:48px 0 20px}button{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserEducationService }, { type: UserService }, { type: CredentialingStore }, { type: EducationStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -6904,7 +6918,19 @@ class CertificationComponent {
         if (!confirm('Delete this certification?'))
             return;
         this.userDocumentService.bulkDelete([exp.id]).subscribe({
-            next: () => this.workStore.loadFromApi(this.userId),
+            next: () => {
+                this.workStore.loadFromApi(this.userId);
+                this.certificateForm.reset();
+                this.showedit = false;
+                this.isEditing.set(false);
+                this.editingIndex = -1;
+                this.fileName = '';
+                this.fileData = null;
+                this.fileChanged = false;
+                this.model = { fileId: null, fileUrl: null, fileName: null };
+                this.selectedDocumentId = null;
+                this.selectedDocumentName = null;
+            },
             error: (err) => console.error(err)
         });
     }
@@ -7143,11 +7169,11 @@ class CertificationComponent {
         this.fileName = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, deps: [{ token: i1$1.RoleContextService }, { token: UserDocumentService }, { token: UserService }, { token: CredentialingStore }, { token: CertificationStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Certifications</h3>\r\n    <p class=\"preview-subtitle\">Review your certifications below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#cert_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CertificationComponent, isStandalone: false, selector: "app-certification", inputs: { states: "states", providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Certifications</h3>\r\n    <p class=\"preview-subtitle\">Review your certifications below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#cert_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CertificationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Certifications</h3>\r\n    <p class=\"preview-subtitle\">Review your certifications below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#cert_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
+            args: [{ selector: 'app-certification', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n  <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Add Certificates</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add Certificate type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your Certificate Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          Certificate number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">Certificate Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter Certificate Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          Certificate issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State here\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Certificate Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your certificate or proof of certification (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/patch-check-fill.svg\" alt=\"certification\" class=\"me-2\" width=\"18\" height=\"18\" />Certifications</h3>\r\n    <p class=\"preview-subtitle\">Review your certifications below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#cert_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'cert_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Certificate Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Certifications</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:5px}.add-btn{width:unset}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.action{flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.RoleContextService }, { type: UserDocumentService }, { type: UserService }, { type: CredentialingStore }, { type: CertificationStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { states: [{
                 type: Input
             }], providerId: [{
@@ -7918,7 +7944,7 @@ class SkillsComponent {
         this.userSkillsSub?.unsubscribe();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SkillsComponent, deps: [{ token: SkillSetService }, { token: UserSkillSetService }, { token: UserService }, { token: i8.UntypedFormBuilder }, { token: UtilsService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: i1$1.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" class=\"me-2\" width=\"18\" height=\"18\" />Skills Preview</h5>\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteSkillFromPreview(skill, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">Cancel</button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\" class=\"preview-detail-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <span class=\"preview-value stars-readonly\">\r\n              <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Years of Experience</span>\r\n            <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Visible</span>\r\n            <span class=\"preview-value\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n              [key]=\"tab.at(0).get('starRating')?.value\"\r\n              [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n              [maxStars]=\"5\"\r\n              (ratingOutput)=\"onEditRating($event)\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Visible</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <label class=\"label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star Rating is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"label mb-2\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\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: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, ngImport: i0, template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" class=\"me-2\" width=\"18\" height=\"18\" />Skills Preview</h5>\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteSkillFromPreview(skill, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">Cancel</button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\" class=\"preview-detail-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <span class=\"preview-value stars-readonly\">\r\n              <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Years of Experience</span>\r\n            <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Visible</span>\r\n            <span class=\"preview-value\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n              [key]=\"tab.at(0).get('starRating')?.value\"\r\n              [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n              [maxStars]=\"5\"\r\n              (ratingOutput)=\"onEditRating($event)\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Visible</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <label class=\"label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\">\r\n        <div class=\"skill-chips\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n          <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n            [class.selected]=\"skill.selected\"\r\n            [attr.for]=\"skill.id\">\r\n            <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n              (change)=\"onSelectedSkillsets($event, skill)\"\r\n              [id]=\"skill.id\" [name]=\"skill.id\" />\r\n            <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n              <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            {{ skill.name }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star Rating is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"label mb-2\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skill-chips-wrapper{margin:8px 0 4px}.content-part .skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .skill-chip input[type=checkbox]{display:none}.content-part .skill-chip .chip-check-icon{flex-shrink:0}.content-part .skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\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: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -7956,7 +7982,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" class=\"me-2\" width=\"18\" height=\"18\" />Skills Preview</h5>\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteSkillFromPreview(skill, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">Cancel</button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\" class=\"preview-detail-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <span class=\"preview-value stars-readonly\">\r\n              <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Years of Experience</span>\r\n            <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Visible</span>\r\n            <span class=\"preview-value\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n              [key]=\"tab.at(0).get('starRating')?.value\"\r\n              [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n              [maxStars]=\"5\"\r\n              (ratingOutput)=\"onEditRating($event)\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Visible</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <label class=\"label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <p class=\"subtitle\">A minimum of 5 skills is needed</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"col skills-section\" [ngClass]=\"showLoading && !isEditMode ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let skill of skillSets\">\r\n            <div class=\"mt-2 gap-1 d-flex align-items-start\">\r\n              <input type=\"checkbox\" [checked]=\"skill.selected\" (change)=\"onSelectedSkillsets($event, skill)\"\r\n                id=\"{{skill.id}}\" name=\"{{skill.id}}\">\r\n              <label class=\"text-title\" for=\"{{skill.id}}\">\r\n                {{ skill.name }}\r\n              </label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star Rating is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"label mb-2\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"store.stepView() === 'add'\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: ["@charset \"UTF-8\";.skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skills-section{margin-left:5px}.content-part .skills-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .skills-section .text-title{font-size:14px;margin-left:3px;color:#1e293b;display:contents}.content-part .skills-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .skills-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .skills-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"] }]
+                    ], template: "<!-- SKILL PREVIEW LIST -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" class=\"me-2\" width=\"18\" height=\"18\" />Skills Preview</h5>\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let skill of userSkillsPreview\" #accGroup\r\n      (isOpenChange)=\"onSkillAccordionChange(skill, $event)\">\r\n      <!-- HEADER -->\r\n      <div accordion-heading class=\"skill-preview-header\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ skill.skillSetName }}\r\n        </span>\r\n        <div class=\"actions\">\r\n          <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editSkillFromPreview(skill, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" alt=\"icon\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteSkillFromPreview(skill, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-container>\r\n          <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backToSkill(accGroup)\">Cancel</button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n          </ng-container>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <!-- DISPLAY MODE -->\r\n        <div *ngIf=\"!isEditMode || model?.skillSetId !== skill.skillSetId\" class=\"preview-detail-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <span class=\"preview-value stars-readonly\">\r\n              <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Years of Experience</span>\r\n            <span class=\"preview-value\">{{ skill?.year || '\u2014' }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Visible</span>\r\n            <span class=\"preview-value\">\r\n              <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"skill.profileVisibility\" disabled>\r\n            </span>\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ skill.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n        <!-- EDIT MODE -->\r\n        <div *ngIf=\"isEditMode && model?.skillSetId === skill.skillSetId\" [formGroup]=\"tab.at(0)\" class=\"preview-edit-grid\">\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Service Provider</span>\r\n            <span class=\"preview-value\">{{ skill.providerName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Skill</span>\r\n            <span class=\"preview-value\">{{ skill.skillSetName }}</span>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <span class=\"preview-label\">Self Ability Rating</span>\r\n            <ngx-stars *ngIf=\"tab.at(0)?.get('starRating')?.value !== null\"\r\n              [key]=\"tab.at(0).get('starRating')?.value\"\r\n              [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\"\r\n              [maxStars]=\"5\"\r\n              (ratingOutput)=\"onEditRating($event)\">\r\n            </ngx-stars>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Years of Experience</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"year\" [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"></ng-select>\r\n          </div>\r\n          <div class=\"preview-cell\">\r\n            <label class=\"label\">Visible</label>\r\n            <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n          </div>\r\n          <div class=\"preview-cell preview-full\">\r\n            <label class=\"label\">Description</label>\r\n            <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\" placeholder=\"Enter notes\"></textarea>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Add part -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n  <h2 class=\"title text-secondary\">Add Skills</h2>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> {{ form?.value?.id ? \"Update Skill Category\" : \"Create Skill Category\" }}</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12\">\r\n          <div class=\"search-part\">\r\n            <input type=\"text\" placeholder=\"Search / Add Skillsets here\" [(ngModel)]=\"searchSkillQry\"\r\n              (input)=\"getSkillSets()\" />\r\n            <button class=\"btn\" (click)=\"createNewSkills()\" tooltip=\"Add Skillset\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Skillsets Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{nameError}}\r\n      </div>\r\n      <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\">\r\n        <div class=\"skill-chips\" [ngStyle]=\"showLoader && !isEditMode ? {'min-height': '120px'} : {}\">\r\n          <label class=\"skill-chip\" *ngFor=\"let skill of skillSets\"\r\n            [class.selected]=\"skill.selected\"\r\n            [attr.for]=\"skill.id\">\r\n            <input type=\"checkbox\" [checked]=\"skill.selected\"\r\n              (change)=\"onSelectedSkillsets($event, skill)\"\r\n              [id]=\"skill.id\" [name]=\"skill.id\" />\r\n            <svg *ngIf=\"skill.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n              <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            {{ skill.name }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div\r\n        [ngClass]=\"{ 'loader': showLoading && !isEditMode,'pt-3': !showLoading && !isEditMode,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id={{tabs[index]}} #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{tabs[index]}}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.skillSetId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body\">\r\n                <div class=\"row\">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self Ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.starRating?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.starRating?.errors }\">\r\n                      <div *ngIf=\"k?.starRating?.errors?.required\">Star Rating is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\"\r\n                      bindLabel=\"text\" formControlName=\"year\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\" bindValue=\"value\"\r\n                      [closeOnSelect]=\"true\" placeholder=\"Select\" id=\"reqStates\"\r\n                      (change)=\"onYearChange(group)\"></ng-select>\r\n                    <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.year?.errors }\">\r\n                      <div *ngIf=\"k?.year?.errors?.required\">Year is required</div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1 text-center\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\" *ngIf=\"tab.controls.length>1 && index == copyOptionIndex\">\r\n                    <label class=\"label mb-2\">Copy to All Tabs</label>\r\n                    <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index,group.value)\"\r\n                      role=\"switch\">\r\n                  </div>\r\n                </div>\r\n                <div>\r\n                  <label class=\"label\">Description</label>\r\n                  <div class=\"col-12 col-md-12 mt-1\">\r\n                    <textarea placeholder=\"Description of your Skill here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"5\"></textarea>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Footer buttons -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">Skip</button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n  <button class=\"back-btn\" (click)=\"back()\">Back</button>\r\n  <div class=\"mb-res\">\r\n    <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n      Add More Skills\r\n    </button>\r\n    <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n      Continue\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".skills-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.skills-container.last{min-height:unset}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:13px}.content-part .card{margin-top:15px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.content-part .card .row{margin-top:-15px}.content-part .card .sub-section{padding:0 10px}.content-part .card .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .card .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .card .sub-section .content{font-size:13px;color:#64748b}.content-part .card .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .card .sub-section .subsection input{width:30%}.content-part .card .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b;margin-top:15px}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .skill-chips-wrapper{margin:8px 0 4px}.content-part .skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .skill-chip input[type=checkbox]{display:none}.content-part .skill-chip .chip-check-icon{flex-shrink:0}.content-part .skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .ng-select.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f}.label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px;display:block;margin-bottom:2px}.form-control{color:#1e293b;background:#f9fafb!important;min-height:36px;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px);height:40px}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.back-btn,.skip-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.continue-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.continue-btn.add{background:#2d5a8a}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.skill-preview-wrapper{margin-bottom:24px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;transition:box-shadow .35s ease,transform .25s ease,border-color .25s ease}.skill-preview-wrapper{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body>div{padding:16px 20px;border-bottom:1px solid #e2e8f0}.skill-preview-body>div:last-child{border-bottom:none}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body p{margin:0;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid,.preview-edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.rotate{transform:rotate(-180deg)}@media screen and (max-width: 767px){.skills-container{padding:16px}.title{font-size:18px}.form-control,textarea{font-size:16px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.back-btn,.skip-btn{width:100%}.continue-btn{padding:10px 22px;width:100%}.mb-res{display:flex;flex-direction:column-reverse;gap:8px;width:100%}.preview-detail-grid,.preview-edit-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}\n"] }]
         }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: i1$1.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -8157,7 +8183,19 @@ class LicensesComponent {
         if (!confirm('Delete this license?'))
             return;
         this.userDocumentService.bulkDelete([exp.id]).subscribe({
-            next: () => this.workStore.loadFromApi(this.userId),
+            next: () => {
+                this.workStore.loadFromApi(this.userId);
+                this.certificateForm.reset();
+                this.showedit = false;
+                this.isEditing.set(false);
+                this.editingIndex = -1;
+                this.fileName = '';
+                this.fileData = null;
+                this.fileChanged = false;
+                this.model = { fileId: null, fileUrl: null, fileName: null };
+                this.selectedDocumentId = null;
+                this.selectedDocumentName = null;
+            },
             error: (err) => console.error(err)
         });
     }
@@ -8399,11 +8437,11 @@ class LicensesComponent {
         this.fileName = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, deps: [{ token: UserDocumentService }, { token: UserService }, { token: i1$1.RoleContextService }, { token: CredentialingStore }, { token: LicenseStore }, { token: i1$1.TokenService }, { token: PostalCodeServices }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Licenses</h3>\r\n    <p class=\"preview-subtitle\">Review your licenses below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#lic_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: LicensesComponent, isStandalone: false, selector: "app-licenses", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl", states: "states" }, ngImport: i0, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Licenses</h3>\r\n    <p class=\"preview-subtitle\">Review your licenses below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#lic_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LicensesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Licenses</h3>\r\n    <p class=\"preview-subtitle\">Review your licenses below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#lic_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
+            args: [{ selector: 'app-licenses', standalone: false, template: "<div class=\"education-container\" *ngIf=\"!showpreview()\">\r\n\r\n  <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Add Licenses</h3>\r\n  <p class=\"hint\">\r\n    Recommended for your role\r\n  </p>\r\n  <div class=\"document-container\">\r\n    <div class=\"search-part\">\r\n      <input type=\"text\" placeholder=\"Search / Add License type here...\" [formControl]=\"searchControl\" />\r\n      <button class=\"btn\" type=\"button\" (click)=\"addManualDocumentType()\" tooltip=\"Add manually\">\r\n        <img src=\"/assets/images/icons/plus.svg\" alt=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n      </button>\r\n    </div>\r\n    <div *ngIf=\"manualTypeError\" class=\"invalid-feedback is-invalid d-block mb-2\">{{ manualTypeError }}</div>\r\n\r\n    <div class=\"grid\">\r\n      <div *ngFor=\"let item of documentTypes\">\r\n        <label class=\"checkbox-row\">\r\n          <input type=\"checkbox\" [checked]=\"isChecked(item.id)\" (change)=\"toggleSelection(item, $event)\" />\r\n          <span class=\"title\">{{ item.type }}</span>\r\n        </label>\r\n      </div>\r\n    </div>\r\n  </div>\r\n  <form [formGroup]=\"certificateForm\">\r\n    <div class=\"row\" style=\"margin-top: 20px;\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Number</div>\r\n        <input type=\"text\" placeholder=\"Enter your License Number here\" formControlName=\"number\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('number')?.touched &&\r\n               certificateForm.get('number')?.hasError('required')\">\r\n          License number is required\r\n        </small>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"head\">License Issued By</div>\r\n        <input type=\"text\" placeholder=\"Enter License Issued By here\" formControlName=\"issuedBy\" />\r\n        <small class=\"error\" *ngIf=\"certificateForm.get('issuedBy')?.touched &&\r\n               certificateForm.get('issuedBy')?.hasError('required')\">\r\n          License issued by is required\r\n        </small>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"head\">Issued State</div>\r\n        <ng-select formControlName=\"issuedState\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n          placeholder=\"Select Issued State\">\r\n          <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n            <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n            &nbsp;{{ item.stateName }}\r\n          </ng-template>\r\n          <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <span class=\"ng-value-label\">\r\n              {{ item.stateName }}\r\n            </span>\r\n            <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n              <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n            </span>\r\n          </ng-template>\r\n        </ng-select>\r\n      </div>\r\n    </div>\r\n    <div class=\"row\">\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Issued Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Issued On\" [maxDate]=\"maxDate\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true, showWeekNumbers: false,\r\n isAnimated: true, customTodayClass: !certificateForm.get('issueDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"issueDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('issueDate')?.touched &&\r\n               certificateForm.get('issueDate')?.hasError('required')\">\r\n            Issued date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"field\">\r\n        <div class=\"mb-3 head\">\r\n          <div class=\"head\">Expiration Date</div>\r\n          <input class=\"form-control date-time-filter\" placeholder=\"Expired On\" bsDatepicker\r\n            [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !certificateForm.get('expiryDate')?.value ? 'today-highlight' : '' }\"\r\n            formControlName=\"expiryDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n          <small class=\"error\" *ngIf=\"certificateForm.get('expiryDate')?.touched &&\r\n               certificateForm.get('expiryDate')?.hasError('required')\">\r\n            Expiry date is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"row\">\r\n      <div class=\"field full-width\">\r\n        <div class=\"head\">Comments</div>\r\n        <textarea placeholder=\"Description\" formControlName=\"notes\">\r\n      </textarea>\r\n      </div>\r\n    </div>\r\n  </form>\r\n  <div class=\"row\">\r\n   <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">License Document</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your license document or proof of licensure (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n  </div>\r\n  <div class=\"action\">\r\n    <!-- Left button: Back or Cancel -->\r\n    <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n      {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n    </button>\r\n\r\n    <div class=\"right-actions\">\r\n      <!-- Skip button only for first entry (not editing or adding) -->\r\n      <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\" class=\"secondary\"\r\n        (click)=\"nextStep()\">\r\n        Skip\r\n      </button>\r\n\r\n      <!-- Primary button -->\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n        (click)=\"saveFile()\">\r\n        {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/card-checklist.svg\" alt=\"licenses\" class=\"me-2\" width=\"18\" height=\"18\" />Licenses</h3>\r\n    <p class=\"preview-subtitle\">Review your licenses below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#lic_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.documentTypeName }}</span>\r\n            <span class=\"preview-acc-meta\">Issued by {{ exp.issuedBy }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'lic_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Name</span>\r\n              <span class=\"preview-value\">{{ exp.documentTypeName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">License Number</span>\r\n              <span class=\"preview-value\">{{ exp.number || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued By</span>\r\n              <span class=\"preview-value\">{{ exp.issuedBy || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued State</span>\r\n              <span class=\"preview-value\">{{ exp.issuedState | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Issued Date</span>\r\n              <span class=\"preview-value\">{{ exp.issueDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Expiry Date</span>\r\n              <span class=\"preview-value\">{{ exp.expiryDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Description</span>\r\n            <span class=\"preview-value\">{{ exp.notes || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Licenses</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input[type=text],input[type=email],input[type=number],input[type=password],select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input[type=text]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input[type=text]::placeholder,input[type=email]::placeholder,input[type=number]::placeholder,input[type=password]::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input[type=text].is-invalid,input[type=email].is-invalid,input[type=number].is-invalid,input[type=password].is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 100px 20px}.action{display:flex;justify-content:space-between;margin:48px 0 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.document-container{max-width:1100px;margin:auto}.search-part{width:100%;max-width:400px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;height:42px;background:#f9fafb;transition:all .2s ease}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none;height:100%;padding:0}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;min-width:unset;display:flex;align-items:center;justify-content:center;border:none;cursor:pointer;transition:all .2s ease}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.search-input{width:100%;max-width:400px;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box;outline:none;margin-bottom:16px}.search-input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.search-input::placeholder{color:#94a3b8}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.card{display:flex;align-items:center;min-height:48px}.checkbox{margin-top:4px;accent-color:#4077AD}.checkbox-row{display:flex;align-items:center;gap:8px;cursor:pointer;background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 12px;transition:all .2s ease;width:100%}.checkbox-row:hover{border-color:#4077ad;background:#ebf2f9}.checkbox-row input{margin:0;accent-color:#4077AD}.content .title{font-weight:600;font-size:14px;color:#1e293b}.title{font-size:14px;font-weight:600;color:#1e293b}.content .desc{font-size:12px;color:#94a3b8;margin-top:4px}.save-btn{height:42px;margin-top:20px;padding:10px 22px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.edit-icon{cursor:pointer}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}@media (max-width: 1024px){.grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 600px){.grid{grid-template-columns:1fr}.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.hint{margin-bottom:7px}.date-time-filter{font-size:14px}.search-input{margin-bottom:0;max-width:100%}.right-actions{gap:8px}.detail-grid{grid-template-columns:1fr}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.actions{flex-direction:column-reverse;gap:8px;margin:48px 0 20px}.right-actions{gap:8px;flex-direction:column-reverse}.add-btn{width:unset}.action{display:flex;flex-direction:column-reverse;gap:8px}button{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: UserDocumentService }, { type: UserService }, { type: i1$1.RoleContextService }, { type: CredentialingStore }, { type: LicenseStore }, { type: i1$1.TokenService }, { type: PostalCodeServices }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -9000,7 +9038,7 @@ class ToolsComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToolsComponent, deps: [{ token: ToolService }, { token: UserToolService }, { token: i8.UntypedFormBuilder }, { token: UserService }, { token: UtilsService }, { token: CredentialingStore }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: UserDetailService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName", signatureUrl: "signatureUrl", signatureFileId: "signatureFileId" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" class=\"me-2\" width=\"18\" height=\"18\" />Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteToolFromPreview(tool, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"preview-detail-grid\">\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Service Provider</span>\r\n              <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Tools / Equipment</span>\r\n              <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Manufacturer</span>\r\n              <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Model</span>\r\n              <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Serial Number</span>\r\n              <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Years of Experience</span>\r\n              <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Self Ability Rating</span>\r\n              <span class=\"preview-value stars-readonly\">\r\n                <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Active</span>\r\n              <span class=\"preview-value\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell preview-full\">\r\n              <span class=\"preview-label\">Description</span>\r\n              <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"openDashboardModal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n  <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"dashboard-modal-icon\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n        <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n    <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n    <p class=\"dashboard-modal-message\">\r\n      Your profile setup is complete. All your information has been saved successfully.\r\n      Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n    </p>\r\n    <div class=\"dashboard-modal-actions\">\r\n      <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n      <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n        (click)=\"closeDashboardModal(); saveFinal()\">\r\n        Go to Dashboard\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\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: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToolsComponent, isStandalone: false, selector: "app-tools", inputs: { roleData: "roleData", providerId: "providerId", providerName: "providerName", signatureUrl: "signatureUrl", signatureFileId: "signatureFileId" }, ngImport: i0, template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" class=\"me-2\" width=\"18\" height=\"18\" />Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteToolFromPreview(tool, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"preview-detail-grid\">\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Service Provider</span>\r\n              <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Tools / Equipment</span>\r\n              <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Manufacturer</span>\r\n              <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Model</span>\r\n              <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Serial Number</span>\r\n              <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Years of Experience</span>\r\n              <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Self Ability Rating</span>\r\n              <span class=\"preview-value stars-readonly\">\r\n                <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Active</span>\r\n              <span class=\"preview-value\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell preview-full\">\r\n              <span class=\"preview-label\">Description</span>\r\n              <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\">\r\n        <div class=\"tool-chips\" [ngStyle]=\"showLoader ? {'min-height': '120px'} : {}\">\r\n          <label class=\"tool-chip\" *ngFor=\"let Tool of tools\"\r\n            [class.selected]=\"Tool.selected\"\r\n            [attr.for]=\"Tool.id\">\r\n            <input type=\"checkbox\" [checked]=\"Tool.selected\"\r\n              (change)=\"onSelectedTools($event, Tool)\"\r\n              [id]=\"Tool.id\" [name]=\"Tool.id\" />\r\n            <svg *ngIf=\"Tool.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n              <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            {{ Tool.name }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n      <button *ngIf=\"userToolsPreview.length === 0\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n        (click)=\"openDashboardModal()\" class=\"float-end save-btn ms-2\">\r\n        Go To Dashboard\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"openDashboardModal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n  <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"dashboard-modal-icon\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n        <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n    <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n    <p class=\"dashboard-modal-message\">\r\n      Your profile setup is complete. All your information has been saved successfully.\r\n      Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n    </p>\r\n    <div class=\"dashboard-modal-actions\">\r\n      <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n      <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n        (click)=\"closeDashboardModal(); saveFinal()\">\r\n        Go to Dashboard\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tool-chips-wrapper{margin:8px 0 4px}.content-part .tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .tool-chip input[type=checkbox]{display:none}.content-part .tool-chip .chip-check-icon{flex-shrink:0}.content-part .tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\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: i11.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "component", type: NgxStarsComponent, selector: "ngx-stars", inputs: ["maxStars", "initialStars", "readonly", "size", "color", "animation", "animationSpeed", "customPadding", "wholeStars", "customStarIcons"], outputs: ["ratingOutput"] }, { kind: "directive", type: i14.TooltipDirective, selector: "[tooltip], [tooltipHtml]", inputs: ["adaptivePosition", "tooltip", "placement", "triggers", "container", "containerClass", "boundariesElement", "isOpen", "isDisabled", "delay", "tooltipHtml", "tooltipPlacement", "tooltipIsOpen", "tooltipEnable", "tooltipAppendToBody", "tooltipAnimation", "tooltipClass", "tooltipContext", "tooltipPopupDelay", "tooltipFadeDuration", "tooltipTrigger"], outputs: ["tooltipChange", "onShown", "onHidden", "tooltipStateChanged"], exportAs: ["bs-tooltip"] }, { kind: "directive", type: i13.TabDirective, selector: "tab, [tab]", inputs: ["heading", "id", "disabled", "removable", "tabOrder", "customClass", "active"], outputs: ["selectTab", "deselect", "removed"], exportAs: ["tab"] }, { kind: "component", type: i13.TabsetComponent, selector: "tabset", inputs: ["vertical", "justified", "type"] }, { kind: "directive", type: i13.TabHeadingDirective, selector: "[tabHeading]" }, { kind: "component", type: i14$1.AccordionComponent, selector: "accordion", inputs: ["isAnimated", "closeOthers"] }, { kind: "component", type: i14$1.AccordionPanelComponent, selector: "accordion-group, accordion-panel", inputs: ["heading", "panelClass", "isDisabled", "isOpen"], outputs: ["isOpenChange"] }], animations: [
             trigger('expandCollapse', [
                 state('open', style({
                     height: '*',
@@ -9038,7 +9076,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                             })),
                             transition('open <=> closed', animate('300ms ease'))
                         ])
-                    ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" class=\"me-2\" width=\"18\" height=\"18\" />Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteToolFromPreview(tool, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"preview-detail-grid\">\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Service Provider</span>\r\n              <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Tools / Equipment</span>\r\n              <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Manufacturer</span>\r\n              <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Model</span>\r\n              <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Serial Number</span>\r\n              <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Years of Experience</span>\r\n              <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Self Ability Rating</span>\r\n              <span class=\"preview-value stars-readonly\">\r\n                <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Active</span>\r\n              <span class=\"preview-value\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell preview-full\">\r\n              <span class=\"preview-label\">Description</span>\r\n              <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"col tools-section\" [ngClass]=\"showLoading ? 'loader':''\">\r\n        <div class=\"row mt-2\" [ngStyle]=\"showLoader ? {'min-height': '150px'} : {}\">\r\n          <div class=\"col-12 col-md-4\" *ngFor=\"let Tool of tools\">\r\n            <div class=\"mt-2 d-flex\">\r\n              <input (change)=\"onSelectedTools($event, Tool)\" [checked]=\"Tool.selected == true\" id=\"{{ Tool.id }}\"\r\n                name=\"{{ Tool.id }}\" type=\"checkbox\" />\r\n              <label class=\"text-title\" for=\"{{ Tool.id }}\">\r\n                {{ Tool.name }}</label>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"openDashboardModal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n  <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"dashboard-modal-icon\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n        <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n    <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n    <p class=\"dashboard-modal-message\">\r\n      Your profile setup is complete. All your information has been saved successfully.\r\n      Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n    </p>\r\n    <div class=\"dashboard-modal-actions\">\r\n      <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n      <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n        (click)=\"closeDashboardModal(); saveFinal()\">\r\n        Go to Dashboard\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: ["@charset \"UTF-8\";.tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tools-section{margin-left:5px}.content-part .tools-section .category-title{margin-bottom:8px;font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-left:5px}.content-part .tools-section .text-title{font-size:14px;margin-left:3px;color:#1e293b}.content-part .tools-section input[type=checkbox]{border:1.5px solid #e2e8f0!important;height:14px!important;width:15px!important;border-radius:6px!important;margin:2px;accent-color:#4077AD}.content-part .tools-section input[type=checkbox]:checked{background-color:#4077ad!important;border:1.5px solid #4077AD!important}.content-part .tools-section input[type=checkbox]:checked:after{content:\"\\2713\";color:#fff;font-size:11px;position:relative;left:50%;bottom:-7px;transform:translate(-50%,-50%);font-weight:900;background:#4077ad;width:15px;display:flex;justify-content:center;border:1.5px solid #4077AD;height:14px;align-items:center;border-radius:6px}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"] }]
+                    ], template: "<!-- Tool PREVIEW LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n  <h5 class=\"title text-secondary\"><img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" class=\"me-2\" width=\"18\" height=\"18\" />Tools Preview</h5>\r\n  <!-- <p class=\"subtitle\">Add Tools</p> -->\r\n  <accordion [closeOthers]=\"true\" [isAnimated]=\"true\">\r\n    <accordion-group *ngFor=\"let tool of userToolsPreview\" #accGroup (isOpenChange)=\"onAccordionChange(tool, $event)\">\r\n      <div accordion-heading class=\"skill-preview-header d-flex justify-content-between align-items-center\">\r\n        <span class=\"fw-semibold text-secondary\">\r\n          {{ tool.toolName }}\r\n        </span>\r\n        <div class=\"d-flex align-items-center gap-2\">\r\n          <!-- EDIT MODE BUTTONS -->\r\n          <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool); else viewActions\">\r\n            <button class=\"back-btn edit me-3\" type=\"button\" (click)=\"backTool(accGroup)\">\r\n              Cancel\r\n            </button>\r\n            <button class=\"continue-btn edit\" type=\"button\" (click)=\"saveUserTools()\" \r\n              [disabled]=\"showLoader\">\r\n              Update\r\n            </button>\r\n          </ng-container>\r\n          <!-- VIEW MODE ACTIONS -->\r\n          <ng-template #viewActions>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"editToolFromPreview(tool, accGroup, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/edit-text.png\" />\r\n            </button>\r\n            <button type=\"button\" class=\"me-3\" (click)=\"deleteToolFromPreview(tool, $event)\">\r\n              <img class=\"icon-color\" src=\"/assets/images/icons/delete.png\" alt=\"Delete\" />\r\n            </button>\r\n            <!-- Arrow (ngx controls click) -->\r\n            <img class=\"icon-color edit\" src=\"/assets/images/icons/arrow-down.svg\" alt=\"icon\"\r\n              [class.rotate]=\"accGroup.isOpen\" />\r\n          </ng-template>\r\n        </div>\r\n      </div>\r\n      <!-- BODY -->\r\n      <div class=\"skill-preview-body content-part\">\r\n        <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n          <div class=\"preview-detail-grid\">\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Service Provider</span>\r\n              <span class=\"preview-value\">{{ tool.providerName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Tools / Equipment</span>\r\n              <span class=\"preview-value\">{{ tool.toolName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Manufacturer</span>\r\n              <span class=\"preview-value\">{{ tool.make || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Model</span>\r\n              <span class=\"preview-value\">{{ tool.model || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Serial Number</span>\r\n              <span class=\"preview-value\">{{ tool.serialNumber || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Years of Experience</span>\r\n              <span class=\"preview-value\">{{ tool.year || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Self Ability Rating</span>\r\n              <span class=\"preview-value stars-readonly\">\r\n                <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell\">\r\n              <span class=\"preview-label\">Active</span>\r\n              <span class=\"preview-value\">\r\n                <input type=\"checkbox\" class=\"form-check-input\" [checked]=\"tool.profileVisibility\" disabled>\r\n              </span>\r\n            </div>\r\n            <div class=\"preview-cell preview-full\">\r\n              <span class=\"preview-label\">Description</span>\r\n              <span class=\"preview-value\">{{ tool.notes || '\u2014' }}</span>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n        <!-- Edit Mode -->\r\n        <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n          <div class=\"row g-3\">\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Service Provider</label>\r\n              <div class=\"value\">{{ tool.providerName }}</div>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Manufacturer</label> <br />\r\n              <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Years of Experience</label>\r\n              <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\" formControlName=\"year\"\r\n                [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\">\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Self Ability Rating</label>\r\n              <ngx-stars [initialStars]=\"(tab.at(0).get('starRating')?.value || 0) / 2\" [maxStars]=\"5\"\r\n                (ratingOutput)=\"onRatingSets($event)\">\r\n              </ngx-stars>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Active</label><br />\r\n              <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Tools / Equipment</label>\r\n              <input class=\"form-control\" [value]=\"tool.toolName\" readonly>\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Model</label>\r\n              <input class=\"form-control\" formControlName=\"model\">\r\n            </div>\r\n            <div class=\"col-lg-3 col-md-4 col-sm-6 col-12\">\r\n              <label>Serial Number</label>\r\n              <input class=\"form-control\" formControlName=\"serialNumber\">\r\n            </div>\r\n            <div class=\"col-12\">\r\n              <label>Description</label>\r\n              <textarea class=\"form-control\" rows=\"2\" formControlName=\"notes\"></textarea>\r\n            </div>\r\n          </div>\r\n        </ng-container>\r\n      </div>\r\n    </accordion-group>\r\n  </accordion>\r\n</div>\r\n\r\n<!-- Tool LIST -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n  <h3 class=\"text-secondary\">Add Tools</h3>\r\n  <p class=\"info\">Manage specialty tools and equipment</p>\r\n  <div class=\"content-part\">\r\n    <h6 class=\"text-secondary\"> Add User Tool</h6>\r\n    <div class=\"sub-section\">\r\n      <div class=\"row mt-2\">\r\n        <div class=\"col-12 col-md-12 col-sm-12 ps-lg-0\">\r\n          <div class=\"search-part\" *ngIf=\"!isEditMode\">\r\n            <input type=\"text\" placeholder=\"Search / Add Tools here\" [(ngModel)]=\"searchToolQry\" (input)=\"getTools()\" />\r\n            <button class=\"btn\" (click)=\"createNewTools()\" tooltip=\"Add Tool\">\r\n              <img src=\"/assets/images/icons/plus.svg\" alt=\"search\" class=\"create-plus\" width=\"18px\" height=\"18px\" />\r\n            </button>\r\n          </div>\r\n          <div *ngIf=\"!searchToolQry && toolSubmittedValue\" class=\"invalid-feedback is-invalid d-block\">\r\n            Please Enter Tools Name\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">\r\n        {{ nameError }}\r\n      </div>\r\n      <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\">\r\n        <div class=\"tool-chips\" [ngStyle]=\"showLoader ? {'min-height': '120px'} : {}\">\r\n          <label class=\"tool-chip\" *ngFor=\"let Tool of tools\"\r\n            [class.selected]=\"Tool.selected\"\r\n            [attr.for]=\"Tool.id\">\r\n            <input type=\"checkbox\" [checked]=\"Tool.selected\"\r\n              (change)=\"onSelectedTools($event, Tool)\"\r\n              [id]=\"Tool.id\" [name]=\"Tool.id\" />\r\n            <svg *ngIf=\"Tool.selected\" class=\"chip-check-icon\" width=\"11\" height=\"11\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n              <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            {{ Tool.name }}\r\n          </label>\r\n        </div>\r\n      </div>\r\n      <div [ngClass]=\"{ 'loader': showLoading,'pt-3': !showLoading,'edit-mode': isEditMode}\">\r\n        <tabset #tabSet>\r\n          <tab (selectTab)=\"setTabGroup(group)\" *ngFor=\"let group of tab?.controls; let index = index\"\r\n            [label]=\"tabs[index]\" tab1 id=\"{{ tabs[index] }}\" #{{tabs[index]}}>\r\n            <ng-template tabHeading *ngIf=\"!isEditMode\">\r\n              <span class=\"text-secondary\">{{ tabs[index] }}</span>\r\n              <button class=\"btn btn-sm\" (click)=\"removeTab(index, group.controls.toolId.value)\">\r\n                <img src=\"/assets/images/icons/close-x-mark.svg\" alt=\"search\" width=\"16px\" height=\"16px\" />\r\n              </button>\r\n            </ng-template>\r\n            <div [formGroup]=\"group\" class=\"tab-card\">\r\n              <div class=\"card-body mt-3 position-relative\">\r\n                <div class=\"col-12 col-md-3 mt-1 copyAll\" *ngIf=\"\r\n                          tab.controls.length > 1 && index == copyOptionIndex\r\n                        \">\r\n                  <label class=\"label\">Copy to All Tabs</label>\r\n                  <input class=\"form-check-input\" type=\"checkbox\" (click)=\"setCopyToAllTabs(index, group.value,viewTab)\"\r\n                    role=\"switch\" />\r\n                </div>\r\n                <div class=\"row\" [ngClass]=\"index == 0 && tab.controls.length > 1 ? 'mt-5' : '' \">\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Self-ability Rating</label>\r\n                    <ngx-stars [initialStars]=\"initialStarts\" (ratingOutput)=\"onRatingSet($event,index)\"\r\n                      [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.starRating.errors }\" [maxStars]=\"5\">\r\n                    </ngx-stars>\r\n                    <div *ngIf=\"userToolSubmitted && k.starRating.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid':\r\n                                userToolSubmitted && k.starRating.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.starRating.errors.required\">\r\n                        Star Rating is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-2 mt-1\">\r\n                    <label class=\"label\">Profile Visibility</label><br />\r\n                    <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Years of Experience</label>\r\n                    <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n                      formControlName=\"year\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\" bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n                      id=\"reqStates\"></ng-select>\r\n\r\n                    <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.year.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.year.errors.required\">\r\n                        Year is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Manufacturer</label>\r\n                    <input id=\"make\" formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Manufacturer here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.make.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.make.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.make.errors.required\">\r\n                        Manufacturer is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n                </div>\r\n                <div class=\"row pt-2\">\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Model</label>\r\n                    <input id=\"model\" formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Model here\"  (change)=\"onYearChange(group)\" />\r\n                    <!-- <div *ngIf=\"userToolSubmitted && k.model.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.model.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.model.errors.required\">\r\n                        Model is required\r\n                      </div>\r\n                    </div> -->\r\n                  </div>\r\n\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\" label\">Serial Number</label>\r\n                    <input id=\"serialNumber\" formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n                      placeholder=\"Enter Serial Number here\"  />\r\n                  </div>\r\n                  <div class=\"col-12 col-md-4 mt-1\">\r\n                    <label class=\"label\">Comment</label>\r\n                    <textarea placeholder=\"Enter your comment here\" formControlName=\"notes\" class=\"form-control\"\r\n                      [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\" rows=\"2\"></textarea>\r\n                    <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback\" [ngClass]=\"{\r\n                              'is-invalid': userToolSubmitted && k.notes.errors\r\n                            }\">\r\n                      <div *ngIf=\"k.notes.errors.required\">\r\n                        Description is required\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </tab>\r\n        </tabset>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div class=\"tools-container last pt-5 mt-5\">\r\n    <div *ngIf=\"store.toolStepView() === 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"cancel()\">Cancel</button>\r\n    <div class=\"mob-view\">\r\n      <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\"\r\n        [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n      <button *ngIf=\"userToolsPreview.length === 0\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n        (click)=\"openDashboardModal()\" class=\"float-end save-btn ms-2\">\r\n        Go To Dashboard\r\n      </button>\r\n    </div>\r\n  </div>\r\n  <div *ngIf=\"store.toolStepView() !== 'add'\" class=\"d-flex justify-content-between pt-3 mob-res\">\r\n    <!-- (click)=\"reset()\" -->\r\n    <button class=\"back-btn\" (click)=\"goBack()\">Back</button>\r\n    <div class=\"mob-view\">\r\n      <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n        Add More Tools\r\n      </button>\r\n      <button [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\" (click)=\"openDashboardModal()\"\r\n        class=\"float-end save-btn\">\r\n        Go To Dashboard\r\n      </button>\r\n      <button (click)=\"onToolContinue()\" *ngIf=\"store.toolStepView() === 'add'\"  [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\" class=\"float-end save-btn\">\r\n        Add\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Dashboard Confirmation Modal -->\r\n<div class=\"dashboard-modal-overlay\" *ngIf=\"showDashboardModal\" (click)=\"closeDashboardModal()\">\r\n  <div class=\"dashboard-modal\" (click)=\"$event.stopPropagation()\">\r\n    <div class=\"dashboard-modal-icon\">\r\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n        <circle cx=\"12\" cy=\"12\" r=\"11\" stroke=\"#22c55e\" stroke-width=\"1.5\"/>\r\n        <path d=\"M7 12.5l3.5 3.5 6.5-7\" stroke=\"#22c55e\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n      </svg>\r\n    </div>\r\n    <h3 class=\"dashboard-modal-title\">All Information Saved!</h3>\r\n    <p class=\"dashboard-modal-message\">\r\n      Your profile setup is complete. All your information has been saved successfully.\r\n      Clicking <strong>Go to Dashboard</strong> will take you to your dashboard.\r\n    </p>\r\n    <div class=\"dashboard-modal-actions\">\r\n      <button type=\"button\" class=\"modal-cancel-btn\" (click)=\"closeDashboardModal()\">Cancel</button>\r\n      <button type=\"button\" class=\"modal-confirm-btn\" [disabled]=\"homeLoader\" [ng2-loading]=\"homeLoader\"\r\n        (click)=\"closeDashboardModal(); saveFinal()\">\r\n        Go to Dashboard\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".tools-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.tools-container.last{min-height:unset}.tools-container h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.tools-container .info{font-size:14px;color:#64748b;margin-bottom:24px}.content-part{background:#fff}.content-part p{font-size:13px;color:#64748b}.content-part div{font-size:14px}.content-part div .label{font-size:12px!important;font-weight:700!important;color:#64748b!important;text-transform:uppercase;letter-spacing:.05em;padding-bottom:6px!important}.content-part .row{margin-top:-15px}.content-part .sub-section{padding:0 10px}.content-part .sub-section .title{font-size:15px;font-weight:500;color:#1e293b}.content-part .sub-section .info-title{font-size:12px;font-weight:400;color:#64748b;margin-left:5px}.content-part .sub-section .content{font-size:13px;color:#64748b}.content-part .sub-section .subsection{font-weight:600;padding-top:10px;font-size:12px;color:#64748b}.content-part .sub-section .subsection input{width:30%}.content-part .sub-section .icon{width:35px;filter:opacity(.5)}.content-part .tab-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;color:#1e293b}.content-part .tab-card .row{margin-top:2px}.content-part .search-part{width:100%;height:42px;position:relative;border-radius:8px;border:1.5px solid #e2e8f0;padding:0 0 0 14px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;background:#f9fafb;transition:all .2s ease}.content-part .search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.content-part .search-part input::placeholder{color:#94a3b8}.content-part .search-part .btn{background:#4077ad;border-radius:0 8px 8px 0;padding:0;width:42px;height:40px;display:flex;align-items:center;justify-content:center;margin-right:0;border:none;cursor:pointer;transition:all .2s ease}.content-part .search-part .btn:hover{background:#2d5a8a}.content-part .search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}.content-part textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:15px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}.content-part textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.content-part .tool-chips-wrapper{margin:8px 0 4px}.content-part .tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.content-part .tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:20px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4}.content-part .tool-chip input[type=checkbox]{display:none}.content-part .tool-chip .chip-check-icon{flex-shrink:0}.content-part .tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.content-part .tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.content-part .form-check-input{width:43px;height:21px;margin:0 5px;background-color:#c7c7c7!important;background-image:url(/assets/images/icons/toogle-circle.svg);background-position:left 4px top 2px;background-size:15px;border:1px solid #c7c7c7;outline:none!important;box-shadow:none!important;border-radius:25px;cursor:pointer}.content-part .form-check-input:checked{background-position:right 4px top 2px;background-image:url(/assets/images/icons/toogle-circle.svg);background-color:#22c55e!important;border:1px solid #22c55e!important}.copyAll{position:absolute;right:0;text-align:end;top:-40px}.close-popup{position:absolute;right:7px;top:4px;width:25px;cursor:pointer;opacity:.6;transition:all .2s ease}.close-popup:hover{opacity:1}.form-control{color:#1e293b;background:#f9fafb!important;font-size:15px;height:42px;border:1.5px solid #e2e8f0;border-radius:8px;transition:all .2s ease}.form-control:focus{border-color:#4077ad;background:#fff!important;box-shadow:0 0 0 3px #4077ad1f!important}.form-control:focus{border:1.5px solid #4077AD;box-shadow:0 0 0 3px #4077ad1f}::ng-deep .nav-link{color:#64748b!important}::ng-deep .nav-link.active{color:#4077ad!important;font-weight:600}.loader{filter:blur(3px)}.edit-mode ::ng-deep .nav-tabs{display:none!important}::ng-deep accordion-group+accordion-group{margin-top:20px}.back-btn{height:42px;min-width:130px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#2d5a8a;color:#fff;border:none}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;margin-left:15px}.save-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.save-btn:active{transform:translateY(0)}.save-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.create-btn{height:42px;min-width:9rem;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 18px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.create-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.create-btn:active{transform:translateY(0)}.continue-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.continue-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.continue-btn:active{transform:translateY(0)}.continue-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.skill-preview-card{border:1px solid #e2e8f0;border-radius:12px;margin-bottom:16px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden;background:#fff;transition:box-shadow .25s ease}.skill-preview-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a}.skill-preview-header{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;background:#fff;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid transparent;cursor:pointer}.skill-preview-header.open{background:#ebf2f9;color:#2d5a8a;border-bottom:1px solid #e2e8f0}.skill-preview-body{padding:0;background:#fff}.skill-preview-body label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.skill-preview-body .value{font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word}h5.title{font-size:22px;font-weight:700;color:#1e293b!important;margin-bottom:4px}.preview-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.preview-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0;border-right:1px solid #e2e8f0}.preview-cell:nth-child(3n){border-right:none}.preview-full{grid-column:1/-1;border-right:none;border-bottom:none}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.stars-readonly{pointer-events:none;display:block}.action-btns{display:flex;justify-content:space-between;align-items:center}.actions{display:flex;justify-content:flex-end;gap:12px;margin-top:16px}.actions button{height:42px;padding:10px 22px;border:none;border-radius:8px;font-size:14px;transition:all .2s ease;font-weight:600;min-width:120px;cursor:pointer}.actions .secondary{color:#64748b;background:#fff;border:1.5px solid #e2e8f0}.actions .secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.actions .primary{background:#4077ad;color:#fff}.actions .primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.actions .primary:active{transform:translateY(0)}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .2s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.icon-color.rotate{transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 450px){.modal-content .close-popup{width:16px}}@media (max-width: 600px){.actions{flex-direction:column;align-items:stretch}.actions button{width:100%}}@media screen and (max-width: 767px){.tools-container h3{font-size:18px}.form-control,textarea{font-size:16px}.tools-container{padding:16px}.tools-container .mob-view{display:flex;justify-content:space-between;flex-direction:column-reverse;gap:8px}.tools-container .mob-res{flex-direction:column-reverse;gap:8px}.footer-actions{flex-direction:column-reverse;gap:8px;margin-top:48px}.continue-btn{padding:10px 22px;width:100%}.back-btn{width:100%}.save-btn{padding:10px 15px;width:unset;margin-left:0!important}.preview-detail-grid{grid-template-columns:1fr}.preview-cell{border-right:none}}.dashboard-modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;align-items:center;justify-content:center;z-index:1050;animation:fadeInOverlay .2s ease}@keyframes fadeInOverlay{0%{opacity:0}to{opacity:1}}.dashboard-modal{background:#fff;border-radius:12px;padding:40px 36px 32px;max-width:440px;width:90%;text-align:center;box-shadow:0 20px 60px #0000002e;animation:slideUpModal .25s ease}@keyframes slideUpModal{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.dashboard-modal-icon{display:flex;justify-content:center;margin-bottom:20px}.dashboard-modal-icon svg{width:56px;height:56px}.dashboard-modal-title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:12px}.dashboard-modal-message{font-size:14px;color:#64748b;line-height:1.6;margin-bottom:28px}.dashboard-modal-actions{display:flex;gap:12px;justify-content:center}.modal-cancel-btn{height:42px;min-width:110px;border-radius:8px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.modal-confirm-btn{height:42px;min-width:150px;border-radius:8px;border:none;background:#4077ad;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-confirm-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.modal-confirm-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}\n"] }]
         }], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: UserDetailService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [LIBRARY_CONFIG]
@@ -10047,11 +10085,11 @@ class RoleSelectComponent {
         this.store.previousStep();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, deps: [{ token: CredentialingStore }, { token: ProvidersService }, { token: UserService }, { token: UserDocumentService }, { token: i2.Router }, { token: IndustryService }, { token: UserDetailService }, { token: FileService }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: FrontEndProvidersService }, { token: i8.FormBuilder }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent", providerSaved: "providerSaved" }, ngImport: i0, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1*</label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State*</label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number*</label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience*</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title*</label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name*</label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number*</label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n              ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeCompany($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.address1.invalid && (c.address1.touched || c.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country*</label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo*</label>\r\n              <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1*</label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State*</label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number*</label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience*</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title*</label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#94a3b8}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#94a3b8}.form-control.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#f8fafc}.role-selection-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#64748b;margin-bottom:20px}.role-selection-container .note-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#f8fafc}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#64748b;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RoleSelectComponent, isStandalone: false, selector: "app-role-select", inputs: { roleData: "roleData", cloudfrontUrl: "cloudfrontUrl", providerId: "providerId", providerName: "providerName" }, outputs: { backToParent: "backToParent", providerSaved: "providerSaved" }, ngImport: i0, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n              ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeCompany($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.address1.invalid && (c.address1.touched || c.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#94a3b8}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#94a3b8}.form-control.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#64748b;margin-bottom:20px}.role-selection-container .note-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#64748b;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i8.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "directive", type: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RoleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1*</label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State*</label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number*</label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience*</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title*</label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name*</label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number*</label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n              ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeCompany($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.address1.invalid && (c.address1.touched || c.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country*</label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo*</label>\r\n              <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name*</label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email*</label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1*</label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State*</label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country*</label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number*</label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience*</label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title*</label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#94a3b8}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#94a3b8}.form-control.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#f8fafc}.role-selection-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#64748b;margin-bottom:20px}.role-selection-container .note-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#f8fafc}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#64748b;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button{width:100%}}\n"] }]
+            args: [{ selector: 'app-role-select', standalone: false, template: "<div class=\"role-selection-container\" [class.provider-layout]=\"roleData?.role?.name === 'Provider'\">\r\n\r\n  <!-- NON-PROVIDER LAYOUT -->\r\n  <ng-container *ngIf=\"roleData?.role?.name !== 'Provider'\">\r\n    <h2>Basic Details</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n  </ng-container>\r\n\r\n  <!-- PROVIDER LAYOUT: one card with Business Information + User Information -->\r\n  <ng-container *ngIf=\"roleData?.role?.name === 'Provider'\">\r\n\r\n    <!-- Business Information -->\r\n    <h2>Business Information</h2>\r\n    <p class=\"note\">We need company information</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"companyForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  c.companyName.invalid && (c.companyName.touched || c.companyName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"Company Name\" formControlName=\"companyName\" id=\"companyName\">\r\n            <div *ngIf=\" c.companyName.invalid &&\r\n        (c.companyName.touched || c.companyName.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyName.errors.required\">\r\n                Company Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Company Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control block shadow-none\" id=\"inputPhone\" name=\"inputPhone\"\r\n              placeholder=\"Phone Number\" autocomplete=\"off\" formControlName=\"companyPhoneNumber\" maxlength=\"14\"\r\n              (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.companyPhoneNumber.invalid &&\r\n          (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.companyPhoneNumber.invalid &&\r\n        (c.companyPhoneNumber.touched || c.companyPhoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.companyPhoneNumber.errors?.required\">\r\n                Company Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\"\r\n              ngx-google-places-autocomplete [options]=\"options\" (onAddressChange)=\"AddressChangeCompany($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.address1.invalid && (c.address1.touched || c.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.address1.invalid &&\r\n        (c.address1.touched || c.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.city.invalid && (c.city.touched || c.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.city.invalid &&\r\n        (c.city.touched || c.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.state.invalid && (c.state.touched || c.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.state.invalid &&\r\n        (c.state.touched || c.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          c.zipcode.invalid && (c.zipcode.touched || c.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.zipcode.invalid &&\r\n        (c.zipcode.touched || c.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"c.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"d-flex flex-wrap justify-content-between row\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n              <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n                [ngClass]=\"{\r\n        'is-invalid':\r\n          c.country.invalid && (c.country.touched || c.country.dirty)\r\n      }\" />\r\n              <div class=\"invalid-feedback\" *ngIf=\"\r\n        c.country.invalid &&\r\n        (c.country.touched || c.country.dirty)\r\n      \">\r\n                <div class=\"ms-1\" *ngIf=\"c.country.errors?.required\">\r\n                  Country is required\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n              <label class=\"note-label mb-2\">Company Logo</label>\r\n              <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploacompanyImage($event)\" class=\"d-none\" />\r\n              <input [(ngModel)]=\"fileNameCompany\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\"\r\n                class=\"form-control pe-5\" placeholder=\"Upload Company Logo\" (click)=\"uploadFile.click()\" />\r\n              <img *ngIf=\"!isLogoLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n              <div *ngIf=\"isLogoLoading\" class=\"upload-spinner\">\r\n                <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n              </div>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewCompanyUrl\" [src]=\"previewCompanyUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <!-- User Information -->\r\n    <h2 style=\"margin-top: 30px;\">User Information</h2>\r\n    <p class=\"note\">We need basic information and a headshot for your profile</p>\r\n    <div class=\"profile-field\">\r\n      <div *ngIf=\"!isLoaded\" class=\"text-center p-4\">\r\n        <div class=\"spinner-border\"></div>\r\n      </div>\r\n      <form *ngIf=\"isLoaded\" [formGroup]=\"userForm\" class=\"form pb-0\">\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">First Name<span class=\"req\">*</span></label>\r\n            <input [ngClass]=\"{ 'is-invalid':  u.firstName.invalid && (u.firstName.touched || u.firstName.dirty) }\"\r\n              type=\"text\" class=\"form-control\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n            <div *ngIf=\" u?.firstName?.invalid &&\r\n        (u?.firstName?.touched || u?.firstName?.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.firstName.errors.required\">\r\n                First Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2 mb-3\">Last Name<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\"\r\n              [ngClass]=\"{\r\n      'is-invalid':\r\n        u.lastName.invalid && (u.lastName.touched || u.lastName.dirty)\r\n    }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n      u.lastName.invalid &&\r\n      (u.lastName.touched || u.lastName.dirty)\r\n    \">\r\n              <div class=\"ms-1\" *ngIf=\"u.lastName.errors?.required\">\r\n                Last Name is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Email<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" placeholder=\"Email\" formControlName=\"email\" id=\"email\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.email.invalid && (u.email.touched || u.email.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.email.invalid &&\r\n        (u.email.touched || u.email.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.required\">\r\n                Email is required\r\n              </div>\r\n              <div class=\"ms-1\" *ngIf=\"u.email.errors?.email\">\r\n                Please enter a valid email address\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Home Address 1<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-address-view\" name=\"random-address-{{randomId}}\" class=\"form-control\"\r\n              placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete\r\n              [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.address1.invalid && (u.address1.touched || u.address1.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.address1.invalid &&\r\n        (u.address1.touched || u.address1.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.address1.errors?.required\">\r\n                Home Address 1 is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">City<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"City\" placeholder=\"City\" formControlName=\"city\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.city.invalid && (u.city.touched || u.city.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.city.invalid &&\r\n        (u.city.touched || u.city.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.city.errors?.required\">\r\n                City is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">State<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-state-view\" name=\"random-state-{{randomId}}\" class=\"form-control\"\r\n              id=\"State\" placeholder=\"State\" formControlName=\"state\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.state.invalid && (u.state.touched || u.state.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.state.invalid &&\r\n        (u.state.touched || u.state.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.state.errors?.required\">\r\n                State is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Zip Code<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\"\r\n              [textMask]=\"{ mask: zipcodeMask }\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.zipcode.invalid && (u.zipcode.touched || u.zipcode.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.zipcode.invalid &&\r\n        (u.zipcode.touched || u.zipcode.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.zipcode.errors?.required\">\r\n                Zipcode is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Country<span class=\"req\">*</span></label>\r\n            <input type=\"text\" class=\"form-control\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\"\r\n              [ngClass]=\"{\r\n        'is-invalid':\r\n          u.country.invalid && (u.country.touched || u.country.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.country.invalid &&\r\n        (u.country.touched || u.country.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.country.errors?.required\">\r\n                Country is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Phone Number<span class=\"req\">*</span></label>\r\n            <input type=\"text\" autocomplete=\"new-phone-view\" name=\"random-phone-{{randomId}}\"\r\n              class=\"form-control block shadow-none\" id=\"inputPhone\" placeholder=\"Phone Number\" autocomplete=\"off\"\r\n              formControlName=\"phoneNumber\" maxlength=\"14\" (input)=\"phoneMask($event)\" [ngClass]=\"{\r\n        'is-invalid':\r\n          u.phoneNumber.invalid &&\r\n          (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      }\" />\r\n            <div class=\"invalid-feedback\" *ngIf=\"\r\n        u.phoneNumber.invalid &&\r\n        (u.phoneNumber.touched || u.phoneNumber.dirty)\r\n      \">\r\n              <div class=\"ms-1\" *ngIf=\"u.phoneNumber.errors?.required\">\r\n                Phone Number is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n        <div class=\"d-flex flex-wrap justify-content-between row\">\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3\">\r\n            <label class=\"note-label mb-2\">Years of experience<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" [items]=\"expYears\" [searchable]=\"false\" [clearable]=\"false\" bindLabel=\"text\"\r\n              formControlName=\"yearsOfExperince\" [ngClass]=\"{ 'is-invalid':u?.yearsOfExperince?.errors }\"\r\n              bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Years of experience\"\r\n              id=\"yearsOfExperince\"></ng-select>\r\n            <div *ngIf=\" u.yearsOfExperince.invalid &&\r\n        (u.yearsOfExperince.touched || u.yearsOfExperince.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.yearsOfExperince.errors.required\">\r\n                Years Of Experience is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n            <label class=\"note-label mb-2\">Job Title<span class=\"req\">*</span></label>\r\n            <ng-select class=\"w-100\" class=\"custom-ng-select\" [items]=\"jobTitles\" bindLabel=\"text\" bindValue=\"value\"\r\n              [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"false\"\r\n              [ngClass]=\"{ 'is-invalid':u?.userJobTitle?.errors }\" id=\"userJobTitle\" [closeOnSelect]=\"false\"\r\n              placeholder=\"Select Job Titles\" formControlName=\"userJobTitle\">\r\n            </ng-select>\r\n            <div *ngIf=\" u.userJobTitle.invalid &&\r\n        (u.userJobTitle.touched || u.userJobTitle.dirty)\" class=\"invalid-feedback\">\r\n              <div class=\"ms-1\" *ngIf=\"u.userJobTitle.errors.required\">\r\n                Job title is required\r\n              </div>\r\n            </div>\r\n          </div>\r\n          <div class=\"form-group col-md-4 col-sm-12 mt-3 position-relative\">\r\n            <label class=\"note-label mb-2\">Profile image</label>\r\n            <input #uploadFile type=\"file\" accept=\"image/*\" (change)=\"uploadUserImage($event)\" class=\"d-none\" />\r\n            <input [(ngModel)]=\"fileName\" [ngModelOptions]=\"{ standalone: true }\" readonly type=\"text\" class=\"form-control pe-5\"\r\n              placeholder=\"Upload Profile Picture\" (click)=\"uploadFile.click()\" />\r\n            <img *ngIf=\"!isImageLoading\" src=\"assets/images/icons/upload.svg\" alt=\"Upload\" class=\"upload-icon\" (click)=\"uploadFile.click()\" />\r\n            <div *ngIf=\"isImageLoading\" class=\"upload-spinner\">\r\n              <span class=\"spinner-border spinner-border-sm text-primary\"></span>\r\n            </div>\r\n          </div>\r\n          <div class=\"res d-flex justify-content-between\">\r\n            <div class=\"form-group col-md-4 col-sm-12 mt-3 mb-2\">\r\n              <label class=\"note-label mb-2\">Industry</label>\r\n              <ng-select class=\"w-100 custom-ng-select\" formControlName=\"industries\" [items]=\"industries\"\r\n                [multiple]=\"true\" [searchable]=\"false\" [clearable]=\"true\" bindLabel=\"industryName\" bindValue=\"id\"\r\n                [closeOnSelect]=\"false\" id=\"industries\" placeholder=\"Select Industry\" [loading]=\"isIndustriesLoading\">\r\n                <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n                  <span class=\"form-check\">\r\n                    <span class=\"form-check-input-wrapper\">\r\n                      <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                    </span>\r\n                    {{ item.industryName }}\r\n                  </span>\r\n                </ng-template>\r\n                <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                  <span class=\"ng-value-label\">{{ item.industryName }}</span>\r\n                  <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                    <img src=\"/assets/images/icons/close-sm-circle.svg\" />\r\n                  </span>\r\n                </ng-template>\r\n              </ng-select>\r\n            </div>\r\n            <div class=\"form-group col-sm-12 col-md-4\">\r\n              <div class=\"image-wrapper\">\r\n                <img *ngIf=\"previewUrl\" [src]=\"cloudfrontUrl+previewUrl\" class=\"preview-image mt-2\" />\r\n              </div>\r\n              <div *ngIf=\"userError\" class=\"invalid-feedback\">\r\n                <div>{{ userError }}</div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n\r\n    <div class=\"actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n      <div class=\"right-actions\">\r\n        <button type=\"button\" class=\"primary ct-btn\"\r\n          [disabled]=\"showLoader || companyForm.invalid || userForm.invalid\"\r\n          [ng2-loading]=\"showLoader\"\r\n          (click)=\"saveFinal()\">\r\n          Continue\r\n        </button>\r\n      </div>\r\n    </div>\r\n\r\n  </ng-container>\r\n\r\n</div>\r\n", styles: [".provider-layout{display:flex;flex-direction:column}.provider-company-first{order:-1}.section-locked{pointer-events:none;opacity:.45;filter:blur(1.5px);-webkit-user-select:none;user-select:none}.preview-image{width:250px;height:100px;object-fit:contain;margin-top:5px;border-radius:8px;border:1px solid #e2e8f0}.upload-icon-resume{position:absolute;right:25px;top:17px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon-resume:hover{opacity:1}.upload-icon{position:absolute;right:25px;top:45px;width:18px;height:18px;cursor:pointer;opacity:.6;transition:all .2s ease}.upload-icon:hover{opacity:1}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{padding-top:3px;font-size:14px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{font-size:14px;color:#94a3b8}::ng-deep .custom-ng-select.ng-select-multiple .ng-select-container{min-height:42px!important;height:auto!important;display:flex;align-items:center;overflow:visible!important}::ng-deep .custom-ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap!important;overflow:visible!important;padding-top:2px;padding-bottom:2px}::ng-deep .custom-ng-select.ng-select-multiple .ng-value{margin-bottom:4px}::ng-deep .custom-ng-select.ng-select-multiple .ng-arrow-wrapper{display:flex;align-items:center;height:100%}:host ::ng-deep .custom-ng-select .ng-select-container{padding:0!important;font-size:13px!important}.form-control{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box}.form-control:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.form-control::placeholder{color:#94a3b8}.form-control.is-invalid{border-color:#ef4444}.role-selection-container{max-width:950px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.role-selection-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.role-selection-container .note{font-size:14px;color:#64748b;margin-bottom:20px}.role-selection-container .note-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding-left:0;display:block;margin-bottom:6px}.role-selection-container .note-label .req{color:#ef4444}.role-selection-container .dropdown-wrapper{display:flex;gap:8px;margin-bottom:16px}.role-selection-container .dropdown-wrapper select{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease}.role-selection-container .dropdown-wrapper select:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.role-selection-container .dropdown-wrapper .add-btn{height:42px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .dropdown-wrapper .add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .dropdown-wrapper .add-btn:active{transform:translateY(0)}.role-selection-container .dropdown-wrapper .add-btn:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.role-selection-container .selected-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}.role-selection-container .selected-roles .role-card{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-radius:8px;background:#ebf2f9;border:1px solid rgba(64,119,173,.2);color:#2d5a8a}.role-selection-container .selected-roles .role-card .remove-btn{background:none;border:none;font-size:1.1rem;font-weight:700;cursor:pointer;color:#ef4444;min-width:auto;height:auto;padding:0 4px;transition:all .2s ease}.role-selection-container .selected-roles .role-card .remove-btn:hover{opacity:.75}.role-selection-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.role-selection-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.role-selection-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.role-selection-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.role-selection-container .navigation-buttons .next:active{transform:translateY(0)}.role-selection-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.image-wrapper{position:relative;width:150px;height:150px}.resume-wrapper{position:relative;width:550px;height:1px}.upload-spinner{position:absolute;right:25px;top:45px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}.spinner-resume{width:36px;height:36px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;position:absolute;top:-32%;left:99%;margin-top:-51px;margin-left:-20px;animation:spin .8s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.profile-field{margin-top:-10px}.profile-field input{line-height:30px}.producer-type-container{max-width:1000px;margin:0 auto;min-height:300px;padding:28px 24px;background:#fff}.producer-type-container h2{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.producer-type-container p{font-size:14px;color:#64748b;margin-bottom:20px}.producer-type-container .job-list{display:flex;flex-direction:column;gap:8px;margin-bottom:24px}.producer-type-container .job-list .job-item{padding:12px 16px;font-size:15px;border:1.5px solid #e2e8f0;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;background:#fff;color:#1e293b;transition:all .2s ease;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .job-list .job-item:hover{border-color:#4077ad;background:#ebf2f9}.producer-type-container .job-list .job-item.selected{border-color:#4077ad;background:#ebf2f9;color:#2d5a8a;font-weight:600}.producer-type-container .job-list .job-item .plus{font-weight:700;color:#4077ad}.producer-type-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin:40px 0}.producer-type-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.producer-type-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.producer-type-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.producer-type-container .navigation-buttons .next:active{transform:translateY(0)}.producer-type-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}.actions{display:flex;justify-content:space-between;margin:48px 0 28px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}@media screen and (max-width: 767px){h2{font-size:18px}select,.form-control{font-size:16px}.actions{margin:16px 0;flex-direction:column-reverse;gap:8px}.res{flex-direction:column-reverse}.upload-spinner{right:20px;top:45px}.spinner-resume{width:24px;height:24px;top:-22%;left:32%}.ct-btn{width:100%;margin-top:32px}button{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: ProvidersService }, { type: UserService }, { type: UserDocumentService }, { type: i2.Router }, { type: IndustryService }, { type: UserDetailService }, { type: FileService }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: FrontEndProvidersService }, { type: i8.FormBuilder }], propDecorators: { backToParent: [{
                 type: Output
             }], providerSaved: [{
@@ -32645,11 +32683,11 @@ class Step2CoverageComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, deps: [{ token: CredentialingStore }, { token: UsMapLatestService }, { token: PostalCodeServices }, { token: UserCoverageAreaService }, { token: AlertService }, { token: i1$1.RoleContextService }, { token: i1$1.TokenService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName", states: "states" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\"><img src=\"/assets/images/icons/geo-alt.svg\" alt=\"coverage area\" class=\"me-2\" width=\"18\" height=\"18\" />Coverage Area</h4>\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n      <div class=\"d-flex gap-1 align-items-center\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch ms-1\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n    </div>\r\n\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n        <h4 class=\"head\">Coverage Area Counties</h4>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12\">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"state-header-row\">\r\n                <div class=\"state-header-left\">\r\n                  <div class=\"select-all-wrap\">\r\n                    <input type=\"checkbox\" class=\"state-checkbox\"\r\n                      id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n                      [(ngModel)]=\"coverage.checked\"\r\n                      [indeterminate]=\"coverage.indeterminate\"\r\n                      (change)=\"onSelectAllChanged(coverage)\" />\r\n                    <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n                      Select All\r\n                    </label>\r\n                  </div>\r\n                  <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                    {{ coverage.state | stateName }}\r\n                  </label>\r\n                </div>\r\n                <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n                  <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n                </button>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n                    [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                <div class=\"county-list-scroll row m-lg-2\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#f8fafc;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\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.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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: Step2CoverageComponent, isStandalone: false, selector: "app-coverage", inputs: { providerId: "providerId", providerName: "providerName", states: "states" }, ngImport: i0, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\"><img src=\"/assets/images/icons/geo-alt.svg\" alt=\"coverage area\" class=\"me-2\" width=\"18\" height=\"18\" />Coverage Area</h4>\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n      <div class=\"d-flex gap-1 align-items-center\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch ms-1\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n    </div>\r\n\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n        <h4 class=\"head\">Coverage Area Counties</h4>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12\">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"state-header-row\">\r\n                <div class=\"state-header-left\">\r\n                  <div class=\"select-all-wrap\">\r\n                    <input type=\"checkbox\" class=\"state-checkbox\"\r\n                      id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n                      [(ngModel)]=\"coverage.checked\"\r\n                      [indeterminate]=\"coverage.indeterminate\"\r\n                      (change)=\"onSelectAllChanged(coverage)\" />\r\n                    <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n                      Select All\r\n                    </label>\r\n                  </div>\r\n                  <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                    {{ coverage.state | stateName }}\r\n                  </label>\r\n                </div>\r\n                <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n                  <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n                </button>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n                    [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                <div class=\"county-list-scroll row m-lg-2\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#fff;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\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.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.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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: UsMapComponent, selector: "us-map", inputs: ["selectedStates", "allowedStates", "isReadOnly", "filteredLocations"], outputs: ["onMapClick"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: SearchPipe, name: "SearchBy" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: Step2CoverageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\"><img src=\"/assets/images/icons/geo-alt.svg\" alt=\"coverage area\" class=\"me-2\" width=\"18\" height=\"18\" />Coverage Area</h4>\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n      <div class=\"d-flex gap-1 align-items-center\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch ms-1\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n    </div>\r\n\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n        <h4 class=\"head\">Coverage Area Counties</h4>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12\">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"state-header-row\">\r\n                <div class=\"state-header-left\">\r\n                  <div class=\"select-all-wrap\">\r\n                    <input type=\"checkbox\" class=\"state-checkbox\"\r\n                      id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n                      [(ngModel)]=\"coverage.checked\"\r\n                      [indeterminate]=\"coverage.indeterminate\"\r\n                      (change)=\"onSelectAllChanged(coverage)\" />\r\n                    <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n                      Select All\r\n                    </label>\r\n                  </div>\r\n                  <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                    {{ coverage.state | stateName }}\r\n                  </label>\r\n                </div>\r\n                <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n                  <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n                </button>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n                    [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                <div class=\"county-list-scroll row m-lg-2\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#f8fafc;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
+            args: [{ selector: 'app-coverage', standalone: false, template: "<div class=\"coverage-container\">\r\n  <div class=\"first-section\">\r\n    <h4 class=\"head\"><img src=\"/assets/images/icons/geo-alt.svg\" alt=\"coverage area\" class=\"me-2\" width=\"18\" height=\"18\" />Coverage Area</h4>\r\n  </div>\r\n\r\n  <div class=\"coverage-options\">\r\n    <div class=\"d-flex justify-content-between align-items-center mb-2\">\r\n      <h6 class=\"coverage-question\">Where can you complete assignments?</h6>\r\n      <div class=\"d-flex gap-1 align-items-center\">\r\n        <label class=\"form-check-label\">Show Map</label>\r\n        <div class=\"form-check form-switch ms-1\">\r\n          <input class=\"form-check-input\" type=\"checkbox\" (change)=\"toggleMap()\" role=\"switch\">\r\n        </div>\r\n      </div>\r\n    </div>\r\n    <hr class=\"m-0 border-3\">\r\n\r\n    <div class=\"pb-1 d-flex align-items-center mt-2\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length > 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">My Current Coverage Area</span>\r\n    </div>\r\n    <div class=\"d-flex align-items-center option-cursor\" (click)=\"skip()\">\r\n      <span class=\"custom-checkbox2\" [class.checked]=\"coverages.length == 0\"></span>\r\n      <span class=\"coverage-option-text ms-3\">Not Applicable</span>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"state-selector\">\r\n    <div class=\"row pb-2\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"position-relative\">\r\n          <ng-select [clearable]=\"true\" [multiple]=\"true\" (change)=\"setSelectedStates($event)\" [items]=\"states\"\r\n            [(ngModel)]=\"selectedStates\" bindLabel=\"stateName\" bindValue=\"stateCode\" [closeOnSelect]=\"false\"\r\n            placeholder=\"Select State\" id=\"reqStates\" [loading]=\"isStatesLoading\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <span class=\"form-check\">\r\n                <span class=\"form-check-input-wrapper\">\r\n                  <span class=\"custom-checkbox1\" [class.checked]=\"item$.selected\"></span>\r\n                </span>\r\n                {{ item.stateName }}\r\n              </span>\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <ng-container *ngIf=\"!isStatesLoading\">\r\n                <span class=\"ng-value-label\">{{ item.stateName }}</span>\r\n                <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                  <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n                </span>\r\n              </ng-container>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"empty-message mt-4\" *ngIf=\"!isStatesLoading && coverages.length == 0\">\r\n      <div class=\"text-center text-secondary\">No States Selected yet</div>\r\n    </div>\r\n\r\n    <div class=\"coverage-options\">\r\n      <div class=\"col-md-10 col-12 py-2 map-wrapper\" [class.open]=\"showMap\">\r\n        <us-map [filteredLocations]=\"filteredLocations\"></us-map>\r\n      </div>\r\n    </div>\r\n\r\n    <div class=\"col-12 mt-4\" *ngIf=\"!isStatesLoading\">\r\n      <div *ngIf=\"coverages.length > 0\" class=\"counties-heading\">\r\n        <h4 class=\"head\">Coverage Area Counties</h4>\r\n      </div>\r\n      <div class=\"row pt-2 pb-2\">\r\n        <div class=\"col-12\">\r\n          <div class=\"row\">\r\n            <div class=\"col-12\" *ngFor=\"let coverage of coverages; let coverageIndex = index\">\r\n              <div class=\"state-header-row\">\r\n                <div class=\"state-header-left\">\r\n                  <div class=\"select-all-wrap\">\r\n                    <input type=\"checkbox\" class=\"state-checkbox\"\r\n                      id=\"stateCheckbox{{ coverage.state + coverageIndex }}\"\r\n                      [(ngModel)]=\"coverage.checked\"\r\n                      [indeterminate]=\"coverage.indeterminate\"\r\n                      (change)=\"onSelectAllChanged(coverage)\" />\r\n                    <label class=\"select-all-label\" for=\"stateCheckbox{{ coverage?.state + coverageIndex }}\">\r\n                      Select All\r\n                    </label>\r\n                  </div>\r\n                  <label class=\"state-name\" [attr.for]=\"'stateCheckbox' + coverage.state + coverageIndex\">\r\n                    {{ coverage.state | stateName }}\r\n                  </label>\r\n                </div>\r\n                <button type=\"button\" class=\"state-toggle-btn\" (click)=\"coverage.isShow = !coverage?.isShow\">\r\n                  <img [src]=\"coverage?.isShow ? '/assets/images/icons/arrow-up.svg' : '/assets/images/icons/arrow-down.svg'\" alt=\"toggle\" />\r\n                </button>\r\n              </div>\r\n              <hr class=\"mt-0\" />\r\n              <ng-container *ngIf=\"coverage?.isShow\">\r\n                <div class=\"form-group mb-1\">\r\n                  <input type=\"text\" class=\"font-default form-check-inline form-control h-37\"\r\n                    placeholder=\"Select Counties In {{ coverage.state | stateName }}\"\r\n                    [(ngModel)]=\"coverage.query\" />\r\n                </div>\r\n                <div class=\"county-list-scroll row m-lg-2\">\r\n                  <div class=\"list-group-item col-3 res-coverage col-sm-6 p-1\"\r\n                    *ngFor=\"let county of coverage.counties | SearchBy: 'countyName':coverage.query; let countyIndex = index\">\r\n                    <div class=\"form-check\">\r\n                      <input class=\"form-check-input\" type=\"checkbox\"\r\n                        [id]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\"\r\n                        [(ngModel)]=\"county.checked\"\r\n                        (change)=\"onChangedCounty($event, coverage.state, county.countyName)\" />\r\n                      <label class=\"form-check-label\"\r\n                        [for]=\"'stateCheckbox' + coverage.state + county.countyName + countyIndex\">\r\n                        {{ county.countyName }}\r\n                      </label>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </ng-container>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"actions\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"previousStep()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"secondary\" (click)=\"skip()\">Skip</button>\r\n      <button type=\"button\" class=\"primary\" [disabled]=\"coverageSave\" [ng2-loading]=\"coverageSave\"\r\n        (click)=\"saveCoverage()\">\r\n        Continue\r\n      </button>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".coverage-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}.coverage-container .head{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.coverage-container p{font-size:14px;color:#64748b;margin-bottom:16px;margin-top:20px;font-weight:400}.coverage-container .form-check-label{font-size:15px;color:#64748b}.coverage-container .first-section span{color:#64748b;font-size:13px}.coverage-container .location-inputs{display:flex;gap:12px;margin-bottom:32px;margin-top:16px}.coverage-container .location-inputs input{flex:1;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;box-sizing:border-box}.coverage-container .location-inputs input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.coverage-container .location-inputs input::placeholder{color:#94a3b8;font-size:14px}.coverage-container .state-selector .empty-message{width:100%;padding:16px;background:#fff;text-align:center;color:#64748b;border-radius:8px;border:1px solid #e2e8f0;font-size:14px}.coverage-container .state-selector .custom-control{font-size:14px;display:flex;align-items:center;gap:7px;color:#64748b;padding-left:13px}.coverage-container .state-selector .custom-control-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .state-selector .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options{margin-bottom:16px}.coverage-container .coverage-options label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;display:flex;align-items:center;gap:6px;width:110px}.coverage-container .coverage-options label .show-map{margin-left:auto}.coverage-container .coverage-options .icon-black{filter:brightness(0) saturate(100%) invert(10%) sepia(47%) saturate(3454%) hue-rotate(184deg) brightness(98%) contrast(101%)}.coverage-container .coverage-options .icon-gray{filter:brightness(0) saturate(100%) invert(100%) sepia(4%) saturate(29%) hue-rotate(68deg) brightness(112%) contrast(80%)}.coverage-container .coverage-options .form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}.coverage-container .coverage-options .square-box{width:12px;height:12px;border:2px solid;display:inline-block}.coverage-container .coverage-options .square-box.black{background:#002b49;border:0;width:15px;height:14px}.coverage-container .coverage-options .square-box.gray{border:1px solid rgba(128,128,128,.23)!important;border:0;width:15px;height:15px}.coverage-container .coverage-options .map-wrapper{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .4s ease,opacity .3s ease}.coverage-container .coverage-options .map-wrapper>*{overflow:hidden}.coverage-container .coverage-options .map-wrapper.open{grid-template-rows:1fr;opacity:1}.coverage-container .navigation-buttons{display:flex;justify-content:flex-end;gap:12px;margin-top:48px;margin-bottom:32px}.coverage-container .navigation-buttons .back{height:42px;min-width:130px;padding:10px 22px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .back:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.coverage-container .navigation-buttons .next{height:42px;min-width:130px;padding:10px 22px;background:#4077ad;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.coverage-container .navigation-buttons .next:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.coverage-container .navigation-buttons .next:active{transform:translateY(0)}.coverage-container .navigation-buttons .next:disabled{background:#94a3b8;cursor:not-allowed;transform:none}::ng-deep .ng-select .ng-select-container{min-height:42px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:14px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container:hover{border-color:#94a3b8}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8;font-size:14px}.custom-checkbox1{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;margin-right:8px;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox1.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox1.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.custom-checkbox2{display:inline-block;width:16px;height:16px;border:1.5px solid #e2e8f0;vertical-align:middle;position:relative;cursor:pointer;border-radius:6px;background-color:#fff;transition:all .2s ease}.custom-checkbox2.checked{background-color:#4077ad;border-color:#4077ad}.custom-checkbox2.checked:after{content:\"\";position:absolute;left:4px;top:0;width:4px;height:8px;border:solid #ffffff;border-width:0 2px 2px 0;transform:rotate(45deg)}.select-loader{position:absolute;top:-28px;left:0;font-size:12px;color:#4077ad;display:flex;align-items:center;gap:6px}::ng-deep .form-check{display:block;min-height:1.5rem;margin-bottom:.125rem}.actions{display:flex;justify-content:space-between;margin:48px 0 32px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.icon-color{cursor:pointer;background:transparent;width:20px;height:20px;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.custom-control label{padding-top:8px;font-size:14px;color:#64748b}.coverage-question{font-size:15px;font-weight:600;color:#64748b;margin:0}.coverage-option-text{font-size:14px;color:#64748b}.option-cursor{cursor:pointer}.counties-heading{margin-bottom:8px}.state-header-row{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:#ebf2f9;border:1px solid #e2e8f0;border-radius:8px 8px 0 0;gap:12px}.state-header-left{display:flex;align-items:center;gap:20px;flex:1}.select-all-wrap{display:flex;align-items:center;gap:6px}.state-checkbox{width:16px;height:16px;border:1.5px solid #e2e8f0;border-radius:6px;cursor:pointer;accent-color:#4077AD;flex-shrink:0}.select-all-label{font-size:13px;font-weight:600;color:#64748b;cursor:pointer;margin:0}.state-name{font-size:14px;font-weight:700;color:#1e293b;cursor:pointer;margin:0}.state-toggle-btn{background:none;border:none;padding:4px 6px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all .2s ease;min-width:unset;height:auto;font-size:0}.state-toggle-btn:hover{background:#4077ad1f}.state-toggle-btn img{width:18px;height:18px}.county-list-scroll{height:160px;overflow-y:auto;padding-left:1rem}@media screen and (max-width: 767px){.coverage-container{padding:16px}.coverage-container .head{font-size:18px}.coverage-container input{font-size:16px}.actions{gap:8px;display:flex;flex-direction:column-reverse}.actions button{min-width:100%}.right-actions{gap:8px;justify-content:space-between;display:flex;flex-direction:column-reverse}.custom-control label{padding-top:0}.res-coverage{width:50%}.pointer{display:none}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: UsMapLatestService }, { type: PostalCodeServices }, { type: UserCoverageAreaService }, { type: AlertService }, { type: i1$1.RoleContextService }, { type: i1$1.TokenService }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -32918,7 +32956,18 @@ class WorkexperienceComponent {
         if (!confirm('Delete this work experience item?'))
             return;
         this.userExperienceService.bulkDelete([exp.id]).subscribe({
-            next: () => this.workStore.loadFromApi(this.userId),
+            next: () => {
+                this.workStore.loadFromApi(this.userId);
+                this.workexperienceForm.reset();
+                this.workexperienceForm.patchValue({ country: 'US' });
+                this.showedit = false;
+                this.isEditing.set(false);
+                this.editingIndex = -1;
+                this.fileName = '';
+                this.fileData = null;
+                this.fileChanged = false;
+                this.model = { fileId: null, fileUrl: null, fileName: null };
+            },
             error: (err) => console.error(err)
         });
     }
@@ -33038,11 +33087,11 @@ class WorkexperienceComponent {
         this.fileName = '';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, deps: [{ token: UserExperienceService }, { token: UserService }, { token: WorkExperienceStore }, { token: CredentialingStore }, { token: CountryServices }, { token: PostalCodeServices }, { token: i1$1.TokenService }, { token: i1$1.RoleContextService }, { token: i8.FormBuilder }, { token: FileService }, { token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Work Experiences</h3>\r\n    <p class=\"preview-subtitle\">Review your work history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#exp_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Company Name</span>\r\n              <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Job Title</span>\r\n              <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Country</span>\r\n              <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Job Description</span>\r\n            <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: WorkexperienceComponent, isStandalone: false, selector: "app-workexperience", inputs: { providerId: "providerId", providerName: "providerName", cloudfrontUrl: "cloudfrontUrl" }, ngImport: i0, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Work Experiences</h3>\r\n    <p class=\"preview-subtitle\">Review your work history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#exp_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Company Name</span>\r\n              <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Job Title</span>\r\n              <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Country</span>\r\n              <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Job Description</span>\r\n            <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i8.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i8.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i8.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i12.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i12.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i12.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i12$1.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i12$1.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: Ng2LoadingSpinnerDirective, selector: "[ng2-loading]", inputs: ["ng2-loading", "config", "template"] }, { kind: "pipe", type: i11.DatePipe, name: "date" }, { kind: "pipe", type: StateNamePipe, name: "stateName" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: WorkexperienceComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name</div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title</div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country</div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State</div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City</div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date</div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Work Experiences</h3>\r\n    <p class=\"preview-subtitle\">Review your work history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#exp_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Company Name</span>\r\n              <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Job Title</span>\r\n              <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Country</span>\r\n              <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Job Description</span>\r\n            <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#f8fafc}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#f8fafc}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
+            args: [{ selector: 'app-workexperience', standalone: false, template: "<div *ngIf=\"!showpreview()\">\r\n  <div class=\"education-container\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Add Work Experience</h3>\r\n    <p class=\"hint\">\r\n      Add your prior and current work history below\r\n    </p>\r\n    <form [formGroup]=\"workexperienceForm\">\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Company Name <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your company name here\" formControlName=\"companyName\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('companyName')?.touched &&\r\n               workexperienceForm.get('companyName')?.hasError('required')\">\r\n            Company name is required\r\n          </small>\r\n        </div>\r\n\r\n        <div class=\"field\">\r\n          <div class=\"head\">Job Title <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter your job title here\" formControlName=\"jobTitle\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('jobTitle')?.touched &&\r\n               workexperienceForm.get('jobTitle')?.hasError('required')\">\r\n            Job title is required\r\n          </small>\r\n        </div>\r\n      </div>\r\n      <div class=\"row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">Country <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"country\" [items]=\"countries\" bindLabel=\"country\" bindValue=\"countryCode2\"\r\n            [clearable]=\"false\" placeholder=\"Select Country\" (change)=\"onCountryChange($event)\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\" let-index=\"index\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" readonly />\r\n              &nbsp;{{ item.country }}\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n        <div class=\"field\">\r\n          <div class=\"head\">State <span class=\"text-danger\">*</span></div>\r\n          <ng-select formControlName=\"state\" [items]=\"states\" bindLabel=\"stateName\" bindValue=\"stateCode\"\r\n            placeholder=\"Select State\">\r\n            <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n              <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"item$.selected\" />\r\n              &nbsp;{{ item.stateName }}\r\n            </ng-template>\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n              <span class=\"ng-value-label\">\r\n                {{ item.stateName }}\r\n              </span>\r\n              <span class=\"ng-value-icon right\" (click)=\"clear(item)\">\r\n                <img src=\"/assets/images/icons/close-sm-circle.svg\" class=\"close-btn-select\" />\r\n              </span>\r\n            </ng-template>\r\n          </ng-select>\r\n        </div>\r\n      </div>\r\n      <div class=\"row form-row\">\r\n        <div class=\"field\">\r\n          <div class=\"head\">City <span class=\"text-danger\">*</span></div>\r\n          <input type=\"text\" placeholder=\"Enter City here\" formControlName=\"city\" />\r\n          <small class=\"error\" *ngIf=\"workexperienceForm.get('city')?.touched &&\r\n               workexperienceForm.get('city')?.hasError('required')\">\r\n            City is required\r\n          </small>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">Start Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"Start date\" bsDatepicker [maxDate]=\"maxDate\"\r\n              [bsConfig]=\"{ adaptivePosition: true, isAnimated: true, showWeekNumbers: false,\r\n                                customTodayClass: !workexperienceForm.get('fromDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"fromDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('fromDate')?.touched &&\r\n               workexperienceForm.get('fromDate')?.hasError('required')\">\r\n              Start Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n        <div class=\"field date\">\r\n          <div class=\"mb-3 head\">\r\n            <div class=\"head\">To Date <span class=\"text-danger\">*</span></div>\r\n            <input class=\"form-control date-time-filter\" placeholder=\"To date\" bsDatepicker\r\n              [bsConfig]=\"{ adaptivePosition: true,showWeekNumbers: false, isAnimated: true, \r\n                                customTodayClass: !workexperienceForm.get('toDate')?.value ? 'today-highlight' : '' }\"\r\n              formControlName=\"toDate\" (bsValueChange)=\"onPreferredDateChange($event)\">\r\n            <small class=\"error\" *ngIf=\"workexperienceForm.get('toDate')?.touched &&\r\n               workexperienceForm.get('toDate')?.hasError('required')\">\r\n              To Date is required\r\n            </small>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n      <div class=\"row\">\r\n        <div class=\"field full-width\">\r\n          <div class=\"head\">Job Description or duties</div>\r\n          <textarea placeholder=\"Description\" formControlName=\"jobDescription\">\r\n      </textarea>\r\n        </div>\r\n      </div>\r\n    </form>\r\n    <div class=\"row\">\r\n     <div class=\"upload-wrapper\">\r\n        <p *ngIf=\"!fileName\" class=\"upload-title\">Supporting Documents</p>\r\n        <p *ngIf=\"fileName\" class=\"upload-title\">Uploaded File</p>\r\n        <p *ngIf=\"!fileName\" class=\"upload-subtitle\">Upload your employment contract, offer letter, or reference letter (PDF, DOC, DOCX)</p>\r\n        <button *ngIf=\"!fileName\" type=\"button\" class=\"upload-btn\" (click)=\"fileInput.click()\">\r\n          Upload Document\r\n        </button>\r\n        <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"selectFile($event)\" hidden />\r\n        <p class=\"file-name\" *ngIf=\"fileName\">\r\n          <img src=\"/assets/images/icons/file.png\" class=\"file-icon\" alt=\"file\" />\r\n          {{ fileName }}\r\n          <span class=\"remove-file\" (click)=\"removeFile()\">\u2716</span>\r\n        </p>\r\n      </div>\r\n      <div class=\"actions\">\r\n        <!-- Left button: Back or Cancel -->\r\n        <button type=\"button\" class=\"secondary\" (click)=\"handleLeftButton()\">\r\n          {{ showedit || isAdding() ? 'Cancel' : 'Back' }}\r\n        </button>\r\n\r\n        <div class=\"right-actions\">\r\n          <!-- Skip button only for first entry (not editing or adding) -->\r\n          <button *ngIf=\"!showedit && !isAdding() && workStore.experiences().length === 0\" type=\"button\"\r\n            class=\"secondary\" (click)=\"nextStep()\">\r\n            Skip\r\n          </button>\r\n\r\n          <!-- Primary button -->\r\n          <button type=\"button\" class=\"primary\" [disabled]=\"proposalLoader\" [ng2-loading]=\"proposalLoader\"\r\n            (click)=\"saveFile()\">\r\n            {{ showedit && !isAdding() ? 'Update' : 'Save & Continue' }}\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n  </div>\r\n</div>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n<div class=\"work-preview\" *ngIf=\"showpreview()\">\r\n  <div class=\"preview-header\">\r\n    <h3><img src=\"/assets/images/icons/briefcase-fill.svg\" alt=\"work experience\" class=\"me-2\" width=\"18\" height=\"18\" />Work Experiences</h3>\r\n    <p class=\"preview-subtitle\">Review your work history below</p>\r\n  </div>\r\n\r\n  <div class=\"preview-list\">\r\n    <div *ngFor=\"let exp of workStore.experiences(); let i = index\" class=\"preview-card-item accordion-item border-0\">\r\n\r\n      <h2 class=\"accordion-header\">\r\n        <button class=\"accordion-button preview-accordion-btn\"\r\n          type=\"button\"\r\n          data-bs-toggle=\"collapse\"\r\n          [attr.data-bs-target]=\"'#exp_' + i\"\r\n          aria-expanded=\"true\">\r\n          <div class=\"preview-acc-left\">\r\n            <span class=\"preview-acc-title\">{{ exp.companyName }}</span>\r\n            <span class=\"preview-acc-meta\">{{ exp.jobTitle }}</span>\r\n          </div>\r\n          <span class=\"accordion-actions\">\r\n            <img src=\"/assets/images/icons/edit-text.png\" class=\"edit-icon icon-color\"\r\n              (click)=\"edit(i); $event.stopPropagation()\" alt=\"Edit\" />\r\n            <img src=\"/assets/images/icons/delete.png\" class=\"edit-icon icon-color ms-2\"\r\n              (click)=\"delete(i); $event.stopPropagation()\" alt=\"Delete\" />\r\n          </span>\r\n        </button>\r\n      </h2>\r\n\r\n      <div [id]=\"'exp_' + i\" class=\"accordion-collapse collapse show\">\r\n        <div class=\"preview-body\">\r\n          <div class=\"detail-grid\">\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Company Name</span>\r\n              <span class=\"preview-value\">{{ exp.companyName || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Job Title</span>\r\n              <span class=\"preview-value\">{{ exp.jobTitle || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">From Date</span>\r\n              <span class=\"preview-value\">{{ exp.fromDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">To Date</span>\r\n              <span class=\"preview-value\">{{ exp.toDate | date:'MM/dd/yyyy' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">Country</span>\r\n              <span class=\"preview-value\">{{ exp.country || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">State</span>\r\n              <span class=\"preview-value\">{{ exp.state | stateName }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\">\r\n              <span class=\"preview-label\">City</span>\r\n              <span class=\"preview-value\">{{ exp.city || '\u2014' }}</span>\r\n            </div>\r\n            <div class=\"detail-cell\" *ngIf=\"exp.fileUrl\">\r\n              <span class=\"preview-label\">Document</span>\r\n              <a class=\"preview-link\" [href]=\"cloudfrontUrl + exp.fileUrl\" target=\"_blank\">{{ exp.fileName }}</a>\r\n            </div>\r\n          </div>\r\n          <div class=\"detail-cell detail-full\">\r\n            <span class=\"preview-label\">Job Description</span>\r\n            <span class=\"preview-value\">{{ exp.jobDescription || '\u2014' }}</span>\r\n          </div>\r\n        </div>\r\n      </div>\r\n\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"action\">\r\n    <button type=\"button\" class=\"secondary\" (click)=\"back()\">Back</button>\r\n    <div class=\"right-actions\">\r\n      <button type=\"button\" class=\"primary add-btn\" (click)=\"add()\">Add More Experiences</button>\r\n      <button type=\"button\" class=\"primary\" (click)=\"nextStep()\">Continue</button>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".icon-color{cursor:pointer;width:20px;height:20px;background:transparent;transition:transform .3s ease;filter:brightness(0) saturate(100%) invert(48%) sepia(8%) saturate(350%) hue-rotate(170deg) brightness(92%) contrast(88%)}.icon-color.edit{width:18px;height:18px}.education-container{max-width:1000px;margin:0 auto;padding:28px 24px;min-height:300px;background:#fff}h3{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.hint{font-size:14px;color:#64748b;margin-bottom:24px}.row{display:flex;margin-bottom:16px;gap:16px}.field{flex:1;display:flex;flex-direction:column}.field.full-width{flex:1 1 100%}.field.city{flex:0 0 50%}.field.date{flex:0 0 25%}.form-row{display:flex;gap:16px}.head{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}input,select,textarea{height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:15px;color:#1e293b;background:#f9fafb;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}input:focus,select:focus,textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}input::placeholder,select::placeholder,textarea::placeholder{color:#94a3b8;font-size:14px}input.is-invalid,select.is-invalid,textarea.is-invalid{border-color:#ef4444}textarea{height:auto;min-height:96px;padding-top:12px;resize:vertical}::ng-deep .ng-select.ng-select-single .ng-select-container{min-height:42px;height:auto;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;font-size:15px;color:#1e293b;transition:all .2s ease}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-left:14px}::ng-deep .ng-select.ng-select-single .ng-select-container .ng-value-container .ng-placeholder{top:10px;color:#94a3b8}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-placeholder{color:#94a3b8;font-size:14px}::ng-deep .ng-select.ng-select-focused .ng-select-container,::ng-deep .ng-select.ng-select-opened>.ng-select-container{border-color:#4077ad!important;box-shadow:0 0 0 3px #4077ad1f;background:#fff}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{font-size:15px}::ng-deep .ng-value-label{font-size:15px}.error{margin-top:4px;font-size:12px;color:#ef4444}.actions{display:flex;justify-content:space-between;margin:48px 0 20px}.action{display:flex;justify-content:space-between;margin:48px 100px 20px}.right-actions{display:flex;gap:12px}button{height:42px;min-width:120px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}button.primary{background:#4077ad;color:#fff;padding:10px 22px}button.primary:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}button.primary:active{transform:translateY(0)}button.secondary{background:#fff;color:#64748b;border:1.5px solid #e2e8f0;padding:10px 22px}button.secondary:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}button:disabled{background:#94a3b8;cursor:not-allowed;transform:none;box-shadow:none}.upload-wrapper{margin-top:28px;padding:20px;background:#fff;border:1px solid #e2e8f0;border-radius:12px;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.upload-title{font-size:14px;font-weight:600;color:#1e293b;margin-bottom:4px}.upload-subtitle{font-size:13px;color:#64748b;margin-bottom:12px}.upload-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;color:#64748b;border:1.5px dashed #e2e8f0;padding:10px 18px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.upload-btn:hover{border-color:#4077ad;border-style:solid;color:#4077ad;background:#ebf2f9}.file-name{margin-top:8px;font-size:13px;color:#64748b}.remove-file{margin-left:10px;cursor:pointer;color:#ef4444;font-weight:700;transition:all .2s ease}.remove-file:hover{opacity:.75}.file-icon{width:23px;height:23px}.date-time-filter{height:42px;padding:10px 40px 10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:14px;color:#1e293b;background:#f9fafb;background-image:url(/assets/images/icons/calendar.svg);background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;cursor:pointer;transition:all .2s ease;width:100%;box-sizing:border-box;outline:none}.date-time-filter:focus{border-color:#4077ad;background-color:#fff;box-shadow:0 0 0 3px #4077ad1f}.work-preview{max-width:1000px;padding:24px;margin:0 auto;background:#fff}.preview-header{text-align:center;margin:0 0 28px}.preview-header h3{font-size:22px;font-weight:700;color:#1e293b;margin-bottom:4px}.preview-subtitle{font-size:14px;color:#64748b;margin:0}.preview-list{display:flex;flex-direction:column;gap:16px;margin-bottom:32px}.preview-card-item{border:1px solid #e2e8f0!important;border-radius:12px!important;overflow:hidden;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;background:#fff}.preview-accordion-btn{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:#fff!important;border:none;box-shadow:none!important;color:#1e293b!important;gap:12px}.preview-accordion-btn:not(.collapsed){background:#ebf2f9!important;border-bottom:1px solid #e2e8f0;border-radius:0!important}.preview-accordion-btn:after{display:none}.preview-acc-left{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}.preview-acc-title{font-size:15px;font-weight:700;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.preview-acc-meta{font-size:13px;color:#64748b;font-weight:400}.preview-body{background:#fff;padding:0}.detail-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0}.detail-cell{padding:14px 20px;border-bottom:1px solid #e2e8f0}.detail-cell:nth-last-child(1),.detail-cell:nth-last-child(2):nth-child(odd){border-bottom:none}.detail-full{grid-column:1/-1;border-top:1px solid #e2e8f0;border-bottom:none!important}.preview-label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:#94a3b8;margin-bottom:5px}.preview-value{display:block;font-size:14px;font-weight:500;color:#1e293b;line-height:1.5;word-break:break-word;min-height:21px}.preview-link{font-size:14px;font-weight:500;color:#4077ad;text-decoration:none}.preview-link:hover{text-decoration:underline;color:#2d5a8a}.accordion-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}::ng-deep .accordion-button:focus{box-shadow:none!important}.job-title{color:#64748b;font-weight:400;font-size:14px}.edit-icon{cursor:pointer}.add-btn{width:200px;background:#4077ad;color:#fff;border:none;border-radius:8px;height:42px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-btn:hover{background:#2d5a8a;transform:translateY(-1px);box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.add-btn:active{transform:translateY(0)}.close-btn-select{width:16px;height:16px;color:#4077ad;display:inline-block}::ng-deep .today-highlight{color:#fff!important;background:#4077ad!important}::ng-deep .bs-datepicker-head{background-color:#4077ad!important}::ng-deep .theme-green .bs-datepicker-body table td span.selected,.theme-green .bs-datepicker-body table td.selected span,.theme-green .bs-datepicker-body table td span[class*=select-]:after,.theme-green .bs-datepicker-body table td[class*=select-] span:after{background-color:#4077ad!important}::ng-deep ng-dropdown-panel input[type=checkbox]{margin-right:0!important;padding:9px;margin-top:0;accent-color:#4077AD}.form-check-input:checked{color:#fff!important;border-color:#4077ad!important;background-color:#4077ad!important}@media (max-width: 600px){.preview-card{padding:15px}.edit-btn{top:10px;right:10px;width:18px;height:18px}.card-meta{flex-direction:column;gap:3px}}@media screen and (max-width: 767px){.education-container{padding:16px}h3{font-size:18px}input,select,textarea{font-size:16px}.detail-grid{grid-template-columns:1fr}.actions,.action{flex-direction:column-reverse;gap:8px}.action{margin:48px 0 20px}.right-actions{justify-content:space-between;gap:8px;display:flex;flex-direction:column-reverse}.row{flex-direction:column}.field.date,.field.city{flex:1 1 100%}.form-row{gap:14px;flex-direction:column}.pointer{display:none}.add-btn{width:unset}button{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: UserExperienceService }, { type: UserService }, { type: WorkExperienceStore }, { type: CredentialingStore }, { type: CountryServices }, { type: PostalCodeServices }, { type: i1$1.TokenService }, { type: i1$1.RoleContextService }, { type: i8.FormBuilder }, { type: FileService }, { type: i1.HttpClient }], propDecorators: { providerId: [{
                 type: Input
             }], providerName: [{
@@ -33370,11 +33419,11 @@ class FirstComponent {
         this.backToParent.emit();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, deps: [{ token: CredentialingStore }, { token: i1$1.RoleContextService }, { token: i1$1.TokenService }, { token: ResumeDetailService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FirstComponent, isStandalone: false, selector: "app-first", outputs: { backToParent: "backToParent", nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\"><img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" class=\"me-2\" width=\"22\" height=\"22\" />Upload your resume *</h2>\r\n  <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n  <div class=\"option-card\" [class.drag-over]=\"isDragOver\" (click)=\"openFile(fileInput, $event)\"\r\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\r\n\r\n\r\n    <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"onFileSelected($event)\" hidden />\r\n\r\n\r\n    <div class=\"card-content\" style=\"margin-left: 15px;gap: 18px;\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <h3>Upload my resume</h3>\r\n        <p>Drag & drop your resume here, or click to browse.</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"error-text\" *ngIf=\"uploadError\">{{ uploadError }}</div>\r\n  </div>\r\n\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\" >\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/Edit Manually.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n  </div>\r\n</div>", styles: [".wrapper{max-width:600px;margin:0 auto;padding:28px 24px;background:#f8fafc;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.option-card{display:block;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.option-card:hover{border-color:#4077ad;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-2px)}.option-card.drag-over{border-color:#4077ad;background:#ebf2f9;box-shadow:0 0 0 3px #4077ad26}.option-card:has(input:checked){border:2px solid #4077AD;background:#ebf2f9}.option-card input[type=radio]{position:absolute;left:15px;top:43px;accent-color:#4077AD}.card-content{display:flex;gap:16px;margin-left:30px;align-items:flex-start}.left img{width:37px;opacity:.75}.right h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.right p{margin:5px 0 10px;color:#64748b;font-size:14px}.file-display input{font-size:15px;cursor:pointer;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;color:#1e293b;width:100%;transition:all .2s ease;box-sizing:border-box}.file-display input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.file-display input::placeholder{color:#94a3b8}.error-text{font-size:12px;color:#ef4444;margin-top:4px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffd9;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:12px}.spinner{width:40px;height:40px;margin-left:60px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;animation:spin .8s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{height:42px;min-width:120px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}@media screen and (max-width: 767px){.wrapper{padding:16px;width:90%}.title{font-size:18px}.file-display input{font-size:16px}.back-btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FirstComponent, isStandalone: false, selector: "app-first", outputs: { backToParent: "backToParent", nextStep: "nextStep" }, ngImport: i0, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\"><img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" class=\"me-2\" width=\"22\" height=\"22\" />Upload your resume *</h2>\r\n  <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n  <div class=\"option-card\" [class.drag-over]=\"isDragOver\" (click)=\"openFile(fileInput, $event)\"\r\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\r\n\r\n\r\n    <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"onFileSelected($event)\" hidden />\r\n\r\n\r\n    <div class=\"card-content\" style=\"margin-left: 15px;gap: 18px;\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <h3>Upload my resume</h3>\r\n        <p>Drag & drop your resume here, or click to browse.</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"error-text\" *ngIf=\"uploadError\">{{ uploadError }}</div>\r\n  </div>\r\n\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\" >\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/Edit Manually.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n  </div>\r\n</div>", styles: [".wrapper{max-width:600px;margin:0 auto;padding:28px 24px;background:#fff;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.option-card{display:block;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.option-card:hover{border-color:#4077ad;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-2px)}.option-card.drag-over{border-color:#4077ad;background:#ebf2f9;box-shadow:0 0 0 3px #4077ad26}.option-card:has(input:checked){border:2px solid #4077AD;background:#ebf2f9}.option-card input[type=radio]{position:absolute;left:15px;top:43px;accent-color:#4077AD}.card-content{display:flex;gap:16px;margin-left:30px;align-items:flex-start}.left img{width:37px;opacity:.75}.right h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.right p{margin:5px 0 10px;color:#64748b;font-size:14px}.file-display input{font-size:15px;cursor:pointer;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;color:#1e293b;width:100%;transition:all .2s ease;box-sizing:border-box}.file-display input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.file-display input::placeholder{color:#94a3b8}.error-text{font-size:12px;color:#ef4444;margin-top:4px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffd9;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:12px}.spinner{width:40px;height:40px;margin-left:60px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;animation:spin .8s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{height:42px;min-width:120px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}@media screen and (max-width: 767px){.wrapper{padding:16px;width:90%}.title{font-size:18px}.file-display input{font-size:16px}.back-btn{width:100%}}\n"], dependencies: [{ kind: "directive", type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\"><img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" class=\"me-2\" width=\"22\" height=\"22\" />Upload your resume *</h2>\r\n  <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n  <div class=\"option-card\" [class.drag-over]=\"isDragOver\" (click)=\"openFile(fileInput, $event)\"\r\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\r\n\r\n\r\n    <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"onFileSelected($event)\" hidden />\r\n\r\n\r\n    <div class=\"card-content\" style=\"margin-left: 15px;gap: 18px;\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <h3>Upload my resume</h3>\r\n        <p>Drag & drop your resume here, or click to browse.</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"error-text\" *ngIf=\"uploadError\">{{ uploadError }}</div>\r\n  </div>\r\n\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\" >\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/Edit Manually.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n  </div>\r\n</div>", styles: [".wrapper{max-width:600px;margin:0 auto;padding:28px 24px;background:#f8fafc;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.option-card{display:block;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.option-card:hover{border-color:#4077ad;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-2px)}.option-card.drag-over{border-color:#4077ad;background:#ebf2f9;box-shadow:0 0 0 3px #4077ad26}.option-card:has(input:checked){border:2px solid #4077AD;background:#ebf2f9}.option-card input[type=radio]{position:absolute;left:15px;top:43px;accent-color:#4077AD}.card-content{display:flex;gap:16px;margin-left:30px;align-items:flex-start}.left img{width:37px;opacity:.75}.right h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.right p{margin:5px 0 10px;color:#64748b;font-size:14px}.file-display input{font-size:15px;cursor:pointer;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;color:#1e293b;width:100%;transition:all .2s ease;box-sizing:border-box}.file-display input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.file-display input::placeholder{color:#94a3b8}.error-text{font-size:12px;color:#ef4444;margin-top:4px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffd9;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:12px}.spinner{width:40px;height:40px;margin-left:60px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;animation:spin .8s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{height:42px;min-width:120px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}@media screen and (max-width: 767px){.wrapper{padding:16px;width:90%}.title{font-size:18px}.file-display input{font-size:16px}.back-btn{width:100%}}\n"] }]
+            args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n  <h2 class=\"title\"><img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" class=\"me-2\" width=\"22\" height=\"22\" />Upload your resume *</h2>\r\n  <p class=\"subtitle\">Upload your resume and we\u2019ll fill the rest.</p>\r\n\r\n\r\n  <div class=\"option-card\" [class.drag-over]=\"isDragOver\" (click)=\"openFile(fileInput, $event)\"\r\n    (dragover)=\"onDragOver($event)\" (dragleave)=\"onDragLeave($event)\" (drop)=\"onDrop($event)\">\r\n\r\n\r\n    <input #fileInput type=\"file\" accept=\".pdf,.doc,.docx\" (change)=\"onFileSelected($event)\" hidden />\r\n\r\n\r\n    <div class=\"card-content\" style=\"margin-left: 15px;gap: 18px;\">\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/upload-resume.png\" style=\"width: 55px;\" alt=\"Upload\" />\r\n      </div>\r\n\r\n      <div class=\"right\">\r\n        <h3>Upload my resume</h3>\r\n        <p>Drag & drop your resume here, or click to browse.</p>\r\n      </div>\r\n    </div>\r\n    <div class=\"error-text\" *ngIf=\"uploadError\">{{ uploadError }}</div>\r\n  </div>\r\n\r\n  <label class=\"option-card\" (click)=\"manual()\">\r\n\r\n    <div class=\"card-content\" (click)=\"manual()\" >\r\n      <div class=\"left\">\r\n        <img src=\"assets/images/icons/Edit Manually.svg\" alt=\"Manual\" />\r\n      </div>\r\n\r\n      <div class=\"right\" (click)=\"manual()\">\r\n        <h3>Enter manually</h3>\r\n        <p>You will enter all information manually.</p>\r\n      </div>\r\n    </div>\r\n  </label>\r\n\r\n  <div *ngIf=\"isUploading\" class=\"overlay\">\r\n    <div class=\"spinner-container\">\r\n      <div class=\"spinner\"></div>\r\n      <p>Processing your resume...</p>\r\n    </div>\r\n  </div>\r\n  <div>\r\n    <button class=\"back-btn\" (click)=\"onBackClick()\">Back</button>\r\n  </div>\r\n</div>", styles: [".wrapper{max-width:600px;margin:0 auto;padding:28px 24px;background:#fff;position:relative;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.title{font-size:20px;font-weight:700;color:#1e293b;margin-bottom:4px}.subtitle{font-size:14px;color:#64748b;margin-bottom:24px}.option-card{display:block;border:1.5px solid #e2e8f0;border-radius:12px;padding:20px;margin-bottom:16px;cursor:pointer;transition:all .2s ease;position:relative;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a}.option-card:hover{border-color:#4077ad;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-2px)}.option-card.drag-over{border-color:#4077ad;background:#ebf2f9;box-shadow:0 0 0 3px #4077ad26}.option-card:has(input:checked){border:2px solid #4077AD;background:#ebf2f9}.option-card input[type=radio]{position:absolute;left:15px;top:43px;accent-color:#4077AD}.card-content{display:flex;gap:16px;margin-left:30px;align-items:flex-start}.left img{width:37px;opacity:.75}.right h3{margin:0;font-size:16px;font-weight:600;color:#1e293b}.right p{margin:5px 0 10px;color:#64748b;font-size:14px}.file-display input{font-size:15px;cursor:pointer;height:42px;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;background:#f9fafb;color:#1e293b;width:100%;transition:all .2s ease;box-sizing:border-box}.file-display input:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f;outline:none}.file-display input::placeholder{color:#94a3b8}.error-text{font-size:12px;color:#ef4444;margin-top:4px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#ffffffd9;z-index:100;display:flex;justify-content:center;align-items:center;pointer-events:all;border-radius:12px}.spinner{width:40px;height:40px;margin-left:60px;border:3px solid #e2e8f0;border-top:3px solid #4077AD;border-radius:50%;animation:spin .8s linear infinite}.spinner-container{text-align:center}@keyframes spin{to{transform:rotate(360deg)}}.back-btn{height:42px;min-width:120px;background:#fff;color:#64748b;border:1.5px solid #e2e8f0;border-radius:8px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}@media screen and (max-width: 767px){.wrapper{padding:16px;width:90%}.title{font-size:18px}.file-display input{font-size:16px}.back-btn{width:100%}}\n"] }]
         }], ctorParameters: () => [{ type: CredentialingStore }, { type: i1$1.RoleContextService }, { type: i1$1.TokenService }, { type: ResumeDetailService }, { type: FileService }], propDecorators: { backToParent: [{
                 type: Output
             }], nextStep: [{
@@ -34731,9 +34780,9 @@ class InitialProcessComponent {
                 this.isProviderCall = false;
                 if (!data.failed) {
                     this.assignProviderRoleModel.providerId = data?.value;
-                    this.assignProviderRoleModel.providerName =
-                        this.provider?.providerName;
-                    this.saveContractorSubCategory(this.assignProviderRoleModel.providerId);
+                    this.assignProviderRoleModel.providerName = this.provider?.providerName;
+                    const providerId = Array.isArray(this.assignProviderRoleModel.providerId) ? this.assignProviderRoleModel.providerId[0] : this.assignProviderRoleModel.providerId;
+                    this.saveContractorSubCategory(providerId);
                     this.path = '';
                     this.saveFinal();
                 }
@@ -34829,12 +34878,13 @@ class InitialProcessComponent {
         };
     }
     saveFinal() {
+        const providerId = Array.isArray(this.assignProviderRoleModel?.providerId) ? this.assignProviderRoleModel?.providerId?.[0] : this.assignProviderRoleModel?.providerId;
         this.user = this.bindUserDetails();
         var role = this.userViewRoles.find((a) => { return a.selected; });
         var model = {
             userRoleId: role?.roleId,
             companyRoleId: role?.id,
-            targetProviderId: this.assignProviderRoleModel.providerId ?? '00000000-0000-0000-0000-000000000000',
+            targetProviderId: providerId ?? '00000000-0000-0000-0000-000000000000',
             providerName: this.assignProviderRoleModel.providerName ?? 'Inspector Match',
             userDetail: this.user
         };
@@ -34906,7 +34956,7 @@ class InitialProcessComponent {
     }
     async logout() {
         await this.authLogoutService.logout();
-        window.localStorage.clear();
+        // window.localStorage.clear();
     }
     getContractorSubCategories() {
         const query = {