@idsoftsource/initial-process 2.8.6 → 2.8.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/fesm2022/idsoftsource-initial-process.mjs +12 -12
  2. package/fesm2022/idsoftsource-initial-process.mjs.map +1 -1
  3. package/package.json +1 -1
package/fesm2022/idsoftsource-initial-process.mjs CHANGED
@@ -5830,14 +5830,14 @@ class PreviewComponent {
5830
5830
  }
5831
5831
  }
5832
5832
  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$2.TokenService }, { token: i1$2.RoleContextService }, { token: ProvidersService }, { token: FrontEndProvidersService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
5833
- 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 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</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=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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=\".png,.jpg,.jpeg\" 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 <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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-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{3}\\) \\d{3}-\\d{4}$\" 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 <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-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-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-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\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 || !isBasicFormValid\" (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 && !hasRoleContextUserId\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n Company phone must be 10 digits\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=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !workSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 item-avatar--work me-3\">{{ (job.company || job.jobTitle || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}</span>\r\n <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !certificationSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !licenseSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !toolsSectionHasUnsavedItems() || 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !skillsSectionHasUnsavedItems() || 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !educationSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 item-avatar--edu flex-shrink-0\">{{ (edu.institution || edu.degree || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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;filter:brightness(0) invert(1);\" 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-size:18px;font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:14px}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.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:14px}.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;max-width:calc(100vw - 32px);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:1px solid #dc3545;color:#dc3545;border-radius:10px}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:14px!important}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:100%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::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 #4077AD!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:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:14px;color:#1f2937}.item-title-sm{font-size:14px}.item-meta-line{display:block;font-size:12px;color:#2d5a8a;margin-top:3px}.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:14px}.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:14px}.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:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.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}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn:not(.rounded-pill):not(.rounded-circle){border-radius:5px!important}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#007aff!important;border-color:#e0edf2!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.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: i11.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.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.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"] }] });
5833
+ 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 <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 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</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=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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=\".png,.jpg,.jpeg\" 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 <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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 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 \"\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 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-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{3}\\) \\d{3}-\\d{4}$\" 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 <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-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-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-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\r\n\r\n </form>\r\n </div>\r\n <div class=\"card-footer 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 || !isBasicFormValid\" (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 && !hasRoleContextUserId\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n Company phone must be 10 digits\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=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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 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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !workSectionHasUnsavedItems() || 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\" role=\"button\"\r\n (click)=\"addJob()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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\" [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 item-avatar--work me-3\">{{ (job.company || job.jobTitle || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}</span>\r\n <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\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 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 \" [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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !certificationSectionHasUnsavedItems() || 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\" role=\"button\" (click)=\"addCertification()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !licenseSectionHasUnsavedItems() || 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\" role=\"button\" (click)=\"addLicense()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !toolsSectionHasUnsavedItems() || 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 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !skillsSectionHasUnsavedItems() || 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 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !educationSectionHasUnsavedItems() || 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\" role=\"button\" (click)=\"addEducation()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </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 item-avatar--edu flex-shrink-0\">{{ (edu.institution || edu.degree || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div><!-- 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\" style=\"border-radius: 5px !important;\" (click)=\"onBackClick()\">\r\n <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em;filter:brightness(0) invert(1);\" alt=\"\" /> Back\r\n </button>\r\n <button class=\"btn btn-primary px-5 shadow-sm h-auto\" style=\"border-radius: 5px !important;\" [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-size:18px;font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:14px}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.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:5px;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:14px}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px)}.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)}.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 .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)}.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}.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;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;padding:16px}.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:1px solid #dc3545;color:#dc3545;border-radius:10px}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;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;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:5px;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:14px!important}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:100%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::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:5px;background:#4077ad;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9;filter:invert(47%) sepia(8%) saturate(483%) hue-rotate(176deg) brightness(91%) contrast(87%)}.section-header-title h5.fw-bold{color:#69707d}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 5px 5px 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 #4077AD!important;border-radius:0 5px 5px 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 5px 5px 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 5px 5px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:14px;color:#1f2937}.item-title-sm{font-size:14px;color:#69707d!important}.item-meta-line{display:block;font-size:12px;color:#2d5a8a;margin-top:3px}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:5px;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:14px}.empty-state-wrap:hover{background:#f0f6ff;border-color:#4077ad}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:14px}.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:5px 5px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.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}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn:not(.rounded-circle){border-radius:5px!important}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#4077ad!important;border-color:#e0edf2!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.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: i11.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.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.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"] }] });
5834
5834
  }
5835
5835
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PreviewComponent, decorators: [{
5836
5836
  type: Component,
5837
5837
  args: [{ selector: 'app-preview', standalone: true, imports: [
5838
5838
  CommonModule, ModalModule, FormsModule, ReactiveFormsModule,
5839
5839
  NgSelectModule, NgxStarsModule, BsDatepickerModule, TextMaskModule, GooglePlaceModule
5840
- ], 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 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</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=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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=\".png,.jpg,.jpeg\" 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 <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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-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{3}\\) \\d{3}-\\d{4}$\" 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 <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-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-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-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\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 || !isBasicFormValid\" (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 && !hasRoleContextUserId\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n Company phone must be 10 digits\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=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !workSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 item-avatar--work me-3\">{{ (job.company || job.jobTitle || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}</span>\r\n <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !certificationSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !licenseSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !toolsSectionHasUnsavedItems() || 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !skillsSectionHasUnsavedItems() || 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !educationSectionHasUnsavedItems() || 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 item-avatar--edu flex-shrink-0\">{{ (edu.institution || edu.degree || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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;filter:brightness(0) invert(1);\" 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-size:18px;font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:14px}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.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:14px}.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;max-width:calc(100vw - 32px);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:1px solid #dc3545;color:#dc3545;border-radius:10px}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:14px!important}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:100%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::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 #4077AD!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:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:14px;color:#1f2937}.item-title-sm{font-size:14px}.item-meta-line{display:block;font-size:12px;color:#2d5a8a;margin-top:3px}.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:14px}.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:14px}.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:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.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}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn:not(.rounded-pill):not(.rounded-circle){border-radius:5px!important}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#007aff!important;border-color:#e0edf2!important}\n"] }]
5840
+ ], template: "<div class=\"preview-page-header\" *ngIf=\"!isResume\">\r\n <div class=\"d-flex align-items-center gap-2 mb-1\">\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 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10)}\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">Company phone must be 10 digits</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=\".png,.jpg,.jpeg\" class=\"form-control form-control-sm\" (change)=\"uploadCompanyImage($event)\" name=\"setupCompanyLogo\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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=\".png,.jpg,.jpeg\" 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 <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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 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 \"\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 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-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{3}\\) \\d{3}-\\d{4}$\" 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 <span *ngIf=\"phone.errors?.['pattern']\">Phone number must be 10 digits</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"col-md-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-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-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\r\n\r\n </form>\r\n </div>\r\n <div class=\"card-footer 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 || !isBasicFormValid\" (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 && !hasRoleContextUserId\">\r\n <div class=\"d-flex justify-content-between align-items-center mb-3 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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': companyFormSubmitted && (!tempCompanyDetails.companyPhoneNumber?.trim() || getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10) }\"\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 class=\"invalid-feedback\" *ngIf=\"tempCompanyDetails.companyPhoneNumber?.trim() && getDigitCount(tempCompanyDetails.companyPhoneNumber) !== 10 && companyFormSubmitted\">\r\n Company phone must be 10 digits\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=\".png,.jpg,.jpeg\" (change)=\"uploadCompanyImage($event)\" class=\"form-control\" />\r\n <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\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 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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !workSectionHasUnsavedItems() || 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\" role=\"button\"\r\n (click)=\"addJob()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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\" [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 item-avatar--work me-3\">{{ (job.company || job.jobTitle || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"mb-0 fw-bold item-title-sm\">{{ job.jobTitle }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ job.company || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ formatMonthYear(job.startDate) }} - {{ job.isCurrent ? 'Present' :\r\n formatMonthYear(job.endDate) }}</span>\r\n <span class=\"item-meta-line\">{{ job.city }}<span *ngIf=\"job.city && job.state\">, </span>{{ job.state }}<ng-container *ngIf=\"!job.city && !job.state\">\u2014</ng-container></span>\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 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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 \" [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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !certificationSectionHasUnsavedItems() || 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\" role=\"button\" (click)=\"addCertification()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ cert.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ cert.issuingOrganization || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.credentialId || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.issueDate ? formatMonthYear(cert.issueDate) : '\u2014' }} - {{ cert.expiryDate ? formatMonthYear(cert.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ cert.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !licenseSectionHasUnsavedItems() || 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\" role=\"button\" (click)=\"addLicense()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <div class=\"fw-semibold item-title-sm\">{{ lic.name }}</div>\r\n <span class=\"badge border\"\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>\r\n <span class=\"item-meta-line\">{{ lic.issuingAuthority || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.licenseNumber || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.issueDate ? formatMonthYear(lic.issueDate) : '\u2014' }} - {{ lic.expiryDate ? formatMonthYear(lic.expiryDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ lic.state || '\u2014' }}</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>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !toolsSectionHasUnsavedItems() || 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 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !skillsSectionHasUnsavedItems() || 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 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;margin-left: -57px;\" />\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 section-header-row\">\r\n <div class=\"d-flex align-items-center gap-2 section-header-title\">\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 || !educationSectionHasUnsavedItems() || 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\" role=\"button\" (click)=\"addEducation()\">\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button type=\"button\" class=\"btn btn-sm btn-link text-secondary\"\r\n (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button type=\"button\" class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\"\r\n (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </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 item-avatar--edu flex-shrink-0\">{{ (edu.institution || edu.degree || '?').charAt(0).toUpperCase() }}</div> -->\r\n <div>\r\n <div class=\"d-flex align-items-center gap-2 flex-wrap\">\r\n <h6 class=\"fw-bold mb-0 item-title-sm\">{{ edu.degree }}</h6>\r\n <span class=\"badge border\"\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 </div>\r\n <span class=\"item-meta-line\">{{ edu.institution || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.degreeType || '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.startDate ? formatMonthYear(edu.startDate) : '\u2014' }} - {{ edu.endDate ? formatMonthYear(edu.endDate) : '\u2014' }}</span>\r\n <span class=\"item-meta-line\">{{ edu.city }}<span *ngIf=\"edu.city && edu.state\">, </span>{{ edu.state }}<ng-container *ngIf=\"!edu.city && !edu.state\">\u2014</ng-container></span>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX, JPG, JPEG, PNG</small>\r\n <div class=\"small text-muted mt-1 d-flex align-items-center gap-2\" *ngIf=\"tempEducation()?.fileName\">\r\n <span>{{ tempEducation()?.fileName }}</span>\r\n <button type=\"button\" class=\"btn btn-link btn-sm p-0\"\r\n (click)=\"previewSelectedFile(tempEducation())\">Preview</button>\r\n </div>\r\n </div>\r\n </form>\r\n\r\n <div class=\"d-flex justify-content-end gap-2 mt-2\">\r\n <button class=\"btn btn-sm btn-link text-secondary\" (click)=\"cancelEditEducation()\">Cancel</button>\r\n <button class=\"btn btn-sm btn-success px-4\" [disabled]=\"isSavingEducation\" (click)=\"saveEducation()\">\r\n <span *ngIf=\"isSavingEducation\" class=\"spinner-border spinner-border-sm me-1\"></span>\r\n {{ isSavingEducation ? 'Uploading...' : educationActionLabel(editingEducationIndex()) }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n\r\n </div><!-- 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\" style=\"border-radius: 5px !important;\" (click)=\"onBackClick()\">\r\n <img src=\"/assets/images/icons/arrow-left.svg\" width=\"14\" height=\"14\" class=\"me-1\" style=\"vertical-align:-0.1em;filter:brightness(0) invert(1);\" alt=\"\" /> Back\r\n </button>\r\n <button class=\"btn btn-primary px-5 shadow-sm h-auto\" style=\"border-radius: 5px !important;\" [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-size:18px;font-weight:600;margin:0}.preview-subtitle{margin-top:7px;font-size:14px}.preview-card-gradient h2,.section h5.fw-bold{font-size:18px}.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:5px;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:14px}.extra-small{font-size:.8rem}.card{transition:transform .2s ease,box-shadow .2s ease}.card:hover{transform:translateY(-3px)}.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)}.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 .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)}.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}.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;max-width:calc(100vw - 32px);background:#fff;border-radius:10px;padding:16px}.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:1px solid #dc3545;color:#dc3545;border-radius:10px}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;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;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:5px;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:14px!important}.preview-page-header{margin:20px auto 8px;padding:0 4px}.container{padding-left:4px;padding-right:4px}.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.actions{margin:24px 0 16px}.section-header-title{flex-wrap:wrap}.section-header-title>.section-flag{flex-basis:100%}.section-header-row{align-items:flex-start}.preview-card-gradient{padding:14px 14px 12px}.preview-card-gradient h2{font-size:18px}.popup{width:calc(100vw - 40px);right:16px;top:12%}.card{padding:0}.card-body.p-4,.px-4.py-3{padding:12px!important}.row.g-4,.row.g-3{--bs-gutter-x: .75rem}.d-flex.gap-4{gap:10px!important}.preview-card-gradient>.d-flex.justify-content-between.align-items-start{flex-wrap:wrap;row-gap:8px}.preview-card-gradient>.d-flex.justify-content-between.align-items-start>.badge.bg-primary-subtle{margin-left:auto}}@media screen and (max-width: 575px){.preview-title{font-size:16px}.preview-subtitle{font-size:14px}.section>.d-flex{flex-wrap:wrap;row-gap:8px}.section>.d-flex>.d-flex:last-child{width:100%;justify-content:flex-end}}::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:5px;background:#4077ad;display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;letter-spacing:1px;flex-shrink:0}.section-header-icon{font-size:20px;line-height:1;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.9;filter:invert(47%) sepia(8%) saturate(483%) hue-rotate(176deg) brightness(91%) contrast(87%)}.section-header-title h5.fw-bold{color:#69707d}.work-accent-item{border-left:4px solid #4077ad!important;border-radius:0 5px 5px 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 #4077AD!important;border-radius:0 5px 5px 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 5px 5px 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 5px 5px 0!important;transition:background-color .18s ease}.lic-accent-item:hover{background-color:#fffbeb!important}.field-label-sm{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6b7280;margin-bottom:3px;display:block}.field-value-sm{font-weight:600;font-size:14px;color:#1f2937}.item-title-sm{font-size:14px;color:#69707d!important}.item-meta-line{display:block;font-size:12px;color:#2d5a8a;margin-top:3px}.empty-state-wrap{text-align:center;padding:32px 20px;background:#fafbfc;border:1.5px dashed #d1d5db;border-radius:5px;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.empty-state-wrap .empty-icon{font-size:2rem;color:#d1d5db;margin-bottom:8px}.empty-state-wrap p{color:#9ca3af;margin:0;font-size:14px}.empty-state-wrap:hover{background:#f0f6ff;border-color:#4077ad}.form-panel{background:#fff;border:1px solid #e2e8f0;border-radius:5px;padding:20px}.form-panel .form-control,.form-panel .form-select{border-color:#d1d5db;border-radius:8px;font-size:14px}.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:5px 5px 0 0}.item-icon-circle{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:700;color:#fff;flex-shrink:0}.item-avatar--work{background:linear-gradient(135deg,#4077ad,#2d5a8a)}.item-avatar--edu{background:linear-gradient(135deg,#4077ad,#4338ca)}.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}.btn.btn-primary{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-primary:hover:not(:disabled),.btn.btn-primary:focus:not(:disabled),.btn.btn-primary:active:not(:disabled){background-color:#356895!important;border-color:#356895!important;color:#fff!important}.btn.btn-success,.btn.btn-outline-success{background-color:#4077ad!important;border-color:#4077ad!important;color:#fff!important}.btn.btn-success:hover:not(:disabled),.btn.btn-success:focus:not(:disabled),.btn.btn-success:active:not(:disabled),.btn.btn-outline-success:hover:not(:disabled),.btn.btn-outline-success:focus:not(:disabled),.btn.btn-outline-success:active:not(:disabled){background-color:#336843!important;border-color:#336843!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill{background-color:#69707d!important;border-color:#69707d!important;color:#fff!important}.btn.btn-outline-secondary.rounded-pill:hover:not(:disabled),.btn.btn-outline-secondary.rounded-pill:focus:not(:disabled),.btn.btn-outline-secondary.rounded-pill:active:not(:disabled){background-color:#565c66!important;border-color:#565c66!important;color:#fff!important}.btn.btn-outline-secondary:not(.rounded-pill){background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important}.btn.btn-outline-secondary:not(.rounded-pill):hover:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):focus:not(:disabled),.btn.btn-outline-secondary:not(.rounded-pill):active:not(:disabled){background-color:#c2cbde!important;border-color:#c2cbde!important;color:#69707d!important}.btn.btn-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important}.btn.btn-danger:hover:not(:disabled),.btn.btn-danger:focus:not(:disabled),.btn.btn-danger:active:not(:disabled){background-color:#96271f!important;border-color:#96271f!important;color:#fff!important}.btn.btn-outline-danger.rounded-circle{border-color:#b43026!important;color:#b43026!important}.btn.btn-outline-danger.rounded-circle:hover:not(:disabled),.btn.btn-outline-danger.rounded-circle:focus:not(:disabled),.btn.btn-outline-danger.rounded-circle:active:not(:disabled){border-color:#96271f!important;color:#b43026!important}.btn.btn-link.text-secondary{background-color:#d4dae6!important;border-color:#d4dae6!important;color:#69707d!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-secondary:hover:not(:disabled),.btn.btn-link.text-secondary:focus:not(:disabled){background-color:#c2cbde!important;color:#69707d!important}.btn.btn-link.text-danger{background-color:#b43026!important;border-color:#b43026!important;color:#fff!important;text-decoration:none!important;border-radius:5px}.btn.btn-link.text-danger:hover:not(:disabled),.btn.btn-link.text-danger:focus:not(:disabled){background-color:#96271f!important;color:#fff!important}.btn:not(.rounded-circle){border-radius:5px!important}.badge.bg-warning-subtle.text-warning{background-color:#fff3cd!important;color:#664d03!important;border-color:#ffe69c!important}.badge.bg-success-subtle.text-success{background-color:#4077ad!important;color:#fff!important;border-color:#4077ad!important}.badge.bg-primary-subtle.text-primary{background-color:#e0edf2!important;color:#4077ad!important;border-color:#e0edf2!important}\n"] }]
5841
5841
  }], ctorParameters: () => [{ type: CredentialingStore }, { type: FileService }, { type: UserSkillSetService }, { type: UserToolService }, { type: UserDocumentService }, { type: UserEducationService }, { type: UserDetailService }, { type: UserExperienceService }, { type: i1$2.TokenService }, { type: i1$2.RoleContextService }, { type: ProvidersService }, { type: FrontEndProvidersService }, { type: undefined, decorators: [{
5842
5842
  type: Inject,
5843
5843
  args: [LIBRARY_CONFIG]
@@ -6129,11 +6129,11 @@ class StepperComponent {
6129
6129
  this.warningTimer = setTimeout(() => (this.showLockWarning = false), 3000);
6130
6130
  }
6131
6131
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, deps: [{ token: CredentialingStore }, { token: WorkExperienceStore }, { token: EducationStore }, { token: CertificationStore }, { token: LicenseStore }], target: i0.ɵɵFactoryTarget.Component });
6132
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch;margin-bottom:30px}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:12px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid rgba(64,119,173,.25);padding:0 10px;gap:8px;box-shadow:-4px 0 12px #00000026}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:38px;height:38px;transform:rotate(-90deg)}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-track{fill:none;stroke:#e2e8f0;stroke-width:3}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-arc{fill:none;stroke:#4077ad;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 3px rgba(64,119,173,.5))}.stepper-wrapper .progress-ring-wrap .progress-ring-label{position:absolute;font-size:9px;font-weight:800;color:#2a5298;letter-spacing:-.02em;line-height:1}.lock-warning{display:flex;align-items:center;gap:8px;padding:0 16px;background:#1c1917;border-top:1px solid rgba(251,146,60,.25);color:#fb923c;font-size:12px;font-weight:500;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}.lock-warning.visible{max-height:48px;opacity:1;padding-top:8px;padding-bottom:8px}.lock-warning svg{flex-shrink:0;width:14px;height:14px;color:#f97316}.lock-warning strong{font-weight:700}@media screen and (max-width: 767px){.stepper-wrapper .tabs{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stepper-wrapper .tabs::-webkit-scrollbar{display:none}.stepper-wrapper .tabs .tab{flex:none;min-width:80px;padding:8px 10px;font-size:12px}.stepper-wrapper .progress-ring-wrap{min-width:52px;width:52px;padding:0 6px}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:32px;height:32px}.stepper-wrapper .progress-ring-wrap .progress-ring-label{font-size:8px;color:#2a5298}}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6132
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: StepperComponent, isStandalone: false, selector: "app-stepper", viewQueries: [{ propertyName: "tabsRow", first: true, predicate: ["tabsRow"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch;margin-bottom:30px}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:12px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid rgba(64,119,173,.25);padding:0 10px;gap:8px;box-shadow:-4px 0 12px #00000026}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:38px;height:38px;transform:rotate(-90deg)}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-track{fill:none;stroke:#e2e8f0;stroke-width:3}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-arc{fill:none;stroke:#4077ad;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 3px rgba(64,119,173,.5))}.stepper-wrapper .progress-ring-wrap .progress-ring-label{position:absolute;font-size:9px;font-weight:800;color:#2a5298;letter-spacing:-.02em;line-height:1}.lock-warning{display:flex;align-items:center;gap:8px;padding:0 16px;background:#4077ad;border-top:1px solid rgba(251,146,60,.25);color:#fff;font-size:12px;font-weight:500;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}.lock-warning.visible{max-height:48px;opacity:1;padding-top:8px;padding-bottom:8px}.lock-warning svg{flex-shrink:0;width:14px;height:14px;color:#4077ad}.lock-warning strong{font-weight:700}@media screen and (max-width: 767px){.stepper-wrapper .tabs{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stepper-wrapper .tabs::-webkit-scrollbar{display:none}.stepper-wrapper .tabs .tab{flex:none;min-width:80px;padding:8px 10px;font-size:12px}.stepper-wrapper .progress-ring-wrap{min-width:52px;width:52px;padding:0 6px}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:32px;height:32px}.stepper-wrapper .progress-ring-wrap .progress-ring-label{font-size:8px;color:#2a5298}}\n"], dependencies: [{ kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
6133
6133
  }
6134
6134
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StepperComponent, decorators: [{
6135
6135
  type: Component,
6136
- args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch;margin-bottom:30px}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:12px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid rgba(64,119,173,.25);padding:0 10px;gap:8px;box-shadow:-4px 0 12px #00000026}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:38px;height:38px;transform:rotate(-90deg)}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-track{fill:none;stroke:#e2e8f0;stroke-width:3}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-arc{fill:none;stroke:#4077ad;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 3px rgba(64,119,173,.5))}.stepper-wrapper .progress-ring-wrap .progress-ring-label{position:absolute;font-size:9px;font-weight:800;color:#2a5298;letter-spacing:-.02em;line-height:1}.lock-warning{display:flex;align-items:center;gap:8px;padding:0 16px;background:#1c1917;border-top:1px solid rgba(251,146,60,.25);color:#fb923c;font-size:12px;font-weight:500;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}.lock-warning.visible{max-height:48px;opacity:1;padding-top:8px;padding-bottom:8px}.lock-warning svg{flex-shrink:0;width:14px;height:14px;color:#f97316}.lock-warning strong{font-weight:700}@media screen and (max-width: 767px){.stepper-wrapper .tabs{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stepper-wrapper .tabs::-webkit-scrollbar{display:none}.stepper-wrapper .tabs .tab{flex:none;min-width:80px;padding:8px 10px;font-size:12px}.stepper-wrapper .progress-ring-wrap{min-width:52px;width:52px;padding:0 6px}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:32px;height:32px}.stepper-wrapper .progress-ring-wrap .progress-ring-label{font-size:8px;color:#2a5298}}\n"] }]
6136
+ args: [{ selector: 'app-stepper', standalone: false, template: "<div class=\"stepper-wrapper\">\r\n <div class=\"tabs\" #tabsRow>\r\n <div\r\n *ngFor=\"let step of steps; let i = index\"\r\n class=\"tab\"\r\n [class.active]=\"store.currentStep() === i + 1\"\r\n [class.completed]=\"isStepComplete(i + 1)\"\r\n [class.locked]=\"isLocked(i)\"\r\n (click)=\"goToStep(i)\"\r\n >\r\n <span\r\n class=\"step-badge\"\r\n [class.badge-completed]=\"isStepComplete(i + 1)\"\r\n [class.badge-active]=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n [class.badge-pending]=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n >\r\n <!-- Completed: checkmark circle -->\r\n <svg *ngIf=\"isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm3.03-9.03a.75.75 0 0 0-1.06-1.06L7 7.88 6.03 6.91a.75.75 0 0 0-1.06 1.06l1.5 1.5a.75.75 0 0 0 1.06 0l3.5-3.5z\"/>\r\n </svg>\r\n <!-- In Progress: filled circle pulse dot -->\r\n <svg *ngIf=\"store.currentStep() === i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"currentColor\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"4\"/>\r\n <circle cx=\"8\" cy=\"8\" r=\"7\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"/>\r\n </svg>\r\n <!-- Pending: clock icon -->\r\n <svg *ngIf=\"store.currentStep() !== i + 1 && !isStepComplete(i + 1)\"\r\n viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <circle cx=\"8\" cy=\"8\" r=\"7\"/>\r\n <polyline points=\"8,4.5 8,8 10.5,10\"/>\r\n </svg>\r\n </span>\r\n {{ step }}\r\n </div>\r\n <div class=\"progress-ring-wrap\">\r\n <svg viewBox=\"0 0 36 36\" class=\"progress-ring-svg\">\r\n <circle class=\"progress-ring-track\" cx=\"18\" cy=\"18\" r=\"15.9\"/>\r\n <circle class=\"progress-ring-arc\" cx=\"18\" cy=\"18\" r=\"15.9\"\r\n [style.stroke-dashoffset]=\"progressOffset\"/>\r\n </svg>\r\n <span class=\"progress-ring-label\">{{ progressPercent }}%</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Warning shown when user clicks a locked tab -->\r\n <div class=\"lock-warning\" [class.visible]=\"showLockWarning\">\r\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"/>\r\n <path d=\"M7 11V7a5 5 0 0 1 10 0v4\"/>\r\n </svg>\r\n Complete <strong>Basic Details</strong> first to unlock the remaining steps.\r\n </div>\r\n</div>\r\n", styles: [".stepper-wrapper{display:flex;flex-direction:column;align-items:stretch;margin-bottom:30px}.stepper-wrapper .tabs{width:100%;display:flex;background:#4077ad}.stepper-wrapper .tabs .tab{flex:1;padding:10px 4px;white-space:nowrap;cursor:pointer;background:transparent;color:#ffffffa6;font-weight:500;font-size:12px;transition:all .25s ease;text-align:center;display:flex;flex-direction:column;align-items:center;gap:4px;border-bottom:3px solid transparent}.stepper-wrapper .tabs .tab:hover:not(.locked){color:#ffffffe6;background:#ffffff14}.stepper-wrapper .tabs .tab.completed{background:transparent;color:#fffc;border-bottom:3px solid rgba(74,222,128,.6)}.stepper-wrapper .tabs .tab.active{background:#fff;color:#2a5298;border-bottom:3px solid #4077AD;font-weight:700}.stepper-wrapper .tabs .tab.locked{cursor:not-allowed;opacity:.35}.stepper-wrapper .step-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px}.stepper-wrapper .step-badge svg{width:14px;height:14px;flex-shrink:0}.stepper-wrapper .step-badge.badge-completed{color:#4ade80}.stepper-wrapper .step-badge.badge-active{color:#2a5298}.stepper-wrapper .step-badge.badge-pending{color:#ffffff8c}.stepper-wrapper .progress-ring-wrap{position:relative;width:100px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff;border-left:3px solid rgba(64,119,173,.25);padding:0 10px;gap:8px;box-shadow:-4px 0 12px #00000026}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:38px;height:38px;transform:rotate(-90deg)}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-track{fill:none;stroke:#e2e8f0;stroke-width:3}.stepper-wrapper .progress-ring-wrap .progress-ring-svg .progress-ring-arc{fill:none;stroke:#4077ad;stroke-width:3.5;stroke-linecap:round;stroke-dasharray:100;transition:stroke-dashoffset .5s ease;filter:drop-shadow(0 0 3px rgba(64,119,173,.5))}.stepper-wrapper .progress-ring-wrap .progress-ring-label{position:absolute;font-size:9px;font-weight:800;color:#2a5298;letter-spacing:-.02em;line-height:1}.lock-warning{display:flex;align-items:center;gap:8px;padding:0 16px;background:#4077ad;border-top:1px solid rgba(251,146,60,.25);color:#fff;font-size:12px;font-weight:500;max-height:0;overflow:hidden;opacity:0;transition:max-height .25s ease,opacity .25s ease,padding .25s ease}.lock-warning.visible{max-height:48px;opacity:1;padding-top:8px;padding-bottom:8px}.lock-warning svg{flex-shrink:0;width:14px;height:14px;color:#4077ad}.lock-warning strong{font-weight:700}@media screen and (max-width: 767px){.stepper-wrapper .tabs{overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}.stepper-wrapper .tabs::-webkit-scrollbar{display:none}.stepper-wrapper .tabs .tab{flex:none;min-width:80px;padding:8px 10px;font-size:12px}.stepper-wrapper .progress-ring-wrap{min-width:52px;width:52px;padding:0 6px}.stepper-wrapper .progress-ring-wrap .progress-ring-svg{width:32px;height:32px}.stepper-wrapper .progress-ring-wrap .progress-ring-label{font-size:8px;color:#2a5298}}\n"] }]
6137
6137
  }], ctorParameters: () => [{ type: CredentialingStore }, { type: WorkExperienceStore }, { type: EducationStore }, { type: CertificationStore }, { type: LicenseStore }], propDecorators: { tabsRow: [{
6138
6138
  type: ViewChild,
6139
6139
  args: ['tabsRow', { read: ElementRef }]
@@ -8437,7 +8437,7 @@ class SkillsComponent {
8437
8437
  this.userSkillsSub?.unsubscribe();
8438
8438
  }
8439
8439
  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$2.RoleContextService }, { token: CredentialingStore }, { token: i1$2.TokenService }], target: i0.ɵɵFactoryTarget.Component });
8440
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, viewQueries: [{ propertyName: "skillDetailList", first: true, predicate: ["skillDetailList"], descendants: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Visible</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></label>\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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n placeholder=\"Select Profession\"\r\n [clearable]=\"true\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Skill</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllSkills\">\r\n <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"skill.professionName || skill.professionGroup || skill.residentialCommercial || skill.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ skill.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionDescription\">\r\n <span class=\"chip-popover-label\">profession Description</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #skillDetailList\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.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:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.skill-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.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}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.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: i11.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"] }], animations: [
8440
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SkillsComponent, isStandalone: false, selector: "app-skills", inputs: { providerId: "providerId", providerName: "providerName" }, viewQueries: [{ propertyName: "skillDetailList", first: true, predicate: ["skillDetailList"], descendants: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Visible</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></label>\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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n placeholder=\"Select Profession\"\r\n [clearable]=\"true\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Skill</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllSkills\">\r\n <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"skill.professionName || skill.professionGroup || skill.residentialCommercial || skill.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ skill.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionDescription\">\r\n <span class=\"chip-popover-label\">profession Description</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #skillDetailList\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.skill-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.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}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}\n"], dependencies: [{ kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.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: i11.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"] }], animations: [
8441
8441
  trigger('expandCollapse', [
8442
8442
  state('open', style({
8443
8443
  height: '*',
@@ -8475,7 +8475,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
8475
8475
  })),
8476
8476
  transition('open <=> closed', animate('300ms ease'))
8477
8477
  ])
8478
- ], template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Visible</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></label>\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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n placeholder=\"Select Profession\"\r\n [clearable]=\"true\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Skill</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllSkills\">\r\n <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"skill.professionName || skill.professionGroup || skill.residentialCommercial || skill.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ skill.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionDescription\">\r\n <span class=\"chip-popover-label\">profession Description</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #skillDetailList\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.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:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.skill-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.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}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}\n"] }]
8478
+ ], template: "<!-- \u2500\u2500\u2500 Skills Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Skills</h3>\r\n <p class=\"preview-subtitle\">{{ userSkillsPreview.length }} skill{{ userSkillsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let skill of userSkillsPreview; let i = index\" class=\"sk-card\">\r\n <div class=\"sk-card-accent\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar\">{{ (skill.skillSetName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ skill.skillSetName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"skill.providerName\">{{ skill.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backToSkill(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserSkillset()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editSkillFromPreview(skill, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteSkillFromPreview(skill, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || getSkillKey(model) !== getSkillKey(skill)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"skill.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ skill.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"skill.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Visible</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"skill.starRating/2\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"skill.notes\">{{ skill.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <div *ngIf=\"isEditMode && getSkillKey(model) === getSkillKey(skill)\"\r\n [formGroup]=\"tab.at(0)\" class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></label>\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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\"></ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Visible</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Skills Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"skills-container\" *ngIf=\"store.stepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/stars.svg\" alt=\"skills\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Skills</h3>\r\n <p class=\"step-card-subtitle\">Select your skill areas and rate your proficiency</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Select skills -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n placeholder=\"Select Profession\"\r\n [clearable]=\"true\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Skill</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div *ngIf=\"errMsg\" class=\"invalid-feedback is-invalid d-block\">Please Enter Skillsets Name</div>\r\n <div *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"skill-chips-wrapper\" [ngClass]=\"showLoading && !isEditMode ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllSkills\">\r\n <div class=\"skill-chips\" [class.collapsed]=\"!showAllSkills\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"skill.professionName || skill.professionGroup || skill.residentialCommercial || skill.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ skill.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"skill.professionDescription\">\r\n <span class=\"chip-popover-label\">profession Description</span>\r\n <span class=\"chip-popover-value\">{{ skill.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && skillSets.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllSkills = !showAllSkills\">\r\n {{ showAllSkills ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllSkills\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-skill detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #skillDetailList\r\n *ngIf=\"tab.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading && !isEditMode, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Skill Details</span>\r\n <span class=\"sk-count-badge\">{{ tab.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab.controls.length > 1 && index === 0\" title=\"Copy these values to all skills\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.skillSetId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></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 }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\" (change)=\"onYearChange(group)\"></ng-select>\r\n <div *ngIf=\"userSkillSubmitted && k?.year?.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Description</label>\r\n <textarea placeholder=\"Describe your skill...\" formControlName=\"notes\" class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userSkillSubmitted && k?.notes?.errors }\" rows=\"2\"></textarea>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Add mode -->\r\n<div *ngIf=\"store.stepView() === 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"userSkillsPreview.length > 0 ? cancel() : back()\">\r\n <svg *ngIf=\"userSkillsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userSkillsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userSkillsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"back-btn me-3\" *ngIf=\"userSkillsPreview.length === 0\" (click)=\"next()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n Skip\r\n </button>\r\n <button class=\"continue-btn\" (click)=\"onContinue()\" [disabled]=\"showLoader\" [ng2-loading]=\"showLoader\">\r\n Continue\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div *ngIf=\"store.stepView() !== 'add'\" class=\"skills-container last footer-actions\">\r\n <button class=\"back-btn\" (click)=\"back()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mb-res\">\r\n <button class=\"continue-btn add me-3\" *ngIf=\"store.stepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M5 12h14M12 5l7 7-7 7\"/></svg>\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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;height:100px;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.skill-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.skill-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.skill-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.skill-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.skill-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.skill-chip input[type=checkbox]{display:none}.skill-chip .chip-check-icon{flex-shrink:0}.skill-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.skill-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.skill-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.skill-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.skill-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.skill-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}::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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover,.skip-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit,.skip-btn.edit{padding:5px 15px;min-height:20px;min-width:auto}.mb-res .back-btn{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.mb-res .back-btn:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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:#f2f4fa;color:#69707d}.continue-btn.add:hover{background:#e4e8f2}.footer-actions{display:flex;justify-content:space-between;align-items:center;margin-top:64px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#ebf2f9;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#ebf2f9;color:#4077ad;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#ebf2f9;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#4077ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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)}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@media screen and (max-width: 767px){.skills-container{padding:16px}.title,h5.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}.sk-grid,.sk-edit-row,.sk-fields-row,.sk-select-row{grid-template-columns:1fr}}\n"] }]
8479
8479
  }], ctorParameters: () => [{ type: SkillSetService }, { type: UserSkillSetService }, { type: UserService }, { type: i8.UntypedFormBuilder }, { type: UtilsService }, { type: i1$2.RoleContextService }, { type: CredentialingStore }, { type: i1$2.TokenService }], propDecorators: { providerId: [{
8480
8480
  type: Input
8481
8481
  }], providerName: [{
@@ -9619,7 +9619,7 @@ class ToolsComponent {
9619
9619
  });
9620
9620
  }
9621
9621
  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$2.TokenService }, { token: i1$2.RoleContextService }, { token: UserDetailService }, { token: ProfessionService }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
9622
- 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" }, viewQueries: [{ propertyName: "toolDetailList", first: true, predicate: ["toolDetailList"], descendants: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools &amp; Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar sk-avatar--tool\">{{ (tool.toolName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"tool.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ tool.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.make\">\r\n <span class=\"detail-label\">Manufacturer</span>\r\n <span class=\"detail-value\">{{ tool.make }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.model\">\r\n <span class=\"detail-label\">Model</span>\r\n <span class=\"detail-value\">{{ tool.model }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.serialNumber\">\r\n <span class=\"detail-label\">Serial Number</span>\r\n <span class=\"detail-value\">{{ tool.serialNumber }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Active</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools &amp; Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n [clearable]=\"false\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Tool</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllTools\">\r\n <div class=\"tool-chips\" [class.collapsed]=\"!showAllTools\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"Tool.professionName || Tool.professionGroup || Tool.residentialCommercial || Tool.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ Tool.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionDescription\">\r\n <span class=\"chip-popover-label\">Description</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && tools.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllTools = !showAllTools\">\r\n {{ showAllTools ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllTools\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #toolDetailList\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1 && index === 0\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self-ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\" [appendTo]=\"'body'\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", 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:18px;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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.tool-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.tool-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.tool-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.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:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.tool-chip input[type=checkbox]{display:none}.tool-chip .chip-check-icon{flex-shrink:0}.tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.tool-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.tool-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.tool-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.tool-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.back-btn.add:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-avatar--tool{background:linear-gradient(135deg,#d97706,#b45309)}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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:5px;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)}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0;max-width:unset}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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){.sk-select-row{grid-template-columns:1fr}.tools-container h3,h5.title{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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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:18px;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:5px;border:1.5px solid #D4DAE6;background:#d4dae6;color:#69707d;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.modal-confirm-btn{height:42px;min-width:150px;border-radius:5px;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: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.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: i11.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"] }], animations: [
9622
+ 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" }, viewQueries: [{ propertyName: "toolDetailList", first: true, predicate: ["toolDetailList"], descendants: true }], ngImport: i0, template: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools &amp; Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar sk-avatar--tool\">{{ (tool.toolName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"tool.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ tool.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.make\">\r\n <span class=\"detail-label\">Manufacturer</span>\r\n <span class=\"detail-value\">{{ tool.make }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.model\">\r\n <span class=\"detail-label\">Model</span>\r\n <span class=\"detail-value\">{{ tool.model }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.serialNumber\">\r\n <span class=\"detail-label\">Serial Number</span>\r\n <span class=\"detail-value\">{{ tool.serialNumber }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Active</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools &amp; Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n [clearable]=\"false\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Tool</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllTools\">\r\n <div class=\"tool-chips\" [class.collapsed]=\"!showAllTools\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"Tool.professionName || Tool.professionGroup || Tool.residentialCommercial || Tool.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ Tool.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionDescription\">\r\n <span class=\"chip-popover-label\">Description</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && tools.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllTools = !showAllTools\">\r\n {{ showAllTools ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllTools\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #toolDetailList\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1 && index === 0\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self-ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\" [appendTo]=\"'body'\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", 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:18px;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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.tool-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.tool-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.tool-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.tool-chip input[type=checkbox]{display:none}.tool-chip .chip-check-icon{flex-shrink:0}.tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.tool-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.tool-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.tool-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.tool-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.back-btn.add:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-avatar--tool{background:linear-gradient(135deg,#d97706,#b45309)}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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:5px;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)}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0;max-width:unset}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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){.sk-select-row{grid-template-columns:1fr}.tools-container h3,h5.title{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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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:18px;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:5px;border:1.5px solid #D4DAE6;background:#d4dae6;color:#69707d;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.modal-confirm-btn{height:42px;min-width:150px;border-radius:5px;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: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i10.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: i11.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"] }], animations: [
9623
9623
  trigger('expandCollapse', [
9624
9624
  state('open', style({
9625
9625
  height: '*',
@@ -9657,7 +9657,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
9657
9657
  })),
9658
9658
  transition('open <=> closed', animate('300ms ease'))
9659
9659
  ])
9660
- ], template: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools &amp; Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar sk-avatar--tool\">{{ (tool.toolName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"tool.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ tool.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.make\">\r\n <span class=\"detail-label\">Manufacturer</span>\r\n <span class=\"detail-value\">{{ tool.make }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.model\">\r\n <span class=\"detail-label\">Model</span>\r\n <span class=\"detail-value\">{{ tool.model }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.serialNumber\">\r\n <span class=\"detail-label\">Serial Number</span>\r\n <span class=\"detail-value\">{{ tool.serialNumber }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Active</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools &amp; Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n [clearable]=\"false\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Tool</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllTools\">\r\n <div class=\"tool-chips\" [class.collapsed]=\"!showAllTools\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"Tool.professionName || Tool.professionGroup || Tool.residentialCommercial || Tool.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ Tool.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionDescription\">\r\n <span class=\"chip-popover-label\">Description</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && tools.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllTools = !showAllTools\">\r\n {{ showAllTools ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllTools\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #toolDetailList\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1 && index === 0\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self-ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\" [appendTo]=\"'body'\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", 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:18px;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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.tool-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.tool-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.tool-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.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:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.tool-chip input[type=checkbox]{display:none}.tool-chip .chip-check-icon{flex-shrink:0}.tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.tool-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.tool-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.tool-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.tool-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.back-btn.add:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-avatar--tool{background:linear-gradient(135deg,#d97706,#b45309)}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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:5px;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)}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0;max-width:unset}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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){.sk-select-row{grid-template-columns:1fr}.tools-container h3,h5.title{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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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:18px;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:5px;border:1.5px solid #D4DAE6;background:#d4dae6;color:#69707d;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.modal-confirm-btn{height:42px;min-width:150px;border-radius:5px;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"] }]
9660
+ ], template: "<!-- \u2500\u2500\u2500 Tools Preview \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'preview'\">\r\n <div class=\"preview-header\">\r\n <div class=\"preview-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"20\" height=\"20\" />\r\n </div>\r\n <div>\r\n <h3 class=\"preview-header-title\">Tools &amp; Equipment</h3>\r\n <p class=\"preview-subtitle\">{{ userToolsPreview.length }} tool{{ userToolsPreview.length !== 1 ? 's' : '' }} added</p>\r\n </div>\r\n </div>\r\n\r\n <div class=\"sk-grid\">\r\n <div *ngFor=\"let tool of userToolsPreview; let i = index\" class=\"sk-card sk-card--tool\">\r\n <div class=\"sk-card-accent sk-card-accent--tool\"></div>\r\n <div class=\"sk-card-body\">\r\n\r\n <div class=\"sk-head\">\r\n <div class=\"sk-avatar sk-avatar--tool\">{{ (tool.toolName || '?').charAt(0).toUpperCase() }}</div>\r\n <div class=\"sk-title-block\">\r\n <span class=\"sk-name\">{{ tool.toolName }}</span>\r\n <span class=\"sk-sub\" *ngIf=\"tool.providerName\">{{ tool.providerName }}</span>\r\n </div>\r\n <div class=\"sk-top-actions\">\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\">\r\n <button class=\"sk-text-btn cancel\" type=\"button\" (click)=\"backTool(null)\">Cancel</button>\r\n <button class=\"sk-text-btn save\" type=\"button\" (click)=\"saveUserTools()\" [disabled]=\"showLoader\">Update</button>\r\n </ng-container>\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <button class=\"icon-btn edit-btn\" (click)=\"editToolFromPreview(tool, null, $event)\" title=\"Edit\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7\"/><path d=\"M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z\"/></svg>\r\n </button>\r\n <button class=\"icon-btn delete-btn\" (click)=\"deleteToolFromPreview(tool, $event)\" title=\"Delete\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><polyline points=\"3 6 5 6 21 6\"/><path d=\"M19 6l-1 14a2 2 0 01-2 2H8a2 2 0 01-2-2L5 6\"/><path d=\"M10 11v6M14 11v6\"/><path d=\"M9 6V4a1 1 0 011-1h4a1 1 0 011 1v2\"/></svg>\r\n </button>\r\n </ng-container>\r\n </div>\r\n </div>\r\n\r\n <!-- View mode -->\r\n <ng-container *ngIf=\"!isEditMode || editingToolKey !== getToolKey(tool)\">\r\n <div class=\"detail-row\">\r\n <div class=\"detail-item\" *ngIf=\"tool.year\">\r\n <span class=\"detail-label\">Years of Experience</span>\r\n <span class=\"detail-value\">{{ tool.year }} yr(s)</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.make\">\r\n <span class=\"detail-label\">Manufacturer</span>\r\n <span class=\"detail-value\">{{ tool.make }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.model\">\r\n <span class=\"detail-label\">Model</span>\r\n <span class=\"detail-value\">{{ tool.model }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.serialNumber\">\r\n <span class=\"detail-label\">Serial Number</span>\r\n <span class=\"detail-value\">{{ tool.serialNumber }}</span>\r\n </div>\r\n <div class=\"detail-item\" *ngIf=\"tool.profileVisibility\">\r\n <span class=\"detail-label\">Visibility</span>\r\n <span class=\"detail-value\">Active</span>\r\n </div>\r\n </div>\r\n <div class=\"sk-stars-row stars-readonly\">\r\n <ngx-stars [initialStars]=\"tool.starRating\" [maxStars]=\"5\"></ngx-stars>\r\n </div>\r\n <p class=\"sk-description\" *ngIf=\"tool.notes\">{{ tool.notes }}</p>\r\n </ng-container>\r\n\r\n <!-- Edit mode (inline) -->\r\n <ng-container *ngIf=\"isEditMode && editingToolKey === getToolKey(tool)\" [formGroup]=\"tab.at(0)\">\r\n <div class=\"sk-edit-panel\">\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Self Ability Rating <span class=\"text-danger\">*</span></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=\"sk-edit-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" bindValue=\"value\"\r\n formControlName=\"year\" [clearable]=\"false\" [searchable]=\"false\" placeholder=\"Select\"\r\n [appendTo]=\"'body'\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-edit-field sk-toggle-field\">\r\n <label class=\"sk-label\">Active</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-row\">\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"make\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"model\">\r\n </div>\r\n <div class=\"sk-edit-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input class=\"form-control\" type=\"text\" formControlName=\"serialNumber\">\r\n </div>\r\n </div>\r\n <div class=\"sk-edit-field sk-edit-full\">\r\n <label class=\"sk-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\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- \u2500\u2500\u2500 Tools Add \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\r\n<div class=\"tools-container\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/tools.svg\" alt=\"tools\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Add Tools &amp; Equipment</h3>\r\n <p class=\"step-card-subtitle\">Manage specialty tools and equipment</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Step 1: Search + select tools -->\r\n <div class=\"sk-section\">\r\n <div class=\"sk-select-row\">\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Profession</label>\r\n <ng-select\r\n [items]=\"professions\"\r\n bindLabel=\"professionName\"\r\n bindValue=\"id\"\r\n [(ngModel)]=\"selectedProfessionValue\"\r\n [clearable]=\"false\"\r\n (change)=\"onProfessionChange($event)\">\r\n </ng-select>\r\n </div>\r\n <div class=\"sk-select-col\">\r\n <label class=\"sk-label\">Select Tool</label>\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=\"add\" class=\"create-plus\" width=\"18\" height=\"18\" />\r\n </button>\r\n </div>\r\n </div>\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 *ngIf=\"nameError\" class=\"invalid-feedback is-invalid d-block\">{{ nameError }}</div>\r\n <div class=\"tool-chips-wrapper\" [ngClass]=\"showLoading ? 'loader' : ''\"\r\n [class.chips-collapsed]=\"!showAllTools\">\r\n <div class=\"tool-chips\" [class.collapsed]=\"!showAllTools\"\r\n [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 <div class=\"chip-popover\" *ngIf=\"Tool.professionName || Tool.professionGroup || Tool.residentialCommercial || Tool.professionDescription\" (click)=\"$event.preventDefault(); $event.stopPropagation()\">\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionName\">\r\n <span class=\"chip-popover-label\">Profession Name</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionName }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionGroup\">\r\n <span class=\"chip-popover-label\">Profession Group</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionGroup }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.residentialCommercial\">\r\n <span class=\"chip-popover-label\">Residential / Commercial</span>\r\n <span class=\"chip-popover-value\">{{ Tool.residentialCommercial }}</span>\r\n </div>\r\n <div class=\"chip-popover-row\" *ngIf=\"Tool.professionDescription\">\r\n <span class=\"chip-popover-label\">Description</span>\r\n <span class=\"chip-popover-value\">{{ Tool.professionDescription }}</span>\r\n </div>\r\n </div>\r\n </label>\r\n </div>\r\n </div>\r\n <button *ngIf=\"!showLoading && tools.length > 0\" type=\"button\"\r\n class=\"show-more-btn\" (click)=\"showAllTools = !showAllTools\">\r\n {{ showAllTools ? 'Show Less' : 'Show More' }}\r\n <svg [class.rotated]=\"showAllTools\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M6 9l6 6 6-6\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- Step 2: Per-tool detail cards (replaces tabset) -->\r\n <div class=\"sk-detail-list\" #toolDetailList\r\n *ngIf=\"tab?.controls.length > 0\"\r\n [ngClass]=\"{ 'loader': showLoading, 'edit-mode': isEditMode }\">\r\n <div class=\"sk-detail-list-header\">\r\n <span class=\"sk-section-label\">Tool Details</span>\r\n <span class=\"sk-count-badge\">{{ tab?.controls.length }} selected</span>\r\n </div>\r\n\r\n <div *ngFor=\"let group of tab?.controls; let index = index\"\r\n [formGroup]=\"group\" class=\"sk-detail-card\">\r\n <div class=\"sk-detail-card-hd\">\r\n <div class=\"sk-detail-avatar sk-detail-avatar--tool\">{{ (tabs[index] || '?').charAt(0).toUpperCase() }}</div>\r\n <span class=\"sk-detail-card-name\">{{ tabs[index] }}</span>\r\n <div class=\"sk-detail-card-actions\">\r\n <label class=\"sk-copy-toggle\" *ngIf=\"tab?.controls.length > 1 && index === 0\" title=\"Copy these values to all tools\">\r\n <input type=\"checkbox\" class=\"form-check-input\"\r\n (click)=\"setCopyToAllTabs(index, group.value, false)\" role=\"switch\" />\r\n Copy to all\r\n </label>\r\n <button *ngIf=\"!isEditMode\" class=\"icon-btn delete-btn\" type=\"button\"\r\n (click)=\"removeTab(index, group.controls.toolId.value)\" title=\"Remove\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n </div>\r\n <div class=\"sk-detail-fields\">\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Self-ability Rating <span class=\"text-danger\">*</span></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 is-invalid d-block\">\r\n Rating is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Years of Experience <span class=\"text-danger\">*</span></label>\r\n <ng-select class=\"w-100\" [items]=\"expYears\" bindLabel=\"text\" (change)=\"onYearChange(group)\"\r\n formControlName=\"year\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.year.errors }\"\r\n bindValue=\"value\" [closeOnSelect]=\"true\" [clearable]=\"false\" [searchable]=\"false\"\r\n placeholder=\"Select\" [appendTo]=\"'body'\"></ng-select>\r\n <div *ngIf=\"userToolSubmitted && k.year.errors\" class=\"invalid-feedback is-invalid d-block\">\r\n Year is required\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-toggle-field\">\r\n <label class=\"sk-label\">Profile Visibility</label>\r\n <input class=\"form-check-input\" type=\"checkbox\" formControlName=\"profileVisibility\" role=\"switch\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-fields-row\">\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Manufacturer</label>\r\n <input formControlName=\"make\" class=\"form-control\" type=\"text\"\r\n placeholder=\"e.g. Fluke, Bosch...\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Model</label>\r\n <input formControlName=\"model\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Model name / number\" (change)=\"onYearChange(group)\" />\r\n </div>\r\n <div class=\"sk-field\">\r\n <label class=\"sk-label\">Serial Number</label>\r\n <input formControlName=\"serialNumber\" class=\"form-control\" type=\"text\"\r\n placeholder=\"Serial / asset number\" />\r\n </div>\r\n </div>\r\n <div class=\"sk-field sk-field-full\">\r\n <label class=\"sk-label\">Comment</label>\r\n <textarea placeholder=\"Additional notes about this tool...\" formControlName=\"notes\"\r\n class=\"form-control\"\r\n [ngClass]=\"{ 'is-invalid': userToolSubmitted && k.notes.errors }\" rows=\"2\"></textarea>\r\n <div *ngIf=\"userToolSubmitted && k.notes.errors\" class=\"invalid-feedback is-invalid d-block\">\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\r\n<!-- Footer: Add mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() === 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"userToolsPreview.length > 0 ? cancel() : goBack()\">\r\n <svg *ngIf=\"userToolsPreview.length > 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6L6 18M6 6l12 12\"/></svg>\r\n <svg *ngIf=\"userToolsPreview.length === 0\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n {{ userToolsPreview.length > 0 ? 'Cancel' : 'Back' }}\r\n </button>\r\n <div class=\"mob-view\">\r\n <button (click)=\"onToolContinue()\" [ng2-loading]=\"showLoader\" [disabled]=\"showLoader\" class=\"float-end save-btn\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\r\n </button>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Footer: Preview mode -->\r\n<div class=\"tools-container last\" *ngIf=\"store.toolStepView() !== 'add'\">\r\n <div class=\"d-flex justify-content-between pt-3 mob-res\">\r\n <button class=\"back-btn\" (click)=\"goBack()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </button>\r\n <div class=\"mob-view\">\r\n <button class=\"back-btn me-3 add\" *ngIf=\"store.toolStepView() === 'preview'\" (click)=\"goToAddSkillsMode()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M12 5v14M5 12h14\"/></svg>\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 <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M3 9.5L12 3l9 6.5V20a1 1 0 01-1 1H5a1 1 0 01-1-1V9.5z\"/><path d=\"M9 21V12h6v9\"/></svg>\r\n Go To Dashboard\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>\r\n", 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:18px;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}.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}.search-part:focus-within{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.search-part input{width:auto;flex:1;color:#1e293b;font-size:14px;font-weight:400;border:none;background:none;outline:none}.search-part input::placeholder{color:#94a3b8}.search-part .btn{background:#4077ad;border-radius:0 5px 5px 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}.search-part .btn:hover{background:#2d5a8a}.search-part .btn img{filter:brightness(0) invert(1);width:16px;height:16px}textarea{width:100%;min-height:96px;background:#f9fafb;border:1.5px solid #e2e8f0;border-radius:8px;padding:12px 14px;font-size:14px;color:#1e293b;resize:vertical;outline:none;transition:all .2s ease}textarea:focus{border-color:#4077ad;background:#fff;box-shadow:0 0 0 3px #4077ad1f}.tool-chips-wrapper{margin:8px 0 4px;position:relative;max-height:300px;overflow-y:auto}.tool-chips-wrapper.chips-collapsed:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:52px;background:linear-gradient(to bottom,transparent,#ffffff);pointer-events:none}.tool-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.tool-chips.collapsed{max-height:190px;overflow:hidden}.show-more-btn{display:inline-flex;align-items:center;gap:5px;background:none;border:1.5px solid #e2e8f0;border-radius:5px;color:#4077ad;font-size:14px;font-weight:600;padding:5px 14px;cursor:pointer;transition:all .2s ease;margin-bottom:12px}.show-more-btn:hover{background:#ebf2f9;border-color:#4077ad}.show-more-btn svg{transition:transform .2s ease}.show-more-btn svg.rotated{transform:rotate(180deg)}.tool-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;color:#64748b;font-size:12px;font-weight:500;cursor:pointer;transition:all .2s ease;-webkit-user-select:none;user-select:none;line-height:1.4;position:relative}.tool-chip input[type=checkbox]{display:none}.tool-chip .chip-check-icon{flex-shrink:0}.tool-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.tool-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.tool-chip .chip-popover{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translate(-50%);background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;padding:10px 14px;min-width:220px;max-width:300px;z-index:99999;text-align:left;pointer-events:none;white-space:normal}.tool-chip .chip-popover:after{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border:7px solid transparent;border-top-color:#e2e8f0}.tool-chip .chip-popover:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);margin-top:-1px;border:6px solid transparent;border-top-color:#fff;z-index:1}.tool-chip:hover .chip-popover{display:block}.chip-popover-row{display:flex;flex-direction:column;gap:2px;padding:5px 0;border-bottom:1px solid #e2e8f0}.chip-popover-row:last-child{border-bottom:none;padding-bottom:0}.chip-popover-row:first-child{padding-top:0}.chip-popover-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;line-height:1.3}.chip-popover-value{font-size:12px;font-weight:500;color:#1e293b;line-height:1.45;word-break:break-word}.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}.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:14px;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:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.back-btn.edit{padding:5px 20px;min-height:20px;min-width:auto}.back-btn.add{background:#f2f4fa;color:#69707d;border:1.5px solid #F2F4FA}.back-btn.add:hover{background:#e4e8f2;border-color:#e4e8f2;color:#69707d}.save-btn{height:42px;min-width:130px;background:#4077ad;color:#fff;border:none;border-radius:5px;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:5px;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:5px;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}::ng-deep .ng-dropdown-panel{min-width:180px}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{max-height:210px}.preview-header{display:flex;align-items:center;gap:14px;margin-bottom:24px;padding-bottom:18px;border-bottom:1px solid #e2e8f0}.preview-header-icon{width:42px;height:42px;background:#fff7ed;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}.preview-header-title{font-size:18px;font-weight:700;color:#1e293b;margin:0 0 2px}.preview-subtitle{font-size:12px;color:#64748b;margin:0}.sk-grid{display:grid;gap:14px;margin-bottom:24px}.sk-card{display:flex;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;transition:box-shadow .18s ease,transform .18s ease}.sk-card:hover{box-shadow:0 4px 6px -1px #00000012,0 2px 4px -1px #0000000a;transform:translateY(-1px)}.sk-card-accent{width:4px;background:#4077ad;flex-shrink:0}.sk-card-accent--tool{background:#d97706}.sk-card-body{flex:1;padding:14px 16px;min-width:0}.sk-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:10px}.sk-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4077ad,#2d5a8a);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}.sk-avatar--tool{background:linear-gradient(135deg,#d97706,#b45309)}.sk-title-block{flex:1;min-width:0}.sk-name{display:block;font-size:14px;font-weight:700;color:#1e293b;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-sub{display:block;font-size:12px;color:#64748b;margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-top-actions{display:flex;align-items:center;gap:2px;flex-shrink:0}.sk-text-btn{height:28px;padding:0 12px;border-radius:5px;font-size:12px;font-weight:600;cursor:pointer;border:none;transition:all .2s ease}.sk-text-btn.cancel{background:#d4dae6;color:#69707d;border:1px solid #D4DAE6}.sk-text-btn.cancel:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.sk-text-btn.save{background:#4077ad;color:#fff;margin-left:4px}.sk-text-btn.save:hover{background:#2d5a8a}.sk-text-btn.save:disabled{background:#94a3b8;cursor:not-allowed}.icon-btn{width:28px;height:28px;border:none;min-width:unset!important;border-radius:5px;background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease;padding:0}.icon-btn.edit-btn{color:#4077ad}.icon-btn.edit-btn:hover{background:#ebf2f9}.icon-btn.delete-btn{color:#ef4444}.icon-btn.delete-btn:hover{background:#fef2f2}.sk-meta-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}.chip{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:500;line-height:1.6;white-space:nowrap}.chip.chip-year{background:#ebf2f9;color:#4077ad}.chip.chip-visible{background:#f0fdf4;color:#15803d}.chip.chip-make{background:#fff7ed;color:#c2410c}.chip.chip-model{background:#f5f3ff;color:#6d28d9}.chip.chip-serial{background:#f8fafc;color:#64748b;font-family:monospace;font-size:11px}.sk-stars-row{margin-bottom:6px}.sk-description{font-size:12px;color:#64748b;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.sk-edit-panel{margin-top:10px;padding-top:10px;border-top:1px solid #e2e8f0}.sk-edit-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:10px}.sk-edit-field{display:flex;flex-direction:column;gap:4px}.sk-edit-full{grid-column:1/-1;margin-top:4px}.sk-toggle-field{align-items:center;justify-content:center}.sk-label{font-size:12px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.sk-section{margin-bottom:20px}.sk-section-label{font-size:12px;font-weight:700;color:#1e293b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px;display:block}.sk-detail-list{display:flex;flex-direction:column;gap:12px;margin-top:8px}.sk-detail-list-header{display:flex;align-items:center;gap:10px;margin-bottom:4px}.sk-count-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#fff7ed;color:#d97706;border-radius:20px;font-size:12px;font-weight:600}.sk-detail-card{border:1px solid #e2e8f0;border-radius:12px;background:#fff;box-shadow:0 1px 3px #00000014,0 1px 2px #0000000a;overflow:hidden}.sk-detail-card-hd{display:flex;align-items:center;gap:10px;padding:12px 16px;background:#fff7ed;border-bottom:1px solid #e2e8f0}.sk-detail-avatar{width:32px;height:32px;border-radius:8px;background:#d97706;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}.sk-detail-avatar--tool{background:#d97706}.sk-detail-card-name{flex:1;font-size:14px;font-weight:700;color:#92400e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sk-detail-card-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}.sk-copy-toggle{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:#64748b;cursor:pointer;-webkit-user-select:none;user-select:none}.sk-detail-fields{padding:14px 16px}.sk-fields-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:12px}.sk-field{display:flex;flex-direction:column;gap:4px}.sk-field-full{grid-column:1/-1}.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:5px;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)}.sk-select-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:12px}.sk-select-col{display:flex;flex-direction:column;gap:6px}.sk-select-col .search-part{margin-bottom:0;max-width:unset}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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){.sk-select-row{grid-template-columns:1fr}.tools-container h3,h5.title{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}.sk-grid,.sk-edit-row,.sk-fields-row{grid-template-columns:1fr}}.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:18px;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:5px;border:1.5px solid #D4DAE6;background:#d4dae6;color:#69707d;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.modal-cancel-btn:hover{border-color:#c2cbde;color:#69707d;background:#c2cbde}.modal-confirm-btn{height:42px;min-width:150px;border-radius:5px;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"] }]
9661
9661
  }], ctorParameters: () => [{ type: ToolService }, { type: UserToolService }, { type: i8.UntypedFormBuilder }, { type: UserService }, { type: UtilsService }, { type: CredentialingStore }, { type: i1$2.TokenService }, { type: i1$2.RoleContextService }, { type: UserDetailService }, { type: ProfessionService }, { type: undefined, decorators: [{
9662
9662
  type: Inject,
9663
9663
  args: [LIBRARY_CONFIG]
@@ -34031,11 +34031,11 @@ class FirstComponent {
34031
34031
  this.backToParent.emit();
34032
34032
  }
34033
34033
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, deps: [{ token: CredentialingStore }, { token: i1$2.RoleContextService }, { token: i1$2.TokenService }, { token: ResumeDetailService }, { token: FileService }], target: i0.ɵɵFactoryTarget.Component });
34034
- 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 <div class=\"step-card-header mb-4\" style=\"border-radius: 10px; margin: -28px -24px 24px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Resume &amp; Profile</h3>\r\n <p class=\"step-card-subtitle\">Upload your resume or enter your information manually</p>\r\n </div>\r\n </div>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX</small>\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=\"upload-overlay\">\r\n <div class=\"upload-overlay-card\">\r\n\r\n <div class=\"upload-overlay-ring\">\r\n <svg class=\"upload-ring-svg\" viewBox=\"0 0 64 64\">\r\n <circle class=\"upload-ring-track\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n <circle class=\"upload-ring-fill\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n </svg>\r\n <div class=\"upload-overlay-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <p class=\"upload-overlay-title\">Analysing your resume</p>\r\n <p class=\"upload-overlay-sub\">Extracting experience &amp; skills<span class=\"upload-dots\"></span></p>\r\n\r\n <div class=\"upload-overlay-bars\">\r\n <span></span><span></span><span></span><span></span><span></span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div>\r\n <button class=\"back-btn\" (click)=\"onBackClick()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </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}.upload-overlay{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#ffffffa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.upload-overlay-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 44px;border-radius:20px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 24px 64px #0000001c,0 4px 16px #0000000f;animation:overlay-card-in .32s cubic-bezier(.34,1.56,.64,1) both}@keyframes overlay-card-in{0%{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.upload-overlay-ring{position:relative;width:64px;height:64px}.upload-ring-svg{width:64px;height:64px;transform:rotate(-90deg)}.upload-ring-track{fill:none;stroke:#e2e8f0;stroke-width:4}.upload-ring-fill{fill:none;stroke:#4077ad;stroke-width:4;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;animation:ring-draw 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes ring-draw{0%{stroke-dashoffset:163.4}50%{stroke-dashoffset:32}to{stroke-dashoffset:163.4}}.upload-overlay-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4077ad}.upload-overlay-title{font-size:16px;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.01em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-overlay-sub{font-size:12px;color:#64748b;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-dots:after{content:\"\";animation:dots-cycle 1.5s steps(4,end) infinite}@keyframes dots-cycle{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}.upload-overlay-bars{display:flex;align-items:flex-end;gap:4px;height:20px}.upload-overlay-bars span{display:block;width:4px;border-radius:99px;background:#4077ad;animation:bar-wave 1s ease-in-out infinite}.upload-overlay-bars span:nth-child(1){animation-delay:0s}.upload-overlay-bars span:nth-child(2){animation-delay:.12s}.upload-overlay-bars span:nth-child(3){animation-delay:.24s}.upload-overlay-bars span:nth-child(4){animation-delay:.36s}.upload-overlay-bars span:nth-child(5){animation-delay:.48s}@keyframes bar-wave{0%,to{height:5px;opacity:.3}50%{height:20px;opacity:1}}.back-btn{height:42px;min-width:120px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
34034
+ 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 <div class=\"step-card-header mb-4\" style=\"border-radius: 5px; margin: -28px -24px 24px;\">\r\n \r\n <div>\r\n <h3 class=\"step-card-title\">Resume &amp; Profile</h3>\r\n <p class=\"step-card-subtitle\">Upload your resume or enter your information manually</p>\r\n </div>\r\n </div>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX</small>\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=\"upload-overlay\">\r\n <div class=\"upload-overlay-card\">\r\n\r\n <div class=\"upload-overlay-ring\">\r\n <svg class=\"upload-ring-svg\" viewBox=\"0 0 64 64\">\r\n <circle class=\"upload-ring-track\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n <circle class=\"upload-ring-fill\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n </svg>\r\n <div class=\"upload-overlay-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <p class=\"upload-overlay-title\">Analysing your resume</p>\r\n <p class=\"upload-overlay-sub\">Extracting experience &amp; skills<span class=\"upload-dots\"></span></p>\r\n\r\n \r\n </div>\r\n </div>\r\n <div>\r\n <button class=\"back-btn\" (click)=\"onBackClick()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </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:5px;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}.upload-overlay{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#ffffffa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.upload-overlay-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 44px;border-radius:20px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 24px 64px #0000001c,0 4px 16px #0000000f;animation:overlay-card-in .32s cubic-bezier(.34,1.56,.64,1) both}@keyframes overlay-card-in{0%{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.upload-overlay-ring{position:relative;width:64px;height:64px}.upload-ring-svg{width:64px;height:64px;transform:rotate(-90deg)}.upload-ring-track{fill:none;stroke:#e2e8f0;stroke-width:4}.upload-ring-fill{fill:none;stroke:#4077ad;stroke-width:4;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;animation:ring-draw 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes ring-draw{0%{stroke-dashoffset:163.4}50%{stroke-dashoffset:32}to{stroke-dashoffset:163.4}}.upload-overlay-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4077ad}.upload-overlay-title{font-size:16px;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.01em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-overlay-sub{font-size:12px;color:#64748b;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-dots:after{content:\"\";animation:dots-cycle 1.5s steps(4,end) infinite}@keyframes dots-cycle{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}.upload-overlay-bars{display:flex;align-items:flex-end;gap:4px;height:20px}.upload-overlay-bars span{display:block;width:4px;border-radius:99px;background:#4077ad;animation:bar-wave 1s ease-in-out infinite}.upload-overlay-bars span:nth-child(1){animation-delay:0s}.upload-overlay-bars span:nth-child(2){animation-delay:.12s}.upload-overlay-bars span:nth-child(3){animation-delay:.24s}.upload-overlay-bars span:nth-child(4){animation-delay:.36s}.upload-overlay-bars span:nth-child(5){animation-delay:.48s}@keyframes bar-wave{0%,to{height:5px;opacity:.3}50%{height:20px;opacity:1}}.back-btn{height:42px;min-width:120px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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: i10.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
34035
34035
  }
34036
34036
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FirstComponent, decorators: [{
34037
34037
  type: Component,
34038
- args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 10px; margin: -28px -24px 24px;\">\r\n <div class=\"step-card-header-icon\">\r\n <img src=\"/assets/images/icons/file-person.svg\" alt=\"resume\" width=\"22\" height=\"22\" />\r\n </div>\r\n <div>\r\n <h3 class=\"step-card-title\">Resume &amp; Profile</h3>\r\n <p class=\"step-card-subtitle\">Upload your resume or enter your information manually</p>\r\n </div>\r\n </div>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX</small>\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=\"upload-overlay\">\r\n <div class=\"upload-overlay-card\">\r\n\r\n <div class=\"upload-overlay-ring\">\r\n <svg class=\"upload-ring-svg\" viewBox=\"0 0 64 64\">\r\n <circle class=\"upload-ring-track\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n <circle class=\"upload-ring-fill\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n </svg>\r\n <div class=\"upload-overlay-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <p class=\"upload-overlay-title\">Analysing your resume</p>\r\n <p class=\"upload-overlay-sub\">Extracting experience &amp; skills<span class=\"upload-dots\"></span></p>\r\n\r\n <div class=\"upload-overlay-bars\">\r\n <span></span><span></span><span></span><span></span><span></span>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n <div>\r\n <button class=\"back-btn\" (click)=\"onBackClick()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </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}.upload-overlay{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#ffffffa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.upload-overlay-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 44px;border-radius:20px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 24px 64px #0000001c,0 4px 16px #0000000f;animation:overlay-card-in .32s cubic-bezier(.34,1.56,.64,1) both}@keyframes overlay-card-in{0%{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.upload-overlay-ring{position:relative;width:64px;height:64px}.upload-ring-svg{width:64px;height:64px;transform:rotate(-90deg)}.upload-ring-track{fill:none;stroke:#e2e8f0;stroke-width:4}.upload-ring-fill{fill:none;stroke:#4077ad;stroke-width:4;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;animation:ring-draw 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes ring-draw{0%{stroke-dashoffset:163.4}50%{stroke-dashoffset:32}to{stroke-dashoffset:163.4}}.upload-overlay-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4077ad}.upload-overlay-title{font-size:16px;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.01em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-overlay-sub{font-size:12px;color:#64748b;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-dots:after{content:\"\";animation:dots-cycle 1.5s steps(4,end) infinite}@keyframes dots-cycle{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}.upload-overlay-bars{display:flex;align-items:flex-end;gap:4px;height:20px}.upload-overlay-bars span{display:block;width:4px;border-radius:99px;background:#4077ad;animation:bar-wave 1s ease-in-out infinite}.upload-overlay-bars span:nth-child(1){animation-delay:0s}.upload-overlay-bars span:nth-child(2){animation-delay:.12s}.upload-overlay-bars span:nth-child(3){animation-delay:.24s}.upload-overlay-bars span:nth-child(4){animation-delay:.36s}.upload-overlay-bars span:nth-child(5){animation-delay:.48s}@keyframes bar-wave{0%,to{height:5px;opacity:.3}50%{height:20px;opacity:1}}.back-btn{height:42px;min-width:120px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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"] }]
34038
+ args: [{ selector: 'app-first', standalone: false, template: "<div class=\"wrapper position-relative\">\r\n\r\n <div class=\"step-card-header mb-4\" style=\"border-radius: 5px; margin: -28px -24px 24px;\">\r\n \r\n <div>\r\n <h3 class=\"step-card-title\">Resume &amp; Profile</h3>\r\n <p class=\"step-card-subtitle\">Upload your resume or enter your information manually</p>\r\n </div>\r\n </div>\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 <small class=\"text-muted\" style=\"font-size: 12px;\">Allowed formats: PDF, DOC, DOCX</small>\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=\"upload-overlay\">\r\n <div class=\"upload-overlay-card\">\r\n\r\n <div class=\"upload-overlay-ring\">\r\n <svg class=\"upload-ring-svg\" viewBox=\"0 0 64 64\">\r\n <circle class=\"upload-ring-track\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n <circle class=\"upload-ring-fill\" cx=\"32\" cy=\"32\" r=\"26\"/>\r\n </svg>\r\n <div class=\"upload-overlay-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n </div>\r\n\r\n <p class=\"upload-overlay-title\">Analysing your resume</p>\r\n <p class=\"upload-overlay-sub\">Extracting experience &amp; skills<span class=\"upload-dots\"></span></p>\r\n\r\n \r\n </div>\r\n </div>\r\n <div>\r\n <button class=\"back-btn\" (click)=\"onBackClick()\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H5M12 5l-7 7 7 7\"/></svg>\r\n Back\r\n </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:5px;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}.upload-overlay{position:absolute;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;border-radius:5px;background:#ffffffa6;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.upload-overlay-card{display:flex;flex-direction:column;align-items:center;gap:14px;padding:32px 44px;border-radius:20px;background:#fff;border:1px solid #e2e8f0;box-shadow:0 24px 64px #0000001c,0 4px 16px #0000000f;animation:overlay-card-in .32s cubic-bezier(.34,1.56,.64,1) both}@keyframes overlay-card-in{0%{opacity:0;transform:scale(.86) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.upload-overlay-ring{position:relative;width:64px;height:64px}.upload-ring-svg{width:64px;height:64px;transform:rotate(-90deg)}.upload-ring-track{fill:none;stroke:#e2e8f0;stroke-width:4}.upload-ring-fill{fill:none;stroke:#4077ad;stroke-width:4;stroke-linecap:round;stroke-dasharray:163.4;stroke-dashoffset:163.4;animation:ring-draw 1.5s cubic-bezier(.4,0,.2,1) infinite}@keyframes ring-draw{0%{stroke-dashoffset:163.4}50%{stroke-dashoffset:32}to{stroke-dashoffset:163.4}}.upload-overlay-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#4077ad}.upload-overlay-title{font-size:16px;font-weight:700;color:#0f172a;margin:0;letter-spacing:-.01em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-overlay-sub{font-size:12px;color:#64748b;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.upload-dots:after{content:\"\";animation:dots-cycle 1.5s steps(4,end) infinite}@keyframes dots-cycle{0%{content:\"\"}25%{content:\".\"}50%{content:\"..\"}75%{content:\"...\"}to{content:\"\"}}.upload-overlay-bars{display:flex;align-items:flex-end;gap:4px;height:20px}.upload-overlay-bars span{display:block;width:4px;border-radius:99px;background:#4077ad;animation:bar-wave 1s ease-in-out infinite}.upload-overlay-bars span:nth-child(1){animation-delay:0s}.upload-overlay-bars span:nth-child(2){animation-delay:.12s}.upload-overlay-bars span:nth-child(3){animation-delay:.24s}.upload-overlay-bars span:nth-child(4){animation-delay:.36s}.upload-overlay-bars span:nth-child(5){animation-delay:.48s}@keyframes bar-wave{0%,to{height:5px;opacity:.3}50%{height:20px;opacity:1}}.back-btn{height:42px;min-width:120px;background:#69707d;color:#fff;border:1.5px solid #69707D;border-radius:5px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.back-btn:hover{border-color:#565c66;color:#fff;background:#565c66}.step-card{max-width:1000px;margin:0 auto;background:#fff;border-radius:12px;border-left:4px solid #4077AD;box-shadow:0 1px 3px #0000000f,0 4px 16px #4077ad14}.step-card-header{display:flex;align-items:center;gap:16px;padding:20px 28px;background:linear-gradient(135deg,#ebf2f9,#f0f6ff);border-bottom:1px solid #d5e8f5;border-radius:12px 12px 0 0}.step-card-header-icon{width:46px;height:46px;background:#fff;border-radius:10px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 4px #4077ad2e;flex-shrink:0}.step-card-header-icon img{filter:brightness(0) saturate(100%) invert(37%) sepia(55%) saturate(500%) hue-rotate(190deg) brightness(95%) contrast(85%);width:22px;height:22px}.step-card-title{font-size:17px;font-weight:700;color:#1e293b;margin:0 0 3px;letter-spacing:-.01em}.step-card-subtitle{font-size:13px;color:#64748b;margin:0;line-height:1.4}.step-card-body{padding:24px 28px 8px}.field-section{margin-bottom:18px;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:16px 18px 6px}.field-section-title{font-size:11px;font-weight:700;color:#4077ad;text-transform:uppercase;letter-spacing:.07em;margin-bottom:14px;display:flex;align-items:center;gap:7px}.field-section-title:before{content:\"\";display:inline-block;width:5px;height:5px;background:#4077ad;border-radius:50%;flex-shrink:0}.doc-type-chips{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 12px}.doc-type-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}.doc-type-chip input[type=checkbox]{display:none}.doc-type-chip:hover{border-color:#4077ad;color:#4077ad;background:#ebf2f9}.doc-type-chip.selected{background:#4077ad;border-color:#4077ad;color:#fff;font-weight:600;box-shadow:0 2px 6px #4077ad4d}.detail-row{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:6px;margin-bottom:8px}.detail-item{display:flex;align-items:baseline;gap:6px;white-space:nowrap}.detail-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#64748b}.detail-value{font-size:12.5px;font-weight:600;color:#1e293b}button.primary,button.secondary,button.back-btn,button.continue-btn,button.save-btn,button.add-btn,button.upload-btn,.actions button,.action button,.navigation-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px}button.primary svg,button.secondary svg,button.back-btn svg,button.continue-btn svg,button.save-btn svg,button.add-btn svg,button.upload-btn svg,.actions button svg,.action button svg,.navigation-buttons button svg{flex-shrink:0;width:14px;height:14px}.step-toast{position:fixed;bottom:28px;right:28px;display:flex;align-items:flex-start;gap:14px;background:#fff;border-radius:12px;padding:16px 20px 20px;box-shadow:0 8px 32px #00000024;border-left:4px solid #22c55e;z-index:9999;min-width:290px;max-width:360px;animation:toastSlideIn .32s cubic-bezier(.34,1.56,.64,1);overflow:hidden}@keyframes toastSlideIn{0%{transform:translate(110%);opacity:0}to{transform:translate(0);opacity:1}}.step-toast-icon{width:34px;height:34px;background:#dcfce7;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;color:#16a34a}.step-toast-body{flex:1}.step-toast-title{font-size:14px;font-weight:700;color:#1e293b;margin-bottom:2px}.step-toast-msg{font-size:12px;color:#64748b;line-height:1.4}.step-toast-progress{position:absolute;bottom:0;left:0;height:3px;background:#22c55e;border-radius:0 2px 2px 0;animation:toastProgress 3.5s linear forwards}@keyframes toastProgress{0%{width:100%}to{width:0%}}@media screen and (max-width: 767px){.step-card-header{padding:14px 16px}.step-card-body{padding:16px 16px 8px}.step-toast{right:12px;bottom:16px;min-width:calc(100vw - 24px);max-width:calc(100vw - 24px)}}@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"] }]
34039
34039
  }], ctorParameters: () => [{ type: CredentialingStore }, { type: i1$2.RoleContextService }, { type: i1$2.TokenService }, { type: ResumeDetailService }, { type: FileService }], propDecorators: { backToParent: [{
34040
34040
  type: Output
34041
34041
  }], nextStep: [{
@@ -35831,11 +35831,11 @@ class InitialProcessComponent {
35831
35831
  this.destroy$.complete();
35832
35832
  }
35833
35833
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, deps: [{ token: i2.Router }, { token: UserDetailService }, { token: i8.FormBuilder }, { token: FileService }, { token: ProvidersService }, { token: RolesService }, { token: i7.BsModalService }, { token: ProviderContractorSubCategoryService }, { token: ProviderContractorSubCategoryService }, { token: i9.AuthService }, { token: i1$2.TokenService }, { token: i1$2.RoleContextService }, { token: i1$2.AuthLogoutService }, { token: CredentialingStore }, { token: LIBRARY_CONFIG }], target: i0.ɵɵFactoryTarget.Component });
35834
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n <div *ngIf=\"isInitializing\" class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n </div>\r\n <ng-container *ngIf=\"!isInitializing\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <button class=\"logout-btn\" (click)=\"logout()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n <polyline points=\"16 17 21 12 16 7\"/>\r\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n </svg>\r\n Logout\r\n </button>\r\n </div>\r\n <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n <div [hidden]=\"view !== 1\">\r\n\r\n <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n <div class=\"v1-welcome\">\r\n <div class=\"v1-welcome-icon\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-welcome-text\">\r\n <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n photos and logos professional, and schedule up to date.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n <div class=\"v1-body\">\r\n\r\n <!-- Left: agreement cards -->\r\n <div class=\"v1-agreements\">\r\n\r\n <!-- Terms card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Terms and Conditions</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n [disabled]=\"isTermsLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isTermsLoading\"></span>\r\n <svg *ngIf=\"!isTermsLoading && model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isTermsLoading ? 'Loading...' : (model.acceptTerms ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n <!-- Privacy card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Privacy Statement</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n [disabled]=\"isPrivacyLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isPrivacyLoading\"></span>\r\n <svg *ngIf=\"!isPrivacyLoading && model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isPrivacyLoading ? 'Loading...' : (model.privacy ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Right: signature pad -->\r\n <div class=\"v1-signature\">\r\n <div class=\"v1-sig-header\">\r\n <span class=\"v1-sig-label\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n </svg>\r\n Signature\r\n </span>\r\n <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n Clear\r\n </button>\r\n </div>\r\n <div class=\"v1-sig-pad\">\r\n <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <img [src]=\"signaturePadData?.publicUrl\" alt style=\"width:100%;height:120px;object-fit:contain;display:block;\">\r\n </div>\r\n <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n Draw your signature here\r\n </p>\r\n </div>\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n class=\"v1-error-msg\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n Signature is required\r\n </div>\r\n <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n <div class=\"v1-footer\">\r\n <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n [disabled]=\"((!points || !points?.length || points.length==0) && !fileData && !signaturePadData?.publicUrl) || !model.acceptTerms || !model.privacy\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"view == 2\">\r\n\r\n <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n <div class=\"v2-header\">\r\n <div class=\"v2-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"v2-title\">Choose your role</h2>\r\n <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n collaborations. Connect your business to others and prospective clients.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n <div class=\"v2-grid\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <div class=\"v2-role-img-wrap\">\r\n <img [src]=\"userType?.img\" alt=\"\">\r\n </div>\r\n <span class=\"v2-role-name\">{{userType.name}}</span>\r\n <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n <div class=\"v2-footer\">\r\n <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </ng-container>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Business Information</h2>\r\n <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"companyForm\">\r\n\r\n <!-- Company Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Details</p>\r\n <div class=\"ip-grid-2\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n </span>\r\n <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n (input)=\"formatPhone($event,companyForm)\"\r\n [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Address</p>\r\n <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"ip-grid-4\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Company Logo (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Logo</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Contractor Category -->\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n <div class=\"cc-select-wrap\">\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n >\r\n </ng-select>\r\n </div>\r\n\r\n <!-- Sub-items as pill chips per selected category -->\r\n <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n <div class=\"cc-group\">\r\n\r\n <!-- \"Select all\" toggle pill for this category -->\r\n <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ item?.name }} \u2014 Select all\r\n </label>\r\n\r\n <!-- Individual sub-item pills -->\r\n <div class=\"cc-sub-pills\">\r\n <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n [class.cc-sub-pill--on]=\"subItem.selected\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ subItem?.name }}\r\n </label>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Your Profile</h2>\r\n <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Copy from provider toggle -->\r\n <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n </div>\r\n\r\n <form [formGroup]=\"userForm\">\r\n\r\n <!-- Personal Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Personal Details</p>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Home Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Home Address</p>\r\n <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Profile Picture (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Profile Picture</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <div class=\"v5-wrap\">\r\n\r\n <!-- Success icon -->\r\n <div class=\"v5-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n </svg>\r\n </div>\r\n\r\n <h2 class=\"v5-title\">You're all set!</h2>\r\n <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n <!-- Info cards -->\r\n <div class=\"v5-cards\">\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n </div>\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon v5-card-icon--green\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n Go to Dashboard\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n <div class=\"modal-content tc-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"tc-modal-header\">\r\n <div class=\"tc-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n <span class=\"tc-modal-meta\" *ngIf=\"legalMeta\">Last Modified: {{ legalMeta.createdDate | date:'MMM d, y, h:mm:ss a' }}, {{ legalMeta.versionName }}</span>\r\n </div>\r\n\r\n\r\n <div class=\"tc-scroll-wrapper\">\r\n <div class=\"tc-modal-body\"\r\n (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Floating scroll-to-bottom button -->\r\n <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled && legalMeta\" (click)=\"scrollToBottomClick($event)\"\r\n title=\"Scroll to bottom\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- FOOTER -->\r\n <div class=\"tc-modal-footer\">\r\n <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n [disabled]=\"!isAgreeEnabled\"\r\n (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n I Agree\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 28px 14px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-modal-header .tc-modal-meta{font-weight:600;font-size:12px;color:#fff;flex-shrink:0;white-space:nowrap}@media screen and (max-width: 767px){.tc-modal-header .tc-modal-header{flex-flow:column;align-items:center;text-align:center}.tc-modal-header .tc-modal-title{flex:1 1 100%;white-space:normal}.tc-modal-header .tc-modal-meta{flex:1 1 100%;opacity:.85}}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #4077ad80;z-index:10;animation:tc-fab-bounce 2s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:5px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#b43026;color:#fff;border:1.5px solid #B43026}.tc-btn.tc-btn-decline:hover{background:#96271f;border-color:#96271f;color:#fff}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v1-welcome-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef;color:#4077ad}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:14px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:12px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#3e7f50;border-color:#3e7f50;color:#fff}.v1-agree-btn:disabled{opacity:.7;cursor:not-allowed}.v1-agree-btn:disabled:hover{background:transparent;color:#4077ad}.v1-agree-spinner{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex-shrink:0;animation:v1-agree-spin .7s linear infinite}@keyframes v1-agree-spin{to{transform:rotate(360deg)}}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:12px;border:1.5px dashed #cbd5e1;background:#f8fafc;overflow:hidden;min-height:120px}.v1-sig-pad canvas{display:block;cursor:crosshair;width:100%;height:120px}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad59;transition:transform .15s,box-shadow .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:16px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v2-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:0 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:14px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.v2-back-btn:hover{color:#fff;background:#565c66;border-color:#565c66}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:14px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:14px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#fff;border-color:#565c66;background:#565c66}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px)}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:18px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:14px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:5px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px)}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:14px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"], dependencies: [{ kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.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.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: i11.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: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }, { kind: "pipe", type: i10.DatePipe, name: "date" }] });
35834
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: InitialProcessComponent, isStandalone: false, selector: "app-initial-process", host: { listeners: { "window:beforeunload": "onBeforeUnload($event)" } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"container\">\r\n <div *ngIf=\"isInitializing\" class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n </div>\r\n <ng-container *ngIf=\"!isInitializing\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <button class=\"logout-btn\" (click)=\"logout()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n <polyline points=\"16 17 21 12 16 7\"/>\r\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n </svg>\r\n Logout\r\n </button>\r\n </div>\r\n <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n <div [hidden]=\"view !== 1\">\r\n\r\n <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n <div class=\"v1-welcome\">\r\n <div class=\"v1-welcome-icon\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-welcome-text\">\r\n <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n photos and logos professional, and schedule up to date.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n <div class=\"v1-body\">\r\n\r\n <!-- Left: agreement cards -->\r\n <div class=\"v1-agreements\">\r\n\r\n <!-- Terms card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Terms and Conditions</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n [disabled]=\"isTermsLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isTermsLoading\"></span>\r\n <svg *ngIf=\"!isTermsLoading && model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isTermsLoading ? 'Loading...' : (model.acceptTerms ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n <!-- Privacy card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Privacy Statement</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n [disabled]=\"isPrivacyLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isPrivacyLoading\"></span>\r\n <svg *ngIf=\"!isPrivacyLoading && model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isPrivacyLoading ? 'Loading...' : (model.privacy ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Right: signature pad -->\r\n <div class=\"v1-signature\">\r\n <div class=\"v1-sig-header\">\r\n <span class=\"v1-sig-label\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n </svg>\r\n Signature\r\n </span>\r\n <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n Clear\r\n </button>\r\n </div>\r\n <div class=\"v1-sig-pad\">\r\n <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <img [src]=\"signaturePadData?.publicUrl\" alt style=\"width:100%;height:120px;object-fit:contain;display:block;\">\r\n </div>\r\n <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n Draw your signature here\r\n </p>\r\n </div>\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n class=\"v1-error-msg\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n Signature is required\r\n </div>\r\n <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n <div class=\"v1-footer\">\r\n <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n [disabled]=\"((!points || !points?.length || points.length==0) && !fileData && !signaturePadData?.publicUrl) || !model.acceptTerms || !model.privacy\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"view == 2\">\r\n\r\n <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n <div class=\"v2-header\">\r\n <div class=\"v2-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"v2-title\">Choose your role</h2>\r\n <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n collaborations. Connect your business to others and prospective clients.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n <div class=\"v2-grid\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <div class=\"v2-role-img-wrap\">\r\n <img [src]=\"userType?.img\" alt=\"\">\r\n </div>\r\n <span class=\"v2-role-name\">{{userType.name}}</span>\r\n <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n <div class=\"v2-footer\">\r\n <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </ng-container>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Business Information</h2>\r\n <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"companyForm\">\r\n\r\n <!-- Company Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Details</p>\r\n <div class=\"ip-grid-2\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n </span>\r\n <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n (input)=\"formatPhone($event,companyForm)\"\r\n [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Address</p>\r\n <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"ip-grid-4\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Company Logo (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Logo</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Contractor Category -->\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n <div class=\"cc-select-wrap\">\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n >\r\n </ng-select>\r\n </div>\r\n\r\n <!-- Sub-items as pill chips per selected category -->\r\n <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n <div class=\"cc-group\">\r\n\r\n <!-- \"Select all\" toggle pill for this category -->\r\n <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ item?.name }} \u2014 Select all\r\n </label>\r\n\r\n <!-- Individual sub-item pills -->\r\n <div class=\"cc-sub-pills\">\r\n <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n [class.cc-sub-pill--on]=\"subItem.selected\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ subItem?.name }}\r\n </label>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Your Profile</h2>\r\n <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Copy from provider toggle -->\r\n <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n </div>\r\n\r\n <form [formGroup]=\"userForm\">\r\n\r\n <!-- Personal Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Personal Details</p>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Home Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Home Address</p>\r\n <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Profile Picture (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Profile Picture</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <div class=\"v5-wrap\">\r\n\r\n <!-- Success icon -->\r\n <div class=\"v5-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n </svg>\r\n </div>\r\n\r\n <h2 class=\"v5-title\">You're all set!</h2>\r\n <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n <!-- Info cards -->\r\n <div class=\"v5-cards\">\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n </div>\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon v5-card-icon--green\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n Go to Dashboard\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n <div class=\"modal-content tc-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"tc-modal-header\">\r\n \r\n <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n <span class=\"tc-modal-meta\" *ngIf=\"legalMeta\">Last Modified: {{ legalMeta.createdDate | date:'MMM d, y, h:mm:ss a' }}, {{ legalMeta.versionName }}</span>\r\n </div>\r\n\r\n\r\n <div class=\"tc-scroll-wrapper\">\r\n <div class=\"tc-modal-body\"\r\n (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Floating scroll-to-bottom button -->\r\n <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled && legalMeta\" (click)=\"scrollToBottomClick($event)\"\r\n title=\"Scroll to bottom\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- FOOTER -->\r\n <div class=\"tc-modal-footer\">\r\n <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n [disabled]=\"!isAgreeEnabled\"\r\n (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n I Agree\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:5px}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 28px 14px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;padding:10px;margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-modal-header .tc-modal-meta{font-weight:600;font-size:12px;color:#fff;flex-shrink:0;white-space:nowrap}@media screen and (max-width: 767px){.tc-modal-header .tc-modal-header{flex-flow:column;align-items:center;text-align:center}.tc-modal-header .tc-modal-title{flex:1 1 100%;white-space:normal}.tc-modal-header .tc-modal-meta{flex:1 1 100%;opacity:.85}}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:5px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#b43026;color:#fff;border:1.5px solid #B43026}.tc-btn.tc-btn-decline:hover{background:#96271f;border-color:#96271f;color:#fff}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cfd2d6;display:flex;align-items:center;justify-content:center;color:#90979d;margin-top:2px}.v1-welcome-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#dde2e7}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:5px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{border-color:#dde2e7;color:#7e8994}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:14px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:12px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#3e7f50;border-color:#3e7f50;color:#fff}.v1-agree-btn:disabled{opacity:.7;cursor:not-allowed}.v1-agree-btn:disabled:hover{background:transparent;color:#4077ad}.v1-agree-spinner{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex-shrink:0;animation:v1-agree-spin .7s linear infinite}@keyframes v1-agree-spin{to{transform:rotate(360deg)}}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:5px;border:1.5px dashed #cbd5e1;overflow:hidden;min-height:120px}.v1-sig-pad canvas{display:block;cursor:crosshair;width:100%;height:120px}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;transition:transform .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:16px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cecece;display:flex;align-items:center;justify-content:center;color:#abb3ba;margin-top:2px}.v2-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 32px 50px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:14px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.v2-back-btn:hover{color:#fff;background:#565c66;border-color:#565c66}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:14px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:14px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#fff;border-color:#565c66;background:#565c66}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px)}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:18px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:14px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:5px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px)}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:14px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"], dependencies: [{ kind: "directive", type: i10.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i10.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i10.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.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: i11.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: GooglePlaceDirective, selector: "[ngx-google-places-autocomplete]", inputs: ["options"], outputs: ["onAddressChange"], exportAs: ["ngx-places"] }, { kind: "directive", type: MaskedInputDirective, selector: "[textMask]", inputs: ["textMask"], exportAs: ["textMask"] }, { kind: "component", type: TermsConditionsComponent, selector: "app-terms-conditions", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: PrivacyPolicyComponent, selector: "app-privacy-policy", inputs: ["title", "branding", "PrivacyAndTerms"], outputs: ["metaLoaded"] }, { kind: "component", type: CredentialingComponent, selector: "app-credentialing", inputs: ["signatureFileId", "signatureUrl", "data"], outputs: ["back"] }, { kind: "pipe", type: i10.DatePipe, name: "date" }] });
35835
35835
  }
35836
35836
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: InitialProcessComponent, decorators: [{
35837
35837
  type: Component,
35838
- args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n <div *ngIf=\"isInitializing\" class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n </div>\r\n <ng-container *ngIf=\"!isInitializing\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <button class=\"logout-btn\" (click)=\"logout()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n <polyline points=\"16 17 21 12 16 7\"/>\r\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n </svg>\r\n Logout\r\n </button>\r\n </div>\r\n <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n <div [hidden]=\"view !== 1\">\r\n\r\n <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n <div class=\"v1-welcome\">\r\n <div class=\"v1-welcome-icon\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-welcome-text\">\r\n <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n photos and logos professional, and schedule up to date.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n <div class=\"v1-body\">\r\n\r\n <!-- Left: agreement cards -->\r\n <div class=\"v1-agreements\">\r\n\r\n <!-- Terms card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Terms and Conditions</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n [disabled]=\"isTermsLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isTermsLoading\"></span>\r\n <svg *ngIf=\"!isTermsLoading && model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isTermsLoading ? 'Loading...' : (model.acceptTerms ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n <!-- Privacy card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Privacy Statement</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n [disabled]=\"isPrivacyLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isPrivacyLoading\"></span>\r\n <svg *ngIf=\"!isPrivacyLoading && model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isPrivacyLoading ? 'Loading...' : (model.privacy ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Right: signature pad -->\r\n <div class=\"v1-signature\">\r\n <div class=\"v1-sig-header\">\r\n <span class=\"v1-sig-label\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n </svg>\r\n Signature\r\n </span>\r\n <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n Clear\r\n </button>\r\n </div>\r\n <div class=\"v1-sig-pad\">\r\n <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <img [src]=\"signaturePadData?.publicUrl\" alt style=\"width:100%;height:120px;object-fit:contain;display:block;\">\r\n </div>\r\n <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n Draw your signature here\r\n </p>\r\n </div>\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n class=\"v1-error-msg\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n Signature is required\r\n </div>\r\n <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n <div class=\"v1-footer\">\r\n <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n [disabled]=\"((!points || !points?.length || points.length==0) && !fileData && !signaturePadData?.publicUrl) || !model.acceptTerms || !model.privacy\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"view == 2\">\r\n\r\n <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n <div class=\"v2-header\">\r\n <div class=\"v2-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"v2-title\">Choose your role</h2>\r\n <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n collaborations. Connect your business to others and prospective clients.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n <div class=\"v2-grid\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <div class=\"v2-role-img-wrap\">\r\n <img [src]=\"userType?.img\" alt=\"\">\r\n </div>\r\n <span class=\"v2-role-name\">{{userType.name}}</span>\r\n <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n <div class=\"v2-footer\">\r\n <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </ng-container>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Business Information</h2>\r\n <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"companyForm\">\r\n\r\n <!-- Company Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Details</p>\r\n <div class=\"ip-grid-2\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n </span>\r\n <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n (input)=\"formatPhone($event,companyForm)\"\r\n [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Address</p>\r\n <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"ip-grid-4\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Company Logo (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Logo</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Contractor Category -->\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n <div class=\"cc-select-wrap\">\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n >\r\n </ng-select>\r\n </div>\r\n\r\n <!-- Sub-items as pill chips per selected category -->\r\n <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n <div class=\"cc-group\">\r\n\r\n <!-- \"Select all\" toggle pill for this category -->\r\n <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ item?.name }} \u2014 Select all\r\n </label>\r\n\r\n <!-- Individual sub-item pills -->\r\n <div class=\"cc-sub-pills\">\r\n <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n [class.cc-sub-pill--on]=\"subItem.selected\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ subItem?.name }}\r\n </label>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Your Profile</h2>\r\n <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Copy from provider toggle -->\r\n <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n </div>\r\n\r\n <form [formGroup]=\"userForm\">\r\n\r\n <!-- Personal Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Personal Details</p>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Home Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Home Address</p>\r\n <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Profile Picture (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Profile Picture</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <div class=\"v5-wrap\">\r\n\r\n <!-- Success icon -->\r\n <div class=\"v5-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n </svg>\r\n </div>\r\n\r\n <h2 class=\"v5-title\">You're all set!</h2>\r\n <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n <!-- Info cards -->\r\n <div class=\"v5-cards\">\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n </div>\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon v5-card-icon--green\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n Go to Dashboard\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n <div class=\"modal-content tc-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"tc-modal-header\">\r\n <div class=\"tc-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n <span class=\"tc-modal-meta\" *ngIf=\"legalMeta\">Last Modified: {{ legalMeta.createdDate | date:'MMM d, y, h:mm:ss a' }}, {{ legalMeta.versionName }}</span>\r\n </div>\r\n\r\n\r\n <div class=\"tc-scroll-wrapper\">\r\n <div class=\"tc-modal-body\"\r\n (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Floating scroll-to-bottom button -->\r\n <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled && legalMeta\" (click)=\"scrollToBottomClick($event)\"\r\n title=\"Scroll to bottom\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- FOOTER -->\r\n <div class=\"tc-modal-footer\">\r\n <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n [disabled]=\"!isAgreeEnabled\"\r\n (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n I Agree\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:1.25rem}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 28px 14px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-modal-header .tc-modal-meta{font-weight:600;font-size:12px;color:#fff;flex-shrink:0;white-space:nowrap}@media screen and (max-width: 767px){.tc-modal-header .tc-modal-header{flex-flow:column;align-items:center;text-align:center}.tc-modal-header .tc-modal-title{flex:1 1 100%;white-space:normal}.tc-modal-header .tc-modal-meta{flex:1 1 100%;opacity:.85}}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px #4077ad80;z-index:10;animation:tc-fab-bounce 2s ease-in-out infinite;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:5px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#b43026;color:#fff;border:1.5px solid #B43026}.tc-btn.tc-btn-decline:hover{background:#96271f;border-color:#96271f;color:#fff}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v1-welcome-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#b8d4ef;background:#ebf3fb}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{background:#d4e8f8;border-color:#b8d4ef;color:#4077ad}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:14px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:12px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#3e7f50;border-color:#3e7f50;color:#fff}.v1-agree-btn:disabled{opacity:.7;cursor:not-allowed}.v1-agree-btn:disabled:hover{background:transparent;color:#4077ad}.v1-agree-spinner{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex-shrink:0;animation:v1-agree-spin .7s linear infinite}@keyframes v1-agree-spin{to{transform:rotate(360deg)}}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:12px;border:1.5px dashed #cbd5e1;background:#f8fafc;overflow:hidden;min-height:120px}.v1-sig-pad canvas{display:block;cursor:crosshair;width:100%;height:120px}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad59;transition:transform .15s,box-shadow .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:16px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.v2-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:14px;padding:0 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:14px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.v2-back-btn:hover{color:#fff;background:#565c66;border-color:#565c66}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:14px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:14px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#fff;border-color:#565c66;background:#565c66}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px)}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:18px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:14px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:5px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px)}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:14px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"] }]
35838
+ args: [{ selector: 'app-initial-process', standalone: false, template: "<div class=\"container\">\r\n <div *ngIf=\"isInitializing\" class=\"text-center p-5\">\r\n <div class=\"spinner-border text-primary\"></div>\r\n </div>\r\n <ng-container *ngIf=\"!isInitializing\">\r\n <div class=\"mb-4 logout-container\" *ngIf=\"showlogout\">\r\n <button class=\"logout-btn\" (click)=\"logout()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M9 21H5a2 2 0 01-2-2V5a2 2 0 012-2h4\"/>\r\n <polyline points=\"16 17 21 12 16 7\"/>\r\n <line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"/>\r\n </svg>\r\n Logout\r\n </button>\r\n </div>\r\n <div class=\"card pb-2 mob pr-5\" style=\"margin-bottom: 30px;\">\r\n <div [hidden]=\"view !== 1\">\r\n\r\n <!-- \u2500\u2500 Welcome Banner \u2500\u2500 -->\r\n <div class=\"v1-welcome\">\r\n <div class=\"v1-welcome-icon\">\r\n <svg width=\"26\" height=\"26\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2\"/>\r\n <circle cx=\"9\" cy=\"7\" r=\"4\"/>\r\n <path d=\"M23 21v-2a4 4 0 00-3-3.87\"/>\r\n <path d=\"M16 3.13a4 4 0 010 7.75\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-welcome-text\">\r\n <h2 class=\"v1-welcome-title\">Welcome to <span class=\"v1-brand\">{{ branding.displayName }}</span></h2>\r\n <p class=\"v1-welcome-sub\">Our members and service providers rely on accurate info in your profile to connect\r\n you with work that suits your capabilities. Keep your profile complete, skills updated, licenses current,\r\n photos and logos professional, and schedule up to date.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Main Body: agreements + signature \u2500\u2500 -->\r\n <div class=\"v1-body\">\r\n\r\n <!-- Left: agreement cards -->\r\n <div class=\"v1-agreements\">\r\n\r\n <!-- Terms card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.acceptTerms\"\r\n [class.v1-card--invalid]=\"!model.acceptTerms && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8z\"/>\r\n <polyline points=\"14 2 14 8 20 8\"/>\r\n <line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"/>\r\n <line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Terms and Conditions</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.acceptTerms\"\r\n [disabled]=\"isTermsLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Terms and Conditions',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isTermsLoading\"></span>\r\n <svg *ngIf=\"!isTermsLoading && model.acceptTerms\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isTermsLoading ? 'Loading...' : (model.acceptTerms ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n <!-- Privacy card -->\r\n <div class=\"v1-agreement-card\" [class.v1-card--agreed]=\"model.privacy\"\r\n [class.v1-card--invalid]=\"!model.privacy && validatePage==1\">\r\n <div class=\"v1-card-icon\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"/>\r\n </svg>\r\n </div>\r\n <div class=\"v1-card-body\">\r\n <p class=\"v1-card-title\">Privacy Statement</p>\r\n <p class=\"v1-card-sub\">Read and accept to continue</p>\r\n </div>\r\n <button type=\"button\" class=\"v1-agree-btn\" [class.v1-agree-btn--done]=\"model.privacy\"\r\n [disabled]=\"isPrivacyLoading\"\r\n (click)=\"openModal(termsAndConditionsModel,'Privacy Statement',$event)\">\r\n <span class=\"v1-agree-spinner\" *ngIf=\"isPrivacyLoading\"></span>\r\n <svg *ngIf=\"!isPrivacyLoading && model.privacy\" width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ isPrivacyLoading ? 'Loading...' : (model.privacy ? 'Agreed' : 'Read & Agree') }}\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Right: signature pad -->\r\n <div class=\"v1-signature\">\r\n <div class=\"v1-sig-header\">\r\n <span class=\"v1-sig-label\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M17 3a2.828 2.828 0 114 4L7.5 20.5 2 22l1.5-5.5L17 3z\"/>\r\n </svg>\r\n Signature\r\n </span>\r\n <button (click)=\"clearPad()\" class=\"v1-clear-btn\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M18 6L6 18M6 6l12 12\"/>\r\n </svg>\r\n Clear\r\n </button>\r\n </div>\r\n <div class=\"v1-sig-pad\">\r\n <div [ngClass]=\"{'d-none': signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <canvas #canvas></canvas>\r\n </div>\r\n <div [ngClass]=\"{'d-none': !signaturePadData?.publicUrl}\" style=\"width:100%\">\r\n <img [src]=\"signaturePadData?.publicUrl\" alt style=\"width:100%;height:120px;object-fit:contain;display:block;\">\r\n </div>\r\n <p class=\"v1-sig-hint\" *ngIf=\"!signaturePadData?.publicUrl && (!points || !points?.length)\">\r\n Draw your signature here\r\n </p>\r\n </div>\r\n <div *ngIf=\"validatePage==1 && (!points || !points?.length || points.length==0) && !fileData\"\r\n class=\"v1-error-msg\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/><line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n Signature is required\r\n </div>\r\n <div *ngIf=\"uploadError\" class=\"v1-error-msg\">{{ uploadError }}</div>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- \u2500\u2500 Continue Button \u2500\u2500 -->\r\n <div class=\"v1-footer\">\r\n <button class=\"v1-continue-btn\" (click)=\"next(2)\"\r\n [disabled]=\"((!points || !points?.length || points.length==0) && !fileData && !signaturePadData?.publicUrl) || !model.acceptTerms || !model.privacy\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n <ng-container *ngIf=\"view == 2\">\r\n\r\n <!-- \u2500\u2500 Role-select header \u2500\u2500 -->\r\n <div class=\"v2-header\">\r\n <div class=\"v2-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"v2-title\">Choose your role</h2>\r\n <p class=\"v2-sub\">Choose the areas you'd like to be part of \u2014 programs, services, events, or\r\n collaborations. Connect your business to others and prospective clients.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Role cards grid \u2500\u2500 -->\r\n <div class=\"v2-grid\">\r\n <ng-container *ngFor=\"let userType of userViewRoles\">\r\n <div class=\"v2-role-card\" [class.v2-role-card--active]=\"userType.value === selectedRoleValue\"\r\n (click)=\"selectedUserRole(userType)\">\r\n <div class=\"v2-role-img-wrap\">\r\n <img [src]=\"userType?.img\" alt=\"\">\r\n </div>\r\n <span class=\"v2-role-name\">{{userType.name}}</span>\r\n <span class=\"v2-role-check\" *ngIf=\"userType.value === selectedRoleValue\">\r\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"3\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n </span>\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- \u2500\u2500 Footer: Back + Continue \u2500\u2500 -->\r\n <div class=\"v2-footer\">\r\n <button class=\"v2-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"v2-continue-btn\" (click)=\"next(3)\" [disabled]=\"!isUserSelected || isLoadingSubCategories\">\r\n <span *ngIf=\"isLoadingSubCategories\" class=\"v1-spinner\"></span>\r\n <ng-container *ngIf=\"!isLoadingSubCategories\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </ng-container>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 3\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z\"/>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Business Information</h2>\r\n <p class=\"ip-sub\">Tell us about your company so we can connect you with the right work.</p>\r\n </div>\r\n </div>\r\n\r\n <form [formGroup]=\"companyForm\">\r\n\r\n <!-- Company Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Details</p>\r\n <div class=\"ip-grid-2\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"companyName\">Company Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': (f.companyName.errors && validatePage == 3) || providerError}\"\r\n type=\"text\" class=\"ip-input\" id=\"companyName\" placeholder=\"Company Name\"\r\n formControlName=\"companyName\">\r\n <span *ngIf=\"f.companyName.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.companyName.errors.required\">Company Name is required</span>\r\n <span *ngIf=\"f.companyName.errors.minlength\">Minimum 2 characters</span>\r\n <span *ngIf=\"f.companyName.errors.maxLength\">Maximum 100 characters</span>\r\n </span>\r\n <span *ngIf=\"providerError\" class=\"ip-error\">{{ providerError }}</span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" name=\"inputPhone\" placeholder=\"Company Phone Number\"\r\n id=\"inputPhone\" autocomplete=\"off\" formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n (input)=\"formatPhone($event,companyForm)\"\r\n [ngClass]=\"{'ip-input--invalid': (f.phoneNumber.errors && validatePage == 3) || providerError}\">\r\n <span *ngIf=\"f.phoneNumber.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Address</p>\r\n <div class=\"ip-grid-2\" style=\"margin-bottom: 12px;\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.address1.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"businessAddress\" ngx-google-places-autocomplete [options]='options'\r\n (onAddressChange)=\"AddressChange($event)\" placeholder=\"Business Address 1\" formControlName=\"address1\">\r\n <span *ngIf=\"f.address1.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.address1.errors.required\">Business Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"businessAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"businessAddress2\" placeholder=\"Business Address 2\">\r\n </div>\r\n </div>\r\n <div class=\"ip-grid-4\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.city.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"f.city.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.state.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"f.state.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': f.zipcode.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"f.zipcode.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': f.country.errors && validatePage == 3}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"f.country.errors && validatePage == 3\" class=\"ip-error\">\r\n <span *ngIf=\"f.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Company Logo (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Company Logo</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Company Logo <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadLogoInput type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadLogo($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage2.click()\" [(ngModel)]=\"logoName\" readonly type=\"text\"\r\n class=\"ip-input\" placeholder=\"Click to upload company logo\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage2 class=\"ip-upload-icon\" (click)=\"uploadLogoInput.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isLogoRequired\" class=\"ip-error\">Please upload a company logo</span>\r\n <span *ngIf=\"isneeded\" class=\"ip-error\">Company Logo is required</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Contractor Category -->\r\n <div *ngIf=\"selectedRole?.name == 'Contractor'\" class=\"ip-section\">\r\n <p class=\"ip-section-label\">Contractor Category</p>\r\n\r\n <!-- Category selector \u2014 ng-select logic intact, restyled as pill tag-input -->\r\n <div class=\"cc-select-wrap\">\r\n <ng-select [items]=\"contractorSubCategories\" bindLabel=\"name\" [multiple]=\"true\" [closeOnSelect]=\"false\"\r\n (ngModelChange)=\"changeContractor($event)\" [(ngModel)]=\"selectedContractorCategories\"\r\n >\r\n </ng-select>\r\n </div>\r\n\r\n <!-- Sub-items as pill chips per selected category -->\r\n <ng-container *ngFor=\"let item of selectedContractorCategories; let i=index\">\r\n <div class=\"cc-group\">\r\n\r\n <!-- \"Select all\" toggle pill for this category -->\r\n <label class=\"cc-select-all-pill\" [class.cc-select-all-pill--on]=\"item.selectAll\">\r\n <input type=\"checkbox\" [(ngModel)]=\"item.selectAll\" [name]=\"item?.id\" [id]=\"item?.id\"\r\n (change)=\"selectAll($event,item?.items)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"item.selectAll\" width=\"11\" height=\"11\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ item?.name }} \u2014 Select all\r\n </label>\r\n\r\n <!-- Individual sub-item pills -->\r\n <div class=\"cc-sub-pills\">\r\n <label *ngFor=\"let subItem of item?.items\" class=\"cc-sub-pill\"\r\n [class.cc-sub-pill--on]=\"subItem.selected\">\r\n <input type=\"checkbox\" [(ngModel)]=\"subItem.selected\" [name]=\"subItem?.id\" [id]=\"subItem?.id\"\r\n (change)=\"unCheckedEvent($event,item)\" class=\"cc-hidden-check\">\r\n <svg *ngIf=\"subItem.selected\" width=\"10\" height=\"10\" viewBox=\"0 0 24 24\" fill=\"none\"\r\n stroke=\"currentColor\" stroke-width=\"3.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <polyline points=\"20 6 9 17 4 12\"/>\r\n </svg>\r\n {{ subItem?.name }}\r\n </label>\r\n </div>\r\n\r\n </div>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(4)\">\r\n Continue\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 4\">\r\n\r\n <!-- Header -->\r\n <div class=\"ip-header\">\r\n <div class=\"ip-header-icon\">\r\n <svg width=\"22\" height=\"22\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"8\" r=\"4\"/>\r\n <path d=\"M6 20v-2a4 4 0 014-4h4a4 4 0 014 4v2\"/>\r\n </svg>\r\n </div>\r\n <div>\r\n <h2 class=\"ip-title\">Your Profile</h2>\r\n <p class=\"ip-sub\">We need a few basics and a headshot to complete your profile.</p>\r\n </div>\r\n </div>\r\n\r\n <!-- Copy from provider toggle -->\r\n <div *ngIf=\"isBusiness\" class=\"ip-copy-row\">\r\n <input [(ngModel)]=\"isCopy\" type=\"checkbox\" name=\"isCopy\" id=\"isCopy\"\r\n class=\"ip-copy-check\" (change)=\"changeAddressUser()\">\r\n <label for=\"isCopy\" class=\"ip-copy-label\">Copy from Provider Information</label>\r\n </div>\r\n\r\n <form [formGroup]=\"userForm\">\r\n\r\n <!-- Personal Details -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Personal Details</p>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"firstName\">First Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.firstName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"First Name\" formControlName=\"firstName\" id=\"firstName\">\r\n <span *ngIf=\"u.firstName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.firstName.errors.required\">First Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"lastName\">Last Name <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.lastName.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Last Name\" formControlName=\"lastName\" id=\"lastName\">\r\n <span *ngIf=\"u.lastName.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.lastName.errors.required\">Last Name is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"email\">Email <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.email.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" placeholder=\"Email\" formControlName=\"email\" id=\"email\">\r\n <span *ngIf=\"u.email.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.email.errors.required\">Email is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Home Address -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Home Address</p>\r\n <div class=\"ip-field\" style=\"margin-bottom: 12px;\">\r\n <label class=\"ip-label\" for=\"address1\">Address Line 1 <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.address1.errors && validatePage == 4}\"\r\n [options]=\"options\" (onAddressChange)=\"AddressChangeUser($event)\" type=\"text\" class=\"ip-input\"\r\n placeholder=\"Home Address 1\" formControlName=\"address1\" id=\"address1\" ngx-google-places-autocomplete>\r\n <span *ngIf=\"u.address1.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.address1.errors.required\">Home Address 1 is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-grid-3\">\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"homeAddress2\">Address Line 2</label>\r\n <input type=\"text\" class=\"ip-input\" id=\"homeAddress2\" formControlName=\"address2\"\r\n placeholder=\"Home Address 2\">\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"City\">City <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.city.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"City\" placeholder=\"City\" formControlName=\"city\">\r\n <span *ngIf=\"u.city.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.city.errors.required\">City is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"State\">State <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.state.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"State\" placeholder=\"State\" formControlName=\"state\">\r\n <span *ngIf=\"u.state.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.state.errors.required\">State is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Zipcode\">Zipcode <span class=\"ip-required\">*</span></label>\r\n <input [textMask]=\"{ mask: zipcodeMask }\"\r\n [ngClass]=\"{'ip-input--invalid': u.zipcode.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Zipcode\" placeholder=\"Zipcode\" formControlName=\"zipcode\">\r\n <span *ngIf=\"u.zipcode.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.zipcode.errors.required\">Zipcode is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"Country\">Country <span class=\"ip-required\">*</span></label>\r\n <input [ngClass]=\"{'ip-input--invalid': u.country.errors && validatePage == 4}\"\r\n type=\"text\" class=\"ip-input\" id=\"Country\" placeholder=\"Country\" formControlName=\"country\">\r\n <span *ngIf=\"u.country.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.country.errors.required\">Country is required</span>\r\n </span>\r\n </div>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\" for=\"inputPhone\">Phone Number <span class=\"ip-required\">*</span></label>\r\n <input class=\"ip-input\" type=\"text\" (input)=\"formatPhone($event,userForm)\"\r\n name=\"inputPhone\" placeholder=\"Phone Number\" id=\"inputPhone\" autocomplete=\"off\"\r\n formControlName=\"phoneNumber\" [maxLength]=\"14\"\r\n [ngClass]=\"{'ip-input--invalid': u.phoneNumber.errors && validatePage == 4}\">\r\n <span *ngIf=\"u.phoneNumber.errors && validatePage == 4\" class=\"ip-error\">\r\n <span *ngIf=\"u.phoneNumber.errors.required\">Phone Number is required</span>\r\n </span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </form>\r\n\r\n <!-- Profile Picture (intentionally outside formGroup) -->\r\n <div class=\"ip-section\">\r\n <p class=\"ip-section-label\">Profile Picture</p>\r\n <div class=\"ip-field\">\r\n <label class=\"ip-label\">Profile Picture <span class=\"ip-required\">*</span></label>\r\n <div class=\"ip-upload-wrap\">\r\n <input #uploadFile type=\"file\" accept=\".png,.jpg,.jpeg\" (change)=\"uploadUserImage($event)\"\r\n class=\"upload-initial-input rounded-circle opacity-0 position-absolute\" />\r\n <input (click)=\"uploadImage1.click()\" [(ngModel)]=\"fileName\" readonly type=\"text\"\r\n class=\"ip-input\" id=\"upload\" accept=\".png,.jpg,.jpeg\" placeholder=\"Click to upload profile picture\">\r\n <small class=\"text-muted d-block\" style=\"font-size: 12px;\">Allowed formats: PNG, JPG, JPEG</small>\r\n <img #uploadImage1 class=\"ip-upload-icon\" (click)=\"uploadFile.click()\"\r\n src=\"assets/images/icons/upload.svg\" alt=\"Upload\">\r\n </div>\r\n <span *ngIf=\"isImageRequired\" class=\"ip-error\">Please upload a profile image</span>\r\n <span *ngIf=\"userError\" class=\"ip-error\">{{ userError }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Footer -->\r\n <div class=\"ip-footer\">\r\n <button class=\"ip-back-btn\" (click)=\"previous()\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M19 12H5M12 5l-7 7 7 7\"/>\r\n </svg>\r\n Back\r\n </button>\r\n <button class=\"ip-next-btn\" (click)=\"next(5)\" [disabled]=\"showLoader\">\r\n <span *ngIf=\"!showLoader\">Continue</span>\r\n <span *ngIf=\"showLoader\" class=\"v1-spinner\"></span>\r\n <svg *ngIf=\"!showLoader\" width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 5\">\r\n <div class=\"v5-wrap\">\r\n\r\n <!-- Success icon -->\r\n <div class=\"v5-icon\">\r\n <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M22 11.08V12a10 10 0 11-5.93-9.14\"/>\r\n <polyline points=\"22 4 12 14.01 9 11.01\"/>\r\n </svg>\r\n </div>\r\n\r\n <h2 class=\"v5-title\">You're all set!</h2>\r\n <p class=\"v5-sub\">Account created successfully. Next step: complete your profile.</p>\r\n\r\n <!-- Info cards -->\r\n <div class=\"v5-cards\">\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <circle cx=\"12\" cy=\"12\" r=\"10\"/>\r\n <line x1=\"12\" y1=\"8\" x2=\"12\" y2=\"12\"/>\r\n <line x1=\"12\" y1=\"16\" x2=\"12.01\" y2=\"16\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">Profile completion is mandatory to participate in rosters, programs, requests, and platform workflows. Incomplete profiles will have limited access.</p>\r\n </div>\r\n <div class=\"v5-card\">\r\n <div class=\"v5-card-icon v5-card-icon--green\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"/><path d=\"M3 9h18M9 21V9\"/>\r\n </svg>\r\n </div>\r\n <p class=\"v5-card-text\">You may access your dashboard at any time, but full functionality is available only after profile completion.</p>\r\n </div>\r\n </div>\r\n\r\n <button (click)=\"dashboard()\" class=\"v5-cta\">\r\n Go to Dashboard\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M5 12h14M12 5l7 7-7 7\"/>\r\n </svg>\r\n </button>\r\n\r\n </div>\r\n </ng-container>\r\n <ng-container *ngIf=\"view == 10\">\r\n <app-credentialing (back)=\"onCredentialingBack()\" [data]=\"credentialingData\" [signatureFileId]=\"signatureFileId\"\r\n [signatureUrl]=\"signatureUrl\"></app-credentialing>\r\n </ng-container>\r\n </div>\r\n</ng-container>\r\n</div>\r\n\r\n<ng-template #termsAndConditionsModel>\r\n <div class=\"modal-dialog modal-dialog-centered tc-modal-dialog\">\r\n <div class=\"modal-content tc-modal\">\r\n\r\n <!-- HEADER -->\r\n <div class=\"tc-modal-header\">\r\n \r\n <h4 class=\"tc-modal-title\">{{ termsAndConditionTitle }}</h4>\r\n <span class=\"tc-modal-meta\" *ngIf=\"legalMeta\">Last Modified: {{ legalMeta.createdDate | date:'MMM d, y, h:mm:ss a' }}, {{ legalMeta.versionName }}</span>\r\n </div>\r\n\r\n\r\n <div class=\"tc-scroll-wrapper\">\r\n <div class=\"tc-modal-body\"\r\n (scroll)=\"onTermsScroll($event)\">\r\n <ng-container *ngIf=\"termsAndConditionTitle == 'Terms and Conditions'\">\r\n <app-terms-conditions [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-terms-conditions>\r\n </ng-container>\r\n <ng-container *ngIf=\"termsAndConditionTitle != 'Terms and Conditions'\">\r\n <app-privacy-policy [PrivacyAndTerms]=\"privacyAndTerms\" [title]=\"title\" [branding]=\"branding\"\r\n (metaLoaded)=\"onLegalMetaLoaded($event)\">\r\n </app-privacy-policy>\r\n </ng-container>\r\n </div>\r\n\r\n <!-- Floating scroll-to-bottom button -->\r\n <button class=\"tc-scroll-fab\" *ngIf=\"!isAgreeEnabled && legalMeta\" (click)=\"scrollToBottomClick($event)\"\r\n title=\"Scroll to bottom\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"\r\n stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M12 5v14M5 15l7 7 7-7\"/>\r\n </svg>\r\n </button>\r\n </div>\r\n\r\n <!-- FOOTER -->\r\n <div class=\"tc-modal-footer\">\r\n <button type=\"button\" class=\"tc-btn tc-btn-decline\"\r\n (click)=\"decline(termsAndConditionTitle); modelRef.hide();\">\r\n Decline\r\n </button>\r\n <button type=\"button\" class=\"tc-btn tc-btn-agree\"\r\n [disabled]=\"!isAgreeEnabled\"\r\n (click)=\"agree(termsAndConditionTitle); modelRef.hide();\">\r\n I Agree\r\n </button>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n</ng-template>", styles: ["@charset \"UTF-8\";.brand-name{font-weight:700;font-size:calc(100% + 4px)}.spinner{width:38px;height:38px;border:dotted white;border-top:2px solid #f6f6f6;border-radius:62%;animation:spin 1.7s linear infinite;margin:-9px 0 0 -28px}@keyframes spin{to{transform:rotate(360deg)}}::ng-deep .backdrop{background-color:transparent!important}.filter-black{filter:brightness(.4)!important}.footer-view{margin-top:3rem;margin-left:0;margin-right:0}.footer-signature{margin-top:9rem}.slider-view{width:11rem;margin-left:1px}.container{margin-top:80px}.container .card{border-radius:5px}.container .header{padding:33px 10px 0}.container .header .logo{width:15%;height:80%}.container .form-control{padding:.75rem 1rem;border-color:#a1a1a1}.container .form-control:focus{color:#000;box-shadow:none;border-color:#a1a1a1!important}.container .form-control::placeholder{font-weight:500;font-size:12px;color:#a1a1a1}.container .link{color:#4077ad}.container .link-signup{font-weight:bolder}.container .form-check-label{margin-bottom:0;padding-top:9px}.container .content-view{margin-top:10%}.container .content-description{margin-top:25%}.container .tag-content{color:#fff9e8;margin-left:9%}.container .tag-content p{color:#fff9e8}.container .form-check-input:checked{background-color:#000;border-color:#000}.container .img-tick{margin:-31px 12px 0 -35px}.container .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #000000}.container .form-check-input:focus{box-shadow:none}.container input[type=checkbox]{accent-color:#000000}.term-list{padding:48px 60px 6px 0;margin-left:30px;color:\"#1f1f1fdb\"}.add-tab{padding:75px 75px 6px 1px;margin-left:50px;color:\"#1f1f1fdb\"}.add-tab-view{padding:75px 75px 6px 1px;margin-left:80px;color:\"#1f1f1fdb\"}.inspect-add{margin-top:3rem}.add-btn{font-size:16px;border-radius:5px;transition:.2s;padding:.25rem .5rem;background:#fff;border:1px solid rgba(148,147,147,.1882352941);color:#444;line-height:48px;box-shadow:0 1px 9px #98a2b3;width:9rem}.add-btn:hover{border:1px solid rgba(148,147,147,.1882352941);box-shadow:none}.agree{padding:0 0 8px 47px}.agree .form-check-input[type=checkbox]{border-radius:2px;border:2px solid #98A2B3;width:14px;height:14px;margin:5px 9px 0 -35px}.agree .form-check-input:focus{box-shadow:none}.agree .form-check-input:checked{background-color:#000;border-color:#000}.agree .invalid-feedback{font-size:10px!important;margin:0 0 0 21px}.checkmark{vertical-align:text-bottom;color:#98a2b3;font-weight:500;font-size:12px}.term-signature{padding-left:16rem;padding-right:65px;position:absolute;margin:150px 0 0 50%}.participate-tab{height:135px;width:142px}.card-design{height:147px;width:147px;padding-left:10px;margin-left:42px;background:#fff0;border:2px solid #98A2B3;box-shadow:0 0 4px #98a2b3;border-radius:27px;margin-bottom:42px}.upload{height:39px;margin-top:-4px;width:126px;font-size:12px}.participate-tab{margin-top:-25px}.slider{width:14rem;margin-left:69px}.btn-clear{background:#d3dae6;color:#98a2b3;font-size:12px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;width:46%;line-height:28px}.btn-close{background:#f1f4fa;color:#98a2b3;font-size:17px;border-radius:5px;transition:.2s;padding:6px;border:none;height:auto;font-weight:500;width:116px;color:#737a87;line-height:28px}.view-logo{padding-top:1%;padding-bottom:4%;text-align:center}.back-btn{border-radius:45px;height:41px}.next{background:#4077ad;border-radius:30px;height:60px;width:60px;border:white}.profile-field{margin-top:-10px}.profile-field input{line-height:30px;margin:-10px 3px 3px}.load-page{padding:21px 49px 13px 34px}.sign-img{width:291px;height:95px;border-radius:8px;border:1px solid rgba(179,178,178,.33);margin-top:19px}.upload-image{height:16px;width:16px;position:absolute;margin-left:66rem;margin-top:-39px}.para-comma{font-weight:500}.go-btn{border-radius:45px;height:50px;padding:0 20px;background:#4077ad;border:1px solid #4077ad;color:#fff;line-height:28px;font-size:14px;font-weight:500}.text-label{color:#747b83;font-weight:500}.form{padding:20px;border-radius:5px}.form-control:focus{color:#000;box-shadow:none;border-color:#848484!important}.form-control::placeholder{font-weight:500;font-size:12px;color:#bec1be;padding-left:10px}.btn-primary:active{background-color:#50575e}@media screen and (min-width: 500px) and (max-width: 769px){.content-view{background:#0c1620;width:44rem;margin:31px 0 0!important;padding:28px 32px 17px 71px!important;border-radius:29px}.upload-image{margin-left:25rem!important}}@media screen and (min-width: 768px) and (max-width: 1024px){.back-btn{height:31px;width:82px;position:absolute;margin-left:-53px}.back-tab{position:absolute;margin-left:-87px;height:37px}.go-btn{width:175px;height:44px}.term-signature{padding-left:10px}.upload-image{margin-left:40rem}}@media screen and (min-width: 374px) and (max-width: 426px){.head-logo{width:216px;padding-bottom:16px}.slider{visibility:hidden}.back-btn{height:31px;width:82px;position:absolute;margin-left:73px;margin-top:23px}.go-btn{width:175px;height:44px}.upload-image{margin-left:16rem}.term-signature{margin:84% 0 7px 4%}}@media screen and (min-width: 320px) and (max-width: 426px){.footer-signature{margin-top:20rem}.login .head-logo{padding:16px 2px 0;width:38%!important;height:40%!important}.container{margin-top:5px!important}.card{padding:2px!important}.tag-content{margin:3% 0 0!important;background-color:#121b24;border-radius:13px}.img-tick{margin:3px!important}.slider{visibility:hidden}.load-page{padding:0}.head-logo{width:216px;padding-bottom:16px}.back-btn{height:26px;width:71px;position:absolute;margin-left:-17rem!important;font-size:10px;margin-top:23px}.go-btn{width:142px;height:36px;margin-right:-28px;font-size:10px}.add-tab,.add-tab-view{padding:30px 33px 2px 3px;margin-left:15px}.add-btn{width:6rem}.slider-tab{visibility:hidden}.back-tab{margin-left:-14rem;margin-top:1px;font-size:14px;height:39px}.participate-tab{height:96px;width:87px}.card-design{height:124px;width:125px;padding-left:17px;margin-left:30px}.term-signature{padding:22px 22px 13px 27px}.term-list{padding:43px 10px 10px 3px;margin-left:0;text-align:-webkit-center}}@media screen and (min-width: 320px) and (max-width: 376px){.agree{padding:0 0 8px 25px}.participate-tab{height:96px;width:87px}.card-design{height:109px;width:97px;padding-left:4px;margin-left:10px}.card-design h6{font-size:10px;padding-left:14px;font-weight:600}.sign-img{width:270px}.term-list{padding:20px 20px 6px 4px;margin-left:13px}}@media screen and (min-width: 320px) and (max-width: 350px){.upload-image{height:13px;width:11px;margin-left:10rem;margin-top:-35px}.btn-clear{width:92px}.term-signature{margin:84% 0 7px 4%}}.disabled-btn{cursor:not-allowed!important;background:#4077ad!important;color:#fff!important}.modal-dialog .modal-content{border-radius:12px;background:#fff!important;border:1px solid rgba(128,128,128,.3294117647)!important}.title-popup{font-size:18px;color:#0c1620}.tc-modal-dialog{max-width:min(780px,96vw)}.tc-modal{border-radius:20px!important;border:none!important;overflow:hidden;box-shadow:0 32px 72px #00000038,0 6px 20px #0000001a!important;height:min(720px,90vh);display:flex;flex-direction:column}.tc-modal-header{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;padding:10px 28px 14px;background:#4077ad;border-bottom:none;flex-shrink:0}.tc-modal-header .tc-header-icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}.tc-modal-header .tc-modal-title{font-family:Inter,system-ui,sans-serif;font-size:18px;font-weight:700;color:#fff;letter-spacing:-.01em;padding:10px;margin:0;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tc-modal-header .tc-modal-meta{font-weight:600;font-size:12px;color:#fff;flex-shrink:0;white-space:nowrap}@media screen and (max-width: 767px){.tc-modal-header .tc-modal-header{flex-flow:column;align-items:center;text-align:center}.tc-modal-header .tc-modal-title{flex:1 1 100%;white-space:normal}.tc-modal-header .tc-modal-meta{flex:1 1 100%;opacity:.85}}.tc-scroll-hint{display:flex;align-items:center;gap:7px;padding:9px 28px;background:#f0f9ff;border-bottom:none;font-size:12px;color:#4077ad;font-family:Inter,system-ui,sans-serif;letter-spacing:.01em;flex-shrink:0}.tc-scroll-hint svg{flex-shrink:0}.tc-scroll-hint strong{font-weight:700}.tc-scroll-hint .tc-progress-pill{margin-left:auto;background:#4077ad;color:#fff;font-size:11px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:99px;min-width:42px;text-align:center;transition:background .2s ease}.tc-progress-bar{height:3px;background:#e0f2fe;flex-shrink:0}.tc-progress-bar .tc-progress-fill{height:100%;background:linear-gradient(90deg,#4077ad,#38bdf8);border-radius:0 99px 99px 0;transition:width .12s ease}.tc-scroll-wrapper{position:relative;flex:1 1 auto;overflow:hidden;display:flex;flex-direction:column}.tc-modal-body{flex:1 1 auto;overflow-y:auto;padding:26px 32px;background:#fff;scrollbar-width:thin;scrollbar-color:#cbd5e1 transparent}.tc-modal-body::-webkit-scrollbar{width:5px}.tc-modal-body::-webkit-scrollbar-track{background:transparent}.tc-modal-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:99px}.tc-modal-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.tc-scroll-fab{position:absolute;bottom:20px;right:20px;width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:10;transition:transform .18s ease,box-shadow .18s ease}.tc-scroll-fab:hover{transform:translateY(-3px) scale(1.1);animation:none}@keyframes tc-fab-bounce{0%,to{transform:translateY(0);box-shadow:0 4px 18px #2563eb80}50%{transform:translateY(5px);box-shadow:0 2px 10px #2563eb59}}.tc-modal-footer{display:flex;justify-content:flex-end;align-items:center;gap:10px;padding:16px 24px;background:#f8fafc;border-top:1px solid #e2e8f0;flex-shrink:0}.tc-btn{font-family:Inter,system-ui,sans-serif;font-size:14px;font-weight:600;letter-spacing:.015em;padding:10px 26px;border-radius:5px;border:none;cursor:pointer;transition:background .18s ease,box-shadow .18s ease,transform .15s ease}.tc-btn.tc-btn-decline{background:#b43026;color:#fff;border:1.5px solid #B43026}.tc-btn.tc-btn-decline:hover{background:#96271f;border-color:#96271f;color:#fff}.tc-btn.tc-btn-agree{background:linear-gradient(135deg,#4077ad 0% 100%);color:#fff;box-shadow:0 3px 10px #2563eb59}.tc-btn.tc-btn-agree:hover:not(:disabled){background:linear-gradient(135deg,#2d5f8a,#4077ad);transform:translateY(-1px)}.tc-btn.tc-btn-agree:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}ul.term-list-data li{padding-bottom:5px;font-size:13px;font-weight:500;line-height:21px}ol,ul,dl{margin-top:0;margin-bottom:1rem}::ng-deep .modal-content{background:none!important;width:100%;border:none}.hidden-view{display:none}.header-container{position:relative;padding:20px}.view-logo{text-align:center}.logout-button{top:20px;right:20px;position:absolute}.logout-button button{background:none;border:none;font-size:16px;display:flex;align-items:center;cursor:pointer}.logout-button img{margin-right:5px;height:20px}.user-card{align-items:center;color:#4077ad;cursor:pointer}.user-cards-active{background:#4077ad;color:#fff}.save-btn.upload{border:1px solid #4077AD;background-color:#4077ad;color:#fff;border-radius:5px;background:#4077ad;padding:4px 10px;display:inline-flex;align-items:center;gap:6px}.save-btn.upload img{filter:brightness(0) invert(1)}.form-check.agree{display:flex;align-items:flex-start;gap:8px;margin-bottom:8px}.form-check.agree .form-check-input{margin-top:4px;flex-shrink:0}.form-check.agree .form-check-label{line-height:1.4;cursor:pointer;white-space:normal}.spinner-16{width:16px;height:16px}.h6-buttons{display:flex;align-items:center;gap:8px}.form-check.agree{display:flex;align-items:flex-start;margin-bottom:14px}.form-check-input{position:absolute;opacity:0;cursor:pointer}.form-check-label{position:relative;padding-left:28px;cursor:pointer;font-size:14px;line-height:20px;color:#212529;-webkit-user-select:none;user-select:none}.form-check-label:before{content:\"\";position:absolute;left:0;top:8px;width:18px;height:18px;border:2px solid #adb5bd;border-radius:4px;background:#fff;transition:all .2s ease}.form-check-label:after{content:\"\";position:absolute;left:5px;top:10px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .15s ease}.form-check-input:checked+.form-check-label:before{background-color:#4077ad;border-color:#4077ad}.form-check-input:checked+.form-check-label:after{transform:rotate(45deg) scale(1)}.form-check-label:hover:before{border-color:#4077ad}.form-check-input:focus+.form-check-label:before{box-shadow:0 0 0 3px #4077ad40}.form-check-input.is-invalid+.form-check-label:before{border-color:#dc3545}.form-check-input.is-invalid:checked+.form-check-label:before{background-color:#dc3545}.invalid-feedback{display:block;font-size:12px;margin-left:7px;margin-top:4px}::ng-deep .modal-dialog{max-width:750px}.user-cards-active{background-color:#4077ad;color:#fff;border:2px solid #4077AD}body.modal-open{overflow:hidden!important}.modal{z-index:1055!important}.modal-backdrop{z-index:1050!important}.modal-dialog{margin:auto;pointer-events:auto}.modal-content{position:relative;z-index:1060}.logout-container{display:flex;justify-content:flex-end}.logout-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 16px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#64748b;background:#f8fafc;border:1.5px solid #e2e8f0;cursor:pointer;transition:color .18s,background .18s,border-color .18s,box-shadow .18s}.logout-btn:hover{color:#dc2626;background:#fff5f5;border-color:#fca5a5}.logout-btn:active{transform:scale(.97)}@media screen and (max-width: 767px){.term-signature{padding-left:3rem;padding-right:0;position:unset;margin:0}.footer-signature{margin-top:0rem}.disabled-btn{position:absolute;bottom:13px;right:24px}.next{height:46px;width:46px;position:absolute;bottom:21px;right:35px}.mob{padding-bottom:4.5rem!important}.checkmark{width:85%}.terms-fixed-modal{width:unset}::ng-deep .privacy-policy-modal .logo-section{margin-bottom:0!important}.add-tab-view{padding:30px 25px 6px;margin-left:0}.user-card{width:96%}.footer .btn-mob{display:flex;align-items:center}.back-btn{position:absolute;bottom:21px;left:10px}.actions{margin:50px 34px 1px}}@media screen and (min-width: 768px) and (max-width: 1024px){.footer-signature{margin-top:3rem}}.v1-welcome{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-welcome-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cfd2d6;display:flex;align-items:center;justify-content:center;color:#90979d;margin-top:2px}.v1-welcome-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v1-brand{color:#4077ad}.v1-welcome-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v1-body{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-body{grid-template-columns:1fr;padding:0 16px 16px}}.v1-agreements{display:flex;flex-direction:column;gap:12px}.v1-agreement-card{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:5px;border:1.5px solid #e2e8f0;background:#fff;transition:border-color .2s,box-shadow .2s;box-shadow:0 1px 3px #0000000a}.v1-agreement-card:hover{border-color:#c7d3e2;box-shadow:0 2px 8px #00000012}.v1-agreement-card.v1-card--agreed{border-color:#dde2e7}.v1-agreement-card.v1-card--invalid{border-color:#fecaca;background:#fff5f5}.v1-card-icon{flex-shrink:0;width:38px;height:38px;border-radius:5px;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;color:#4077ad}.v1-card--agreed .v1-card-icon{border-color:#dde2e7;color:#7e8994}.v1-card-body{flex:1 1 auto;min-width:0}.v1-card-title{font-size:14px;font-weight:600;color:#0f172a;margin:0 0 2px;line-height:1.3}.v1-card-sub{font-size:12px;color:#6b7280;margin:0}.v1-agree-btn{flex-shrink:0;display:inline-flex;align-items:center;gap:5px;padding:7px 14px;border-radius:5px;font-size:12px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;border:1.5px solid #4077AD;color:#4077ad;background:transparent;cursor:pointer;white-space:nowrap;transition:background .18s,color .18s}.v1-agree-btn:hover{background:#4077ad;color:#fff}.v1-agree-btn.v1-agree-btn--done{background:#3e7f50;border-color:#3e7f50;color:#fff}.v1-agree-btn:disabled{opacity:.7;cursor:not-allowed}.v1-agree-btn:disabled:hover{background:transparent;color:#4077ad}.v1-agree-spinner{width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex-shrink:0;animation:v1-agree-spin .7s linear infinite}@keyframes v1-agree-spin{to{transform:rotate(360deg)}}.v1-signature{display:flex;flex-direction:column;gap:10px}.v1-sig-header{display:flex;align-items:center;justify-content:space-between}.v1-sig-label{display:inline-flex;align-items:center;gap:7px;font-size:14px;font-weight:600;color:#0f172a;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-clear-btn{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#6b7280;background:transparent;border:1px solid #e2e8f0;border-radius:5px;padding:4px 10px;cursor:pointer;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;transition:color .18s,border-color .18s}.v1-clear-btn:hover{color:#dc2626;border-color:#fca5a5}.v1-sig-pad{position:relative;border-radius:5px;border:1.5px dashed #cbd5e1;overflow:hidden;min-height:120px}.v1-sig-pad canvas{display:block;cursor:crosshair;width:100%;height:120px}.v1-sig-hint{position:absolute;bottom:8px;left:50%;transform:translate(-50%);font-size:12px;color:#c0cad8;pointer-events:none;margin:0;white-space:nowrap;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-error-msg{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.v1-footer{padding:8px 32px 20px;display:flex;justify-content:flex-end;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v1-footer{padding:8px 16px 20px}}.v1-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:12px 28px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;transition:transform .15s;min-width:148px;justify-content:center}.v1-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v1-continue-btn:active:not(:disabled){transform:translateY(0)}.v1-continue-btn:disabled,.v1-continue-btn.disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v1-spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:v1-spin .65s linear infinite}@keyframes v1-spin{to{transform:rotate(360deg)}}@media (max-width: 767px){.v1-welcome{padding:20px 16px 14px;gap:12px}.v1-welcome-icon{width:40px;height:40px}.v1-welcome-title{font-size:16px}}.v2-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 20px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-header{padding:20px 16px 14px;gap:12px}}.v2-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;border:1px solid #cecece;display:flex;align-items:center;justify-content:center;color:#abb3ba;margin-top:2px}.v2-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em}.v2-sub{font-size:14px;color:#374151;line-height:1.65;margin:0}.v2-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:14px;padding:10px 32px 50px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-grid{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));padding:0 16px 20px;gap:10px}}.v2-role-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:20px 12px 16px;border-radius:14px;border:1.5px solid #e2e8f0;background:#fff;cursor:pointer;transition:border-color .18s,box-shadow .18s,transform .15s;box-shadow:0 1px 3px #0000000a;text-align:center}.v2-role-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px #4077ad1a;transform:translateY(-2px)}.v2-role-card.v2-role-card--active{border-color:#4077ad;background:#eff6ff;box-shadow:0 0 0 3px #4077ad1f,0 4px 16px #4077ad1f}.v2-role-img-wrap{width:64px;height:64px;border-radius:50%;background:#f8fafc;border:1px solid #e2e8f0;display:flex;align-items:center;justify-content:center;overflow:hidden;transition:background .18s,border-color .18s}.v2-role-img-wrap img{width:44px;height:44px;object-fit:contain;display:block}.v2-role-card--active .v2-role-img-wrap{background:#dbeafe;border-color:#93c5fd}.v2-role-name{font-size:14px;font-weight:600;color:#0f172a;line-height:1.3;text-align:center}.v2-role-card--active .v2-role-name{color:#4077ad}.v2-role-check{position:absolute;top:10px;right:10px;width:20px;height:20px;border-radius:50%;background:#4077ad;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #4077ad59}.v2-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 32px 24px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v2-footer{padding:8px 16px 20px}}.v2-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.v2-back-btn:hover{color:#fff;background:#565c66;border-color:#565c66}.v2-continue-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 24px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.v2-continue-btn:hover:not(:disabled){transform:translateY(-1px)}.v2-continue-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.ip-header{display:flex;align-items:flex-start;gap:16px;padding:28px 32px 16px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-header{padding:20px 16px 12px;gap:12px}}.ip-header-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#eff6ff,#dbeafe);border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad;margin-top:2px}.ip-title{font-size:18px;font-weight:700;color:#0f172a;margin:0 0 6px;line-height:1.25;letter-spacing:-.02em;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-sub{font-size:14px;color:#374151;line-height:1.65;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-section{margin:0 24px 14px;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;padding:18px 20px 16px;box-shadow:0 1px 4px #0000000a}@media (max-width: 767px){.ip-section{margin:0 12px 10px;padding:14px}}.ip-section-label{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media (max-width: 767px){.ip-grid-2{grid-template-columns:1fr}}.ip-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-3{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-3{grid-template-columns:1fr}}.ip-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:12px}@media (max-width: 1024px){.ip-grid-4{grid-template-columns:1fr 1fr}}@media (max-width: 599px){.ip-grid-4{grid-template-columns:1fr}}.ip-field{display:flex;flex-direction:column;gap:5px}.ip-label{font-size:12px;font-weight:600;color:#374151;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;line-height:1.3}.ip-required{color:#dc2626;margin-left:2px;font-weight:700}.ip-input{width:100%;height:44px;padding:0 14px;border:1.5px solid #e2e8f0;border-radius:9px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a;background:#fff;outline:none;transition:border-color .18s,box-shadow .18s;box-sizing:border-box}.ip-input::placeholder{color:#adb5bd;font-weight:400}.ip-input:focus{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.ip-input.ip-input--invalid{border-color:#dc2626;background:#fff8f8}.ip-input.ip-input--invalid:focus{box-shadow:0 0 0 3px #dc26261a}.ip-input[readonly]{cursor:pointer;background:#f8fafc}.ip-error{display:flex;align-items:center;gap:4px;font-size:12px;font-weight:500;color:#dc2626;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.ip-upload-wrap{position:relative;display:flex;align-items:center}.ip-upload-icon{position:absolute;right:14px;width:16px;height:16px;cursor:pointer;opacity:.45;transition:opacity .18s}.ip-upload-icon:hover{opacity:.85}.ip-copy-row{display:flex;align-items:center;gap:10px;margin:0 24px 12px;padding:11px 16px;background:#eff6ff;border:1.5px solid #bfdbfe;border-radius:10px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-copy-row{margin:0 12px 10px}}.ip-copy-check{width:16px;height:16px;accent-color:#4077AD;cursor:pointer;flex-shrink:0}.ip-copy-label{font-size:14px;font-weight:500;color:#0f172a;cursor:pointer;margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;-webkit-user-select:none;user-select:none}.ip-footer{display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:8px 24px 28px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.ip-footer{padding:8px 16px 24px}}.ip-back-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 20px;border-radius:5px;font-size:14px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:#69707d;border:1.5px solid #69707D;cursor:pointer;transition:color .18s,border-color .18s,background .18s}.ip-back-btn:hover{color:#fff;border-color:#565c66;background:#565c66}.ip-next-btn{display:inline-flex;align-items:center;gap:9px;padding:10px 26px;border-radius:5px;font-size:14px;font-weight:600;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 14px #4077ad4d;transition:transform .15s,box-shadow .15s}.ip-next-btn:hover:not(:disabled){transform:translateY(-1px)}.ip-next-btn:active:not(:disabled){transform:translateY(0)}.ip-next-btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed}.v5-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 32px 40px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}@media (max-width: 767px){.v5-wrap{padding:36px 20px 32px}}.v5-icon{width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#dcfce7,#bbf7d0);border:1.5px solid #86efac;display:flex;align-items:center;justify-content:center;color:#16a34a;margin-bottom:20px;box-shadow:0 0 0 8px #22c55e14}.v5-title{font-size:18px;font-weight:800;color:#0f172a;margin:0 0 10px;letter-spacing:-.025em;line-height:1.2}.v5-sub{font-size:14px;color:#374151;margin:0 0 28px;line-height:1.6;max-width:480px}.v5-cards{display:flex;flex-direction:column;gap:12px;width:100%;max-width:520px;margin-bottom:32px;text-align:left}.v5-card{display:flex;align-items:flex-start;gap:14px;padding:16px 18px;border-radius:12px;border:1.5px solid #e2e8f0;background:#f8fafc;box-shadow:0 1px 3px #0000000a}.v5-card-icon{flex-shrink:0;width:36px;height:36px;border-radius:9px;background:#eff6ff;border:1px solid #bfdbfe;display:flex;align-items:center;justify-content:center;color:#4077ad}.v5-card-icon.v5-card-icon--green{background:#f0fdf4;border-color:#bbf7d0;color:#16a34a}.v5-card-text{font-size:14px;color:#374151;line-height:1.6;margin:0}.v5-cta{display:inline-flex;align-items:center;gap:10px;padding:13px 32px;border-radius:5px;font-size:14px;font-weight:600;font-family:inherit;color:#fff;background:linear-gradient(135deg,#4077ad 0% 100%);border:none;cursor:pointer;box-shadow:0 4px 16px #4077ad52;transition:transform .15s,box-shadow .15s}.v5-cta:hover{transform:translateY(-2px)}.v5-cta:active{transform:translateY(0)}.cc-select-wrap{margin-bottom:20px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container{border:1.5px solid #e2e8f0;border-radius:10px;min-height:48px;padding:5px 10px;background:#fff;box-shadow:none;cursor:text;transition:border-color .18s,box-shadow .18s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container:hover{border-color:#94a3b8}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple.ng-select-focused .ng-select-container{border-color:#4077ad;box-shadow:0 0 0 3px #4077ad1a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-container{flex-wrap:wrap;gap:6px;padding:2px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value{display:inline-flex;flex-direction:row;align-items:center;gap:5px;background:#eff6ff;border:1px solid #bfdbfe;border-radius:99px;padding:4px 8px 4px 13px;font-size:12px;font-weight:600;color:#4077ad;margin:0;line-height:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-label{order:1}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon{display:inline-flex;align-items:center;justify-content:center;order:2;width:16px;height:16px;border-radius:50%;font-size:12px;font-weight:700;line-height:1;padding:0;background:#4077ad26;color:#4077ad;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon:hover{background:#4077ad;color:#fff}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-value-icon.right{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-placeholder{font-size:14px;color:#adb5bd;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-select-container.ng-has-value .ng-placeholder{display:none}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-input>input{font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#0f172a}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper{padding-right:6px}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-arrow-wrapper .ng-arrow{border-color:#94a3b8 transparent transparent;border-width:5px 4px 0}.cc-select-wrap ::ng-deep .ng-select.ng-select-multiple .ng-clear-wrapper{color:#94a3b8}::ng-deep .ng-dropdown-panel{border:1.5px solid #e2e8f0;border-radius:12px;box-shadow:0 8px 28px #0000001a,0 2px 8px #0000000f;overflow:hidden;margin-top:5px;z-index:9999!important;background:#fff!important}::ng-deep .ng-dropdown-panel .ng-dropdown-panel-items{padding:6px}::ng-deep .ng-dropdown-panel .ng-option{border-radius:8px;padding:10px 13px;font-size:14px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;transition:background .12s}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#eff6ff;color:#4077ad;font-weight:600}::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked:not(.ng-option-selected){background:#f8fafc;color:#0f172a}::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background:#dbeafe}.cc-group{margin-bottom:18px;padding-top:4px}.cc-group:last-child{margin-bottom:0}.cc-hidden-check{position:absolute;opacity:0;width:0;height:0;pointer-events:none}.cc-select-all-pill{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:99px;border:1.5px solid #e2e8f0;background:#f8fafc;font-size:12px;font-weight:700;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;margin-bottom:10px;transition:background .18s,border-color .18s,color .18s}.cc-select-all-pill:hover:not(.cc-select-all-pill--on){background:#f1f5f9;border-color:#94a3b8}.cc-select-all-pill.cc-select-all-pill--on{background:#0f172a;border-color:#0f172a;color:#fff}.cc-sub-pills{display:flex;flex-wrap:wrap;gap:8px}.cc-sub-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 14px;border-radius:99px;border:1.5px solid #e2e8f0;background:#fff;font-size:12px;font-weight:500;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color:#374151;cursor:pointer;-webkit-user-select:none;user-select:none;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.cc-sub-pill:hover:not(.cc-sub-pill--on){background:#f8fafc;border-color:#94a3b8;color:#0f172a}.cc-sub-pill.cc-sub-pill--on{background:#eff6ff;border-color:#93c5fd;color:#4077ad;font-weight:600;box-shadow:0 0 0 3px #4077ad12}\n"] }]
35839
35839
  }], ctorParameters: () => [{ type: i2.Router }, { type: UserDetailService }, { type: i8.FormBuilder }, { type: FileService }, { type: ProvidersService }, { type: RolesService }, { type: i7.BsModalService }, { type: ProviderContractorSubCategoryService }, { type: ProviderContractorSubCategoryService }, { type: i9.AuthService }, { type: i1$2.TokenService }, { type: i1$2.RoleContextService }, { type: i1$2.AuthLogoutService }, { type: CredentialingStore }, { type: undefined, decorators: [{
35840
35840
  type: Inject,
35841
35841
  args: [LIBRARY_CONFIG]