@posiwise/admin-module 0.0.160 → 0.0.161

package/fesm2022/posiwise-admin-module.mjs

@@ -58,11 +58,13 @@ import { PageAccessGuard } from '@posiwise/core-guards';
 import { AppBaseComponent } from '@posiwise/app-base-component';
 import * as i5 from 'primeng/progressspinner';
 import * as i12 from '@jsverse/transloco';
-import { PAGE_SIZE, TOKEN_KEY, TAG_ENTITY, PERMISSION_NAMES, TOKEN_HEADER_KEY, SUBSCRIPTION_ANALYTICS_TYPES } from '@posiwise/common-utilities';
+import { PAGE_SIZE, TOKEN_KEY, TAG_ENTITY, PERMISSION_NAMES, ADMIN_ROUTERS, TOKEN_HEADER_KEY, SUBSCRIPTION_ANALYTICS_TYPES } from '@posiwise/common-utilities';
 import { HelperService } from '@posiwise/helper-service';
 import * as i3$3 from 'primeng/api';
 import swal from 'sweetalert2';
 import { __decorate, __metadata } from 'tslib';
+import * as i14 from '@angular/cdk/drag-drop';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import groupBy from 'lodash/groupBy';
 import { forkJoin, map, Subject, takeUntil, of } from 'rxjs';
 import { groupBy as groupBy$1 } from 'lodash';
@@ -745,6 +747,20 @@ class DomainConfigBuildComponent extends AppBaseComponent {
     get integrationsItems() {
         return this.integrations.get('items');
     }
+    get abTests() {
+        return this.form.get('ab_tests');
+    }
+    addAbTest() {
+        this.abTests.push(this.fb.group({
+            description: [''],
+            experiment_name: [''],
+            db_shard: [''],
+            microservice_name: ['']
+        }));
+    }
+    removeAbTest(index) {
+        this.abTests.removeAt(index);
+    }
     addIntegrationItem() {
         this.integrationsItems.push(this.fb.group({
             title: [''],
@@ -1215,6 +1231,16 @@ class DomainConfigBuildComponent extends AppBaseComponent {
                     trial_cta_iframe: JSON.parse(res?.config?.trial_cta_iframe)
                 });
             }
+            const abTestsArray = this.abTests;
+            abTestsArray.clear();
+            (res.config?.ab_tests || []).forEach(test => {
+                abTestsArray.push(this.fb.group({
+                    description: [test?.description || ''],
+                    experiment_name: [test?.experiment_name || ''],
+                    db_shard: [test?.db_shard || ''],
+                    microservice_name: [test?.microservice_name || '']
+                }));
+            });
         })
             .add(() => {
             this.isLoading = false;
@@ -1297,6 +1323,30 @@ class DomainConfigBuildComponent extends AppBaseComponent {
             item.onClose();
         });
     }
+    dropFooterSubtitles(i, event) {
+        const control = this.getFooterSubtitles(i);
+        moveItemInArray(control.controls, event.previousIndex, event.currentIndex);
+        control.updateValueAndValidity();
+    }
+    dropNavbarSubtitles(i, event) {
+        const subtitles = this.getNavbarSubtitles(i);
+        moveItemInArray(subtitles.controls, event.previousIndex, event.currentIndex);
+        subtitles.updateValueAndValidity();
+    }
+    dropBookDemoLinks(event) {
+        const items = this.form.get('book_demo')?.get('items');
+        moveItemInArray(items.controls, event.previousIndex, event.currentIndex);
+        items.updateValueAndValidity();
+    }
+    dropContactUsOptions(questionIndex, event) {
+        const options = this.getQuestionOptions(questionIndex);
+        moveItemInArray(options.controls, event.previousIndex, event.currentIndex);
+        options.updateValueAndValidity();
+    }
+    dropItems(control, event) {
+        moveItemInArray(control.controls, event.previousIndex, event.currentIndex);
+        control.updateValueAndValidity();
+    }
     onSave() {
         this.submitted = true;
         this.buttonBusy = true;
@@ -1315,7 +1365,6 @@ class DomainConfigBuildComponent extends AppBaseComponent {
         sub$.subscribe({
             next: () => {
                 this.toast.success(this.translation.translate('Admin.DomainConfig.UpdatedMessage'));
-                this.router.navigate([this.routers.domainConfig]);
             }
         }).add(() => {
             this.submitted = false;
@@ -1323,7 +1372,7 @@ class DomainConfigBuildComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigBuildComponent, deps: [{ token: i0.Injector }, { token: i1.AdminService }, { token: i1$2.ProductService }, { token: i1$1.NgbModal }, { token: i3$2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigBuildComponent, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields -->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Landing Pages for User Onboarding</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"sub_headings\" class=\"col-12\">\n              <div *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\" [formGroupName]=\"i\"\n                class=\"row mb-3\">\n                <div class=\"col-md-10\" *ngIf=\"f['header'].get('sub_headings')['controls'].length\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                    </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\" (keydown.space)=\"removeHeaderSubHeading(i)\" ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\"> + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                 >\n                                  </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                  >\n                                  </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items -->\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of partnersItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12 col-md-6\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Blog Url\" class=\"col-12 col-md-6\" name=\"blog_url\">\n                    <input class=\"form-control\" formControlName=\"blog_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" class=\"col-12 col-md-6\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\"/>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" class=\"col-12 col-md-6\" name=\"ctas_title\">\n                    <input class=\"form-control\" formControlName=\"image_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Remove Button -->\n                <div class=\"col-md-6 text-start mt-2 align-self-center\">\n                  <i ngbTooltip=\"Remove\" (click)=\"removePartnerItem(i)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of testimonialsItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                      ngbTooltip=\"Remove\" (click)=\"removeTestimonialItem(i)\"\n                      (keydown.enter)=\"removeTestimonialItem(i)\"\n                      (keydown.space)=\"removeTestimonialItem(i)\" class=\"fa fa-trash delete-icon\"\n                      aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">+ Add Testimonial</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of videosItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">+ Add Video</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n             </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of ctasItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3 ng-untouched ng-pristine ng-valid ng-star-inserted\">\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-danger\"\n                    (click)=\"removeIntegrationItem(i)\"\n                  >\n                    Remove\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">\n                  + Add Integration\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\" [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\" (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\" aria-hidden=\"true\"></i>\n                </div>\n                <!-- Options inside each question -->\n                <div class=\"col-12\" formArrayName=\"options\">\n                  <div class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\" [formGroupName]=\"j\">\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\" (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\"> + Add Option </button>\n                  </div>\n                </div>\n                <!-- End options -->\n              </div>\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">+ Add Question</button>\n              </div>\n            </div>\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n              <div *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-2\">\n                <pw-input-container label=\"ID\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Position\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"div\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\">\n                                                 </textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">+ Add Hubspot Embed</button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\">\n                  <div *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                      <i\n                      ngbTooltip=\"Remove\"\n                      (click)=\"removeBookDemoLink(i)\"\n                                          (keydown.enter)=\"removeBookDemoLink(i)\"\n                                          (keydown.space)=\"removeBookDemoLink(i)\"\n                                          class=\"fa fa-trash delete-icon\"\n                                          aria-hidden=\"true\"\n                                      ></i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">+ Add Book Demo Link</button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of navbarItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeNavbarItem(i)\"\n                    (keydown.enter)=\"removeNavbarItem(i)\"\n                    (keydown.space)=\"removeNavbarItem(i)\"\n                    ngbTooltip=\"Remove Navbar Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">+ Add Navbar Item</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of footerLinksItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addFooterSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeFooterLinkItem(i)\"\n                    (keydown.enter)=\"removeFooterLinkItem(i)\"\n                    (keydown.space)=\"removeFooterLinkItem(i)\"\n                    ngbTooltip=\"Remove Footer Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addFooterLinkItem()\">+ Add Footer Link</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of guidesItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                 </textarea>\n                 </pw-input-container>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeGuideItem(i)\"\n                    (keydown.enter)=\"removeGuideItem(i)\"\n                    (keydown.space)=\"removeGuideItem(i)\"\n                    ngbTooltip=\"Remove Guide\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">+ Add Guide</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i7$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: DomainConfigBuildComponent, selector: "pw-domain-config-build", viewQueries: [{ propertyName: "partnerCropper", first: true, predicate: ["partnerCropper"], descendants: true }, { propertyName: "uploader", predicate: CustomUploaderComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n\n            <!-- Headline -->\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Video URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Background Image URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea\n                  class=\"form-control\"\n                  rows=\"5\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                ></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Sub Headings -->\n            <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n              <div\n                *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-md-10\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea\n                      class=\"form-control\"\n                      rows=\"3\"\n                      formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                    ></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\"\n                    (keydown.space)=\"removeHeaderSubHeading(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n                + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- USP Items -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items with Drag Support -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n              <div\n                *ngFor=\"let item of partnersItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL + Drag Handle -->\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog Url\" name=\"blog_url\">\n                      <input class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Image URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" name=\"image_url\">\n                    <input class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Delete Icon -->\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removePartnerItem(i)\"\n                    (keydown.enter)=\"removePartnerItem(i)\"\n                    (keydown.space)=\"removePartnerItem(i)\"\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n              <div\n                *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removeTestimonialItem(i)\"\n                    (keydown.enter)=\"removeTestimonialItem(i)\"\n                    (keydown.space)=\"removeTestimonialItem(i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n                  + Add Testimonial\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div\n              formArrayName=\"items\"\n              class=\"col-12 mt-3\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of videosItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Title\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n                  + Add Video\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n              <div\n                *ngFor=\"let item of ctasItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-5\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Description\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <i\n                    class=\"fa fa-trash delete-icon align-self-center\"\n                    (click)=\"removeIntegrationItem(i)\"\n                    (keydown.enter)=\"removeIntegrationItem(i)\"\n                    (keydown.space)=\"removeIntegrationItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n              <div\n                *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\"\n                    (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n                  <div\n                    class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    cdkDrag\n                  >\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\"\n                        (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n                      + Add Option\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n                  + Add Question\n                </button>\n              </div>\n            </div>\n\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n              <div\n                *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-2\"\n                cdkDrag\n              >\n              <pw-input-container label=\"ID\" class=\"col-md-5\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n              </pw-input-container>\n\n              <pw-input-container label=\"Position\" class=\"col-md-6\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n              </pw-input-container>\n              <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n                <i\n                  class=\"fa fa-bars cursor-move\"\n                  cdkDragHandle\n                  ngbTooltip=\"Drag to reorder\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea\n                    class=\"form-control\"\n                    rows=\"5\"\n                    formControlName=\"div\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n                  ></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n</i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n                  + Add Hubspot Embed\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n                  <div\n                    *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n                    [formGroupName]=\"i\"\n                    class=\"row mb-3 border p-3 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        ngbTooltip=\"Remove\"\n                        (click)=\"removeBookDemoLink(i)\"\n                        (keydown.enter)=\"removeBookDemoLink(i)\"\n                        (keydown.space)=\"removeBookDemoLink(i)\"\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n                    + Add Book Demo Link\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n              <div\n                *ngFor=\"let item of navbarItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeNavbarItem(i)\"\n                      (keydown.enter)=\"removeNavbarItem(i)\"\n                      (keydown.space)=\"removeNavbarItem(i)\"\n                      ngbTooltip=\"Remove Navbar Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n                + Add Navbar Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div\n              formArrayName=\"items\"\n              class=\"col-12\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeFooterLinkItem(i)\"\n                      (keydown.enter)=\"removeFooterLinkItem(i)\"\n                      (keydown.space)=\"removeFooterLinkItem(i)\"\n                      ngbTooltip=\"Remove Footer Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                  <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n\n\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary mt-2\"\n                    (click)=\"addFooterSubtitle(i)\"\n                  >\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                (click)=\"addFooterLinkItem()\"\n              >\n                + Add Footer Link\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n                <div\n                  *ngFor=\"let item of guidesItems.controls; let i = index\"\n                  [formGroupName]=\"i\"\n                  class=\"border p-3 mb-3\"\n                  cdkDrag\n                >\n                  <div class=\"row align-items-start\">\n\n                    <pw-input-container label=\"Title\" class=\"col-md-5\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                    </pw-input-container>\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Description\" class=\"col-md-11\">\n                      <textarea\n                        class=\"form-control\"\n                        rows=\"5\"\n                        formControlName=\"description\"\n                        [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                      ></textarea>\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeGuideItem(i)\"\n                        (keydown.enter)=\"removeGuideItem(i)\"\n                        (keydown.space)=\"removeGuideItem(i)\"\n                        ngbTooltip=\"Remove Guide\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n                  + Add Guide\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'AB Tests Section'\">\n          <div class=\"row mt-3 mb-4\">\n            <h4 class=\"mb-3\">AB Tests</h4>\n            <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n              <div\n                *ngFor=\"let abTest of abTests.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 border p-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Description\" class=\"col-md-5\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Experiment Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"experiment_name\" />\n                </pw-input-container>\n\n\n                <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"DB Shard\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"db_shard\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Microservice Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"microservice_name\" />\n                </pw-input-container>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeAbTest(i)\"\n                    (keydown.enter)=\"removeAbTest(i)\"\n                    (keydown.space)=\"removeAbTest(i)\"\n                    ngbTooltip=\"Remove AB Test\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "component", type: i7$1.Accordion, selector: "p-accordion", inputs: ["multiple", "style", "styleClass", "expandIcon", "collapseIcon", "activeIndex", "selectOnFocus", "headerAriaLevel"], outputs: ["onClose", "onOpen", "activeIndexChange"] }, { kind: "component", type: i7$1.AccordionTab, selector: "p-accordionTab", inputs: ["id", "header", "headerStyle", "tabStyle", "contentStyle", "tabStyleClass", "headerStyleClass", "contentStyleClass", "disabled", "cache", "transitionOptions", "iconPos", "selected", "headerAriaLevel"], outputs: ["selectedChange"] }, { kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i3.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.CustomUploaderComponent, selector: "pw-custom-uploader", inputs: ["controlName", "previewData", "aspectRatio", "title"], outputs: ["saveEvent"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "directive", type: i14.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i14.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i14.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -1333,7 +1382,7 @@ __decorate([
 ], DomainConfigBuildComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: DomainConfigBuildComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-domain-config-build', template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields -->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Landing Pages for User Onboarding</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"sub_headings\" class=\"col-12\">\n              <div *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\" [formGroupName]=\"i\"\n                class=\"row mb-3\">\n                <div class=\"col-md-10\" *ngIf=\"f['header'].get('sub_headings')['controls'].length\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                    </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\" (keydown.space)=\"removeHeaderSubHeading(i)\" ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\"> + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                 >\n                                  </textarea>\n              </pw-input-container>\n            </div>\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"\n                  >\n                                  </textarea>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items -->\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of partnersItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12 col-md-6\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Blog Url\" class=\"col-12 col-md-6\" name=\"blog_url\">\n                    <input class=\"form-control\" formControlName=\"blog_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" class=\"col-12 col-md-6\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\"/>\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" class=\"col-12 col-md-6\" name=\"ctas_title\">\n                    <input class=\"form-control\" formControlName=\"image_url\"/>\n                  </pw-input-container>\n                </div>\n\n                <!-- Remove Button -->\n                <div class=\"col-md-6 text-start mt-2 align-self-center\">\n                  <i ngbTooltip=\"Remove\" (click)=\"removePartnerItem(i)\" class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of testimonialsItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                      ngbTooltip=\"Remove\" (click)=\"removeTestimonialItem(i)\"\n                      (keydown.enter)=\"removeTestimonialItem(i)\"\n                      (keydown.space)=\"removeTestimonialItem(i)\" class=\"fa fa-trash delete-icon\"\n                      aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">+ Add Testimonial</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of videosItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">+ Add Video</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n             </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let item of ctasItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3 ng-untouched ng-pristine ng-valid ng-star-inserted\">\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-danger\"\n                    (click)=\"removeIntegrationItem(i)\"\n                  >\n                    Remove\n                  </button>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">\n                  + Add Integration\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\">\n              <div *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\" [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\" (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\" aria-hidden=\"true\"></i>\n                </div>\n                <!-- Options inside each question -->\n                <div class=\"col-12\" formArrayName=\"options\">\n                  <div class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\" [formGroupName]=\"j\">\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\" (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\" (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\"> + Add Option </button>\n                  </div>\n                </div>\n                <!-- End options -->\n              </div>\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">+ Add Question</button>\n              </div>\n            </div>\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n              <div *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-2\">\n                <pw-input-container label=\"ID\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Position\" class=\"col-md-4\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"div\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\">\n                                                 </textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">+ Add Hubspot Embed</button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\">\n                  <div *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-sm-2 d-flex align-items-center mt-3\">\n                      <i\n                      ngbTooltip=\"Remove\"\n                      (click)=\"removeBookDemoLink(i)\"\n                                          (keydown.enter)=\"removeBookDemoLink(i)\"\n                                          (keydown.space)=\"removeBookDemoLink(i)\"\n                                          class=\"fa fa-trash delete-icon\"\n                                          aria-hidden=\"true\"\n                                      ></i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">+ Add Book Demo Link</button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of navbarItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeNavbarItem(i)\"\n                    (keydown.enter)=\"removeNavbarItem(i)\"\n                    (keydown.space)=\"removeNavbarItem(i)\"\n                    ngbTooltip=\"Remove Navbar Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">+ Add Navbar Item</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of footerLinksItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row mb-3\">\n\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Path\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                </pw-input-container>\n\n                <div class=\"col-12\" formArrayName=\"subtitles\">\n                  <div *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\" [formGroupName]=\"j\" class=\"row border p-3 mb-2\">\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n                    <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                      <i class=\"fa fa-trash delete-icon\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\">\n                      </i>\n                    </div>\n                  </div>\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addFooterSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeFooterLinkItem(i)\"\n                    (keydown.enter)=\"removeFooterLinkItem(i)\"\n                    (keydown.space)=\"removeFooterLinkItem(i)\"\n                    ngbTooltip=\"Remove Footer Item\"\n                    aria-hidden=\"true\">\n                  </i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addFooterLinkItem()\">+ Add Footer Link</button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div *ngFor=\"let item of guidesItems.controls; let i = index\" [formGroupName]=\"i\" class=\"row border p-3 mb-3\">\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"5\" formControlName=\"description\"\n                   [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\">\n                                                 </textarea>\n                 </pw-input-container>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeGuideItem(i)\"\n                    (keydown.enter)=\"removeGuideItem(i)\"\n                    (keydown.space)=\"removeGuideItem(i)\"\n                    ngbTooltip=\"Remove Guide\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">+ Add Guide</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'pw-domain-config-build', template: "<h3>Public Pages Configuration</h3>\n<div class=\"mb-4\">\n  <p> The following parameters and settings will be applied to all public pages of this domain. </p>\n</div>\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"isLoading\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<ng-container *ngIf=\"!isLoading && data?.host_name\">\n  <form [formGroup]=\"form\"\n    (ngSubmit)=\"onSave()\">\n    <div class=\"row\">\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscription' | transloco\"\n          name=\"master_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MasterSubscription' | transloco\">\n          <p-dropdown\n          [options]=\"masterSubscriptionsList\"\n          formControlName=\"master_subscription_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['master_subscription_id']?.errors }\"\n          placeholder=\"Select Master Subscription\">\n        </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MasterSubscriptionProduct' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"\n                        'Admin.DomainConfig.Tooltip.MasterSubscriptionProduct' | transloco\n                    \"\n          name=\"master_subscription_product_id\">\n          <p-dropdown\n            [options]=\"masterSubscriptionProductList\"\n            formControlName=\"master_subscription_product_id\"\n            [ngClass]=\"{'is-invalid': submitted && f['master_subscription_product_id']?.errors}\"\n            [placeholder]=\"'Select Master Product'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.BlogFeatureKey' | transloco\"\n          name=\"blog_feature_key\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.BlogFeatureKey' | transloco\">\n          <input type=\"text\"\n            class=\"form-control\"\n            formControlName=\"blog_feature_key\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['blog_feature_key'].errors }\" />\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.MainTos' | transloco\"\n          name=\"main_tos_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.MainTos' | transloco\">\n          <p-dropdown\n          [options]=\"subscriptionTosList\"\n          formControlName=\"main_tos_id\"\n          [ngClass]=\"{ 'is-invalid': submitted && f['main_tos_id']?.errors }\"\n          [placeholder]=\"'Select Main TOS'\"\n          optionValue=\"id\">\n          <ng-template pTemplate=\"selectedItem\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n          <ng-template pTemplate=\"item\" let-item>\n            <span [innerHTML]=\"item.title\"></span>\n          </ng-template>\n        </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSubscription' | transloco\"\n          name=\"crm_subscription_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSubscription' | transloco\">\n          <p-dropdown\n            [options]=\"crmSubscriptionsList\"\n            formControlName=\"crm_subscription_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_subscription_id']?.errors }\"\n            [placeholder]=\"'Select CRM Subscription'\"\n            optionValue=\"id\">\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.organisation ? item?.organisation + ' - ' + item.contact_name : item?.contact_name}}\n            </ng-template>\n          </p-dropdown>\n\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmProduct' | transloco\"\n          name=\"crm_product_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmProduct' | transloco\">\n          <p-dropdown\n            [options]=\"crmProductList\"\n            formControlName=\"crm_product_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_product_id']?.errors }\"\n            [placeholder]=\"'Select CRM Product'\"\n            optionValue=\"id\"\n            >\n            <ng-template pTemplate=\"selectedItem\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n            <ng-template pTemplate=\"item\" let-item>\n              {{item?.subscription_id ? item?.name  +' - SubscriptionID = '+ item.subscription_id : item?.name}}\n            </ng-template>\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CrmSource' | transloco\"\n          name=\"crm_source_id\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CrmSource' | transloco\">\n          <p-dropdown\n            [options]=\"crmSourcesList\"\n            formControlName=\"crm_source_id\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['crm_source_id']?.errors }\"\n            [placeholder]=\"'Select CRM Source'\"\n            optionValue=\"id\"\n            optionLabel=\"name\"\n            >\n          </p-dropdown>\n        </pw-input-container>\n      </div>\n      <!-- crm subscription fields end-->\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.Active' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.Active' | transloco\" name=\"active\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"active\" name=\"active\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['active'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.IsProductDomain' | transloco\"\n          [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.IsProductDomain' | transloco\"\n          name=\"is_product_domain\">\n          <ui-switch size=\"small\"\n            uncheckedLabel=\"false\"\n            checkedLabel=\"true\"\n            formControlName=\"is_product_domain\"\n            name=\"is_product_domain\"\n            [ngClass]=\"{ 'is-invalid': submitted && f['is_product_domain'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.CanRegisterOnMainPage' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.CanRegisterOnMainPage' | transloco\"\n          name=\"can_register_through_main_page\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"can_register_through_main_page\"\n            name=\"can_register_through_main_page\" [ngClass]=\"{\n                                  'is-invalid': submitted && f['can_register_through_main_page'].errors\n                              }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.SocialLoginEnabled' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.SocialLoginEnable' | transloco\" name=\"social_login_enabled\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"social_login_enabled\"\n            name=\"social_login_enabled\" [ngClass]=\"{ 'is-invalid': submitted && f['social_login_enabled'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n      <div class=\"col-12 col-sm-3\">\n        <pw-input-container [label]=\"'Admin.DomainConfig.NotifyLogins' | transloco\" [showTooltip]=\"true\"\n          [tooltipText]=\"'Admin.DomainConfig.Tooltip.NotifyLogins' | transloco\" name=\"notify_logins\">\n          <ui-switch size=\"small\" uncheckedLabel=\"false\" checkedLabel=\"true\" formControlName=\"notify_logins\"\n            name=\"notify_logins\" [ngClass]=\"{ 'is-invalid': submitted && f['notify_logins'].errors }\">\n          </ui-switch>\n        </pw-input-container>\n      </div>\n    </div>\n\n    <div class=\"my-5\">\n      <h3>Pre-Built Pages Config (Resources, Landing Pages, etc)</h3>\n\n      <p-accordion class=\"mt-5\">\n        <p-accordionTab [header]=\"'Instructions - README FIRST'\">\n          <div class=\"mb-3\">\n            <p>We\u2019ve built and maintain a collection of high-converting landing pages designed to help you quickly launch polished\n              UIs for onboarding users.</p>\n            <p><strong>Newsletter Subscription Pages:</strong><br> After configuring your domain, you can access pages like\n              <strong>/join/cs1, /join/cs2, /join/cs3, etc.</strong>, specifically designed for newsletter sign-ups. <br>\n              Subscribers from these pages will be listed in the <strong>SmartCRM module</strong>.</p>\n            <p><strong>Trial Product Sign-Up Pages:</strong><br> For users interested in trial products, utilize pages such as\n              <strong>/join/trial1, /join/trial2, /join/trial3, etc.</strong>.<br> Users registering through these pages will\n              appear in the <strong>Admin > Users section</strong>.</p>\n            <p>Once you\u2019ve selected the landing page you want to use <strong>(e.g., /join/trial3)</strong>, make sure to update\n              the <strong>Internal Path</strong> in the <strong>Core tab</strong> accordingly\u2014i.e., set it to\n              <strong>/join/trial3</strong>.</p>\n            <p>If you need assistance integrating these pages into your workflow or have further questions, feel free to reach\n              out.</p>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Subscribe to Product/Newsletter Config'\">\n          <div class=\"mb-3\">\n            <p>Trial Pages will enable users to sign up to real products and are accessible at the path /join/trial1,\n              /join/trial2, etc.</p>\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <!-- live page link -->\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveTrial' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/trial1'\" target=\"_blank\">{{ shardUrl }}/join/trial1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialProduct' | transloco\" name=\"trial_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"trial_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                  form.get('trial_product_id').touched &&\n                                                  form.get('trial_product_id').invalid\n                                                      ? { border: '1px solid #ff586b' }\n                                                      : { border: '1px solid gray' }\n                                              \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCrmSourceId' | transloco\" name=\"trial_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCrmSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_crm_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfSourceId' | transloco\" name=\"trial_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfSourceId' | transloco\n                                          \">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"trial_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_pdf_source_id']?.errors }\"\n                  [placeholder]=\"'Select CRM Source'\" optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialVideoUrl' | transloco\" name=\"trial_video_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.TrialVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['trial_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialBookDemoUrl' | transloco\" name=\"trial_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialBookDemoUrl' | transloco\n                                          \">\n                <input type=\"text\" class=\"form-control\" formControlName=\"trial_book_demo_url\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_book_demo_url'].errors\n                                              }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialCtaIframe' | transloco\" name=\"trial_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialCtaIframe' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_cta_iframe\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_cta_iframe'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialJoinMessage' | transloco\" name=\"trial_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialJoinMessage' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_join_message\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_join_message'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.TrialPdfDownloadText' | transloco\" name=\"trial_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                              'Admin.DomainConfig.Tooltip.TrialPdfDownloadText' | transloco\n                                          \">\n                <textarea rows=\"3\" class=\"form-control\" formControlName=\"trial_pdf_download_text\" [ngClass]=\"{\n                                                  'is-invalid': submitted && f['trial_pdf_download_text'].errors\n                                              }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"trial_image\">{{ 'Admin.DomainConfig.TrialImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Trial Image'\"\n                [controlName]=\"'trial_image'\" [previewData]=\"data['trial_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image2\">{{ 'Admin.DomainConfig.TrialImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image2'\" [previewData]=\"data['trial_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_pdf_image\">{{ 'Admin.DomainConfig.TrialPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Pdf Image'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_pdf_image'\" [previewData]=\"data['trial_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg\">{{ 'Admin.DomainConfig.TrialImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg'\" [previewData]=\"data['trial_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"trial_image_bg2\">{{ 'Admin.DomainConfig.TrialImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.TrialImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [title]=\"'Trial Image Bg2'\" [aspectRatio]=\"'custom'\"\n                [controlName]=\"'trial_image_bg2'\" [previewData]=\"data['trial_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Header Section'\">\n          <div class=\"row mt-4\" formGroupName=\"header\">\n            <h4 class=\"mb-4\">Header Section</h4>\n\n            <!-- Headline -->\n            <div class=\"col-12 col-md-12\">\n              <pw-input-container label=\"Header Headline\" name=\"headline\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"headline\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Video URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Video URL\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Background Image URL -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Header Background Image URL\" name=\"bg_image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"bg_image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Header Description\">\n                <textarea\n                  class=\"form-control\"\n                  rows=\"5\"\n                  formControlName=\"description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                ></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Sub Headings -->\n            <div formArrayName=\"sub_headings\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(headerSubHeadings, $event)\">\n              <div\n                *ngFor=\"let sub of f['header'].get('sub_headings')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-md-10\">\n                  <pw-input-container label=\"Sub Header Description\">\n                    <textarea\n                      class=\"form-control\"\n                      rows=\"3\"\n                      formControlName=\"description\"\n                      [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                    ></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeHeaderSubHeading(i)\"\n                    (keydown.enter)=\"removeHeaderSubHeading(i)\"\n                    (keydown.space)=\"removeHeaderSubHeading(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addHeaderSubHeading()\">\n                + Add Sub Heading\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Resources Section'\">\n          <div class=\"row row mt-4 mb-4\">\n            <h4 class=\"mb-3\">Resources Section</h4>\n            <div class=\"col-12 col-sm-6\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceTagline' | transloco\" name=\"resources_tagline\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceTagline' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"resources_tagline\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_tagline'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.ResourceDescription' | transloco\" name=\"resources_description\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.ResourceDescription' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"resources_description\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['resources_description'].errors }\">\n                                          </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"resource_image\">{{ 'Admin.DomainConfig.ResourceImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.ResourceImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'resources_image'\" [previewData]=\"data['resources_image']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Unique Selling Proposition Section (USP) '\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"usps\">\n            <h4 class=\"mb-4\">Unique Selling Proposition Section (USP)</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"USPs Video Url\" name=\"video_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"USPs Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- USP Items -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(uspsItems, $event)\">\n              <div\n                *ngFor=\"let item of f['usps'].get('items')['controls']; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 align-items-center\"\n                cdkDrag\n              >\n                <div class=\"col-sm-10\">\n                  <pw-input-container label=\"Item Description\">\n                    <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeUspItem(i)\"\n                    (keydown.enter)=\"removeUspItem(i)\"\n                    (keydown.space)=\"removeUspItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addUspItem()\">\n                + Add USP Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Partners (Clients) Section'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"partners\">\n            <h4 class=\"mb-4\">Partners (Clients) Section</h4>\n\n            <!-- Title -->\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Partner Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <!-- Description -->\n            <div class=\"col-12\">\n              <pw-input-container label=\"Partners Description\" name=\"description\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n              </pw-input-container>\n            </div>\n\n            <!-- Partner Items with Drag Support -->\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(partnersItems, $event)\">\n              <div\n                *ngFor=\"let item of partnersItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <!-- Name -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\" class=\"col-12\" name=\"name\">\n                    <input class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Blog URL + Drag Handle -->\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog Url\" name=\"blog_url\">\n                      <input class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n\n                <!-- Video URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Video Url\" name=\"video_url\">\n                    <input class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Image URL -->\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Image Url\" name=\"image_url\">\n                    <input class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <!-- Delete Icon -->\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removePartnerItem(i)\"\n                    (keydown.enter)=\"removePartnerItem(i)\"\n                    (keydown.space)=\"removePartnerItem(i)\"\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <!-- Add New Partner -->\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addPartnerItem()\">+ Add Partner</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Testimonials Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"testimonials\">\n            <h4 class=\"mb-4\">Testimonials Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"testimonials_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"testimonials_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Items List -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(testimonialsItems, $event)\">\n              <div\n                *ngFor=\"let item of testimonialsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Name\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"name\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Testimonial\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"testimonial\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    ngbTooltip=\"Remove\"\n                    (click)=\"removeTestimonialItem(i)\"\n                    (keydown.enter)=\"removeTestimonialItem(i)\"\n                    (keydown.space)=\"removeTestimonialItem(i)\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addTestimonialItem()\">\n                  + Add Testimonial\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Video Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"videos\">\n            <h4 class=\"mb-3\">Video Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12 col-md-6\" name=\"videos_title\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"videos_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <!-- Video Items -->\n            <div\n              formArrayName=\"items\"\n              class=\"col-12 mt-3\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(videosItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of videosItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-md-6\">\n                  <pw-input-container label=\"Title\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Blog URL\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\" class=\"col-md-10\">\n                  <textarea class=\"form-control\" rows=\"3\" formControlName=\"description\"></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeVideoItem(i)\"\n                    (keydown.enter)=\"removeVideoItem(i)\"\n                    (keydown.space)=\"removeVideoItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addVideoItem()\">\n                  + Add Video\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Call to Actions Section (CTAs)'\">\n          <div class=\"row mt-4 mb-4\" formGroupName=\"ctas\">\n            <h4 class=\"mb-4\">CTAs Section</h4>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Title\" name=\"title\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12 col-md-6\">\n              <pw-input-container label=\"Description\" name=\"description\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n              </pw-input-container>\n            </div>\n\n            <div class=\"col-12\">\n              <pw-input-container label=\"Image URL\" name=\"image_url\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n              </pw-input-container>\n            </div>\n\n            <!-- CTA Items -->\n            <div formArrayName=\"items\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(ctasItems, $event)\">\n              <div\n                *ngFor=\"let item of ctasItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 align-items-start\"\n                cdkDrag\n              >\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Image URL\" name=\"image_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Cta URL\" name=\"cta_url\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"cta_url\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"Video URL\" name=\"video_url\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Title\">\n                    <input class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-6\">\n                  <pw-input-container label=\"CTA Description\">\n                    <input class=\"form-control\" formControlName=\"description\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-12 col-md-5\">\n                  <pw-input-container label=\"Button Text\">\n                    <input class=\"form-control\" formControlName=\"button_text\" />\n                  </pw-input-container>\n                </div>\n\n                <div class=\"col-md-1 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeCtasItem(i)\"\n                    (keydown.enter)=\"removeCtasItem(i)\"\n                    (keydown.space)=\"removeCtasItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addCtasItem()\">+ Add CTA Item</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n        <p-accordionTab [header]=\"'Integrations Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"integrations\">\n            <h4 class=\"mb-3\">Integrations Section</h4>\n\n            <pw-input-container label=\"Title\" class=\"col-12\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n            </pw-input-container>\n\n            <pw-input-container label=\"Description\" class=\"col-12\">\n              <textarea class=\"form-control\" formControlName=\"description\" rows=\"3\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(integrationsItems, $event)\">\n              <div\n                *ngFor=\"let item of integrationsItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3 rounded bg-light\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Title\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                </pw-input-container>\n\n                <div class=\"col-md-5\">\n                    <pw-input-container label=\"Description\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                    </pw-input-container>\n                </div>\n\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"Blog URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"blog_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Video URL\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"video_url\" />\n                </pw-input-container>\n\n                <div class=\"col-md-6 d-flex align-items-end justify-content-end\">\n                  <i\n                    class=\"fa fa-trash delete-icon align-self-center\"\n                    (click)=\"removeIntegrationItem(i)\"\n                    (keydown.enter)=\"removeIntegrationItem(i)\"\n                    (keydown.space)=\"removeIntegrationItem(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addIntegrationItem()\">+ Add Integration</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Contact Us Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"contact_us\">\n            <h4 class=\"mb-3\">Contact Us Section</h4>\n\n            <pw-input-container label=\"Url\" class=\"col-md-6\">\n              <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n            </pw-input-container>\n            <pw-input-container label=\"Description\" class=\"col-12\" name=\"contact_us_description\">\n              <textarea rows=\"3\" class=\"form-control\" formControlName=\"description\"></textarea>\n            </pw-input-container>\n\n            <div formArrayName=\"questions\" class=\"col-12 mt-3\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsQuestions, $event)\">\n              <div\n                *ngFor=\"let questionGroup of contactUsQuestions.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Question\" class=\"col-md-10\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"question\" />\n                </pw-input-container>\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeContactUsQuestion(i)\"\n                    (keydown.enter)=\"removeContactUsQuestion(i)\"\n                    (keydown.space)=\"removeContactUsQuestion(i)\"\n                    ngbTooltip=\"Remove\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-3\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder question\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <div class=\"col-12 mt-3\" formArrayName=\"options\" cdkDropList [cdkDropListData]=\"getQuestionOptions(i).controls\" (cdkDropListDropped)=\"dropContactUsOptions(i, $event)\">\n                  <div\n                    class=\"row align-items-center mb-2 border p-3\"\n                    *ngFor=\"let option of getQuestionOptions(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    cdkDrag\n                  >\n                    <pw-input-container label=\"Option\" class=\"col-md-10\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"option\" />\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeContactUsOption(i, j)\"\n                        (keydown.enter)=\"removeContactUsOption(i, j)\"\n                        (keydown.space)=\"removeContactUsOption(i, j)\"\n                        ngbTooltip=\"Remove Option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder option\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"text-start\">\n                    <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addContactUsOption(i)\">\n                      + Add Option\n                    </button>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-3\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addContactUsQuestion()\">\n                  + Add Question\n                </button>\n              </div>\n            </div>\n\n            <div formArrayName=\"hubspot\" class=\"col-12 mt-4\" cdkDropList (cdkDropListDropped)=\"dropItems(contactUsHubspotItems, $event)\">\n              <h5 class=\"mb-4\">Hubspot Embeds</h5>\n\n              <div\n                *ngFor=\"let hub of contactUsHubspotItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row border p-3 mb-2\"\n                cdkDrag\n              >\n              <pw-input-container label=\"ID\" class=\"col-md-5\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"id\" />\n              </pw-input-container>\n\n              <pw-input-container label=\"Position\" class=\"col-md-6\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"position\" />\n              </pw-input-container>\n              <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-3\">\n                <i\n                  class=\"fa fa-bars cursor-move\"\n                  cdkDragHandle\n                  ngbTooltip=\"Drag to reorder\"\n                  aria-hidden=\"true\"\n                ></i>\n              </div>\n\n                <pw-input-container label=\"Div\" class=\"col-10\">\n                  <textarea\n                    class=\"form-control\"\n                    rows=\"5\"\n                    formControlName=\"div\"\n                    [ngClass]=\"{ 'is-invalid': submitted && f['div']?.errors }\"\n                  ></textarea>\n                </pw-input-container>\n\n                <div class=\"col-md-2 d-flex align-items-center mt-3\">\n                  <i\n                    class=\"fa fa-trash delete-icon\"\n                    (click)=\"removeHubspotItem(i)\"\n                    (keydown.enter)=\"removeHubspotItem(i)\"\n                    (keydown.space)=\"removeHubspotItem(i)\"\n                    ngbTooltip=\"Remove Hubspot Embed\"\n                    aria-hidden=\"true\">\n</i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary btn-sm\" (click)=\"addHubspotItem()\">\n                  + Add Hubspot Embed\n                </button>\n              </div>\n            </div>\n\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Book a Demo Section'\">\n          <div class=\"row mt-4\">\n            <div class=\"col-12\">\n              <h4 class=\"mb-3\">{{ 'Admin.DomainConfig.BookDemoLinks' | transloco }}</h4>\n              <div formGroupName=\"book_demo\">\n                <pw-input-container label=\"Title\">\n                  <input type=\"text\" formControlName=\"title\" class=\"form-control\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Description\">\n                  <input type=\"text\" formControlName=\"description\" class=\"form-control\" />\n                </pw-input-container>\n\n                <div formArrayName=\"items\" cdkDropList (cdkDropListDropped)=\"dropBookDemoLinks($event)\">\n                  <div\n                    *ngFor=\"let link of f['book_demo'].get('items')['controls']; let i = index\"\n                    [formGroupName]=\"i\"\n                    class=\"row mb-3 border p-3 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-5\">\n                      <pw-input-container label=\"Link URL\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"url\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        ngbTooltip=\"Remove\"\n                        (click)=\"removeBookDemoLink(i)\"\n                        (keydown.enter)=\"removeBookDemoLink(i)\"\n                        (keydown.space)=\"removeBookDemoLink(i)\"\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-sm-1 d-flex justify-content-end mt-3\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addBookDemoLink()\">\n                    + Add Book Demo Link\n                  </button>\n                </div>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Navbar Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"navbar\">\n            <h4 class=\"mb-3\">Navbar Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(navbarItems, $event)\">\n              <div\n                *ngFor=\"let item of navbarItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeNavbarItem(i)\"\n                      (keydown.enter)=\"removeNavbarItem(i)\"\n                      (keydown.space)=\"removeNavbarItem(i)\"\n                      ngbTooltip=\"Remove Navbar Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getNavbarSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropNavbarSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getNavbarSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeSubtitle(i, j)\"\n                        (keydown.enter)=\"removeSubtitle(i, j)\"\n                        (keydown.space)=\"removeSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button type=\"button\" class=\"btn btn-sm btn-primary mt-2\" (click)=\"addSubtitle(i)\">\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button type=\"button\" class=\"btn btn-primary mt-2 mb-2\" (click)=\"addNavbarItem()\">\n                + Add Navbar Item\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n        <p-accordionTab [header]=\"'Footer Links Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"footer_links\">\n            <h4 class=\"mb-3\">Footer Links Section</h4>\n\n            <div\n              formArrayName=\"items\"\n              class=\"col-12\"\n              cdkDropList\n              (cdkDropListDropped)=\"dropItems(footerLinksItems, $event)\"\n            >\n              <div\n                *ngFor=\"let item of footerLinksItems.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3\"\n                cdkDrag\n              >\n                <div class=\"row align-items-center\">\n\n                  <pw-input-container label=\"Title\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                  </pw-input-container>\n\n                  <pw-input-container label=\"Path\" class=\"col-md-5\">\n                    <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                  </pw-input-container>\n                  <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-1\">\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger\"\n                      (click)=\"removeFooterLinkItem(i)\"\n                      (keydown.enter)=\"removeFooterLinkItem(i)\"\n                      (keydown.space)=\"removeFooterLinkItem(i)\"\n                      ngbTooltip=\"Remove Footer Item\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n                  <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                    <i\n                      class=\"fa fa-bars cursor-move\"\n                      cdkDragHandle\n                      ngbTooltip=\"Drag to reorder\"\n                      aria-hidden=\"true\"\n                    ></i>\n                  </div>\n\n                </div>\n\n                <div\n                  class=\"col-12 mt-3\"\n                  formArrayName=\"subtitles\"\n                  cdkDropList\n                  [cdkDropListData]=\"getFooterSubtitles(i).controls\"\n                  (cdkDropListDropped)=\"dropFooterSubtitles(i, $event)\"\n                >\n                  <div\n                    *ngFor=\"let sub of getFooterSubtitles(i).controls; let j = index\"\n                    [formGroupName]=\"j\"\n                    class=\"row border p-3 mb-2 align-items-center\"\n                    cdkDrag\n                  >\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Title\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                      </pw-input-container>\n                    </div>\n\n                    <div class=\"col-md-5\">\n                      <pw-input-container label=\"Subtitle Path\">\n                        <input type=\"text\" class=\"form-control\" formControlName=\"path\" />\n                      </pw-input-container>\n                    </div>\n\n\n\n\n                    <div class=\"col-md-1 d-flex justify-content-end align-items-start mt-2\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.enter)=\"removeFooterSubtitle(i, j)\"\n                        (keydown.space)=\"removeFooterSubtitle(i, j)\"\n                        ngbTooltip=\"Remove Subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                    <div class=\"col-md-1 d-flex justify-content-end\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder subtitle\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    class=\"btn btn-sm btn-primary mt-2\"\n                    (click)=\"addFooterSubtitle(i)\"\n                  >\n                    + Add Subtitle\n                  </button>\n                </div>\n              </div>\n\n              <button\n                type=\"button\"\n                class=\"btn btn-primary mt-2 mb-2\"\n                (click)=\"addFooterLinkItem()\"\n              >\n                + Add Footer Link\n              </button>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Guides Section'\">\n          <div class=\"row mt-3 mb-4\" formGroupName=\"guides\">\n            <h4 class=\"mb-3\">Guides Section</h4>\n\n            <div formArrayName=\"items\" class=\"col-12\">\n              <div cdkDropList (cdkDropListDropped)=\"dropItems(guidesItems, $event)\">\n                <div\n                  *ngFor=\"let item of guidesItems.controls; let i = index\"\n                  [formGroupName]=\"i\"\n                  class=\"border p-3 mb-3\"\n                  cdkDrag\n                >\n                  <div class=\"row align-items-start\">\n\n                    <pw-input-container label=\"Title\" class=\"col-md-5\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"title\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Button Text\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"button_text\" />\n                    </pw-input-container>\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                      <i\n                        class=\"fa fa-bars cursor-move\"\n                        cdkDragHandle\n                        ngbTooltip=\"Drag to reorder\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Image URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"image_url\" />\n                    </pw-input-container>\n\n                    <pw-input-container label=\"Guide URL\" class=\"col-md-6\">\n                      <input type=\"text\" class=\"form-control\" formControlName=\"guide_url\" />\n                    </pw-input-container>\n                  </div>\n\n                  <div class=\"row mt-2\">\n                    <pw-input-container label=\"Description\" class=\"col-md-11\">\n                      <textarea\n                        class=\"form-control\"\n                        rows=\"5\"\n                        formControlName=\"description\"\n                        [ngClass]=\"{ 'is-invalid': submitted && f['description']?.errors }\"\n                      ></textarea>\n                    </pw-input-container>\n\n                    <div class=\"col-md-1 d-flex align-items-start justify-content-center mt-3\">\n                      <i\n                        class=\"fa fa-trash delete-icon text-danger\"\n                        (click)=\"removeGuideItem(i)\"\n                        (keydown.enter)=\"removeGuideItem(i)\"\n                        (keydown.space)=\"removeGuideItem(i)\"\n                        ngbTooltip=\"Remove Guide\"\n                        aria-hidden=\"true\"\n                      ></i>\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addGuideItem()\">\n                  + Add Guide\n                </button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n        <p-accordionTab [header]=\"'AB Tests Section'\">\n          <div class=\"row mt-3 mb-4\">\n            <h4 class=\"mb-3\">AB Tests</h4>\n            <div formArrayName=\"ab_tests\" class=\"col-12\" cdkDropList (cdkDropListDropped)=\"dropItems(abTests, $event)\">\n              <div\n                *ngFor=\"let abTest of abTests.controls; let i = index\"\n                [formGroupName]=\"i\"\n                class=\"row mb-3 border p-3\"\n                cdkDrag\n              >\n                <pw-input-container label=\"Description\" class=\"col-md-5\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"description\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Experiment Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"experiment_name\" />\n                </pw-input-container>\n\n\n                <div class=\"col-md-1 d-flex align-items-start justify-content-end mt-1\">\n                  <i\n                    class=\"fa fa-bars cursor-move\"\n                    cdkDragHandle\n                    ngbTooltip=\"Drag to reorder\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n\n                <pw-input-container label=\"DB Shard\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"db_shard\" />\n                </pw-input-container>\n\n                <pw-input-container label=\"Microservice Name\" class=\"col-md-6\">\n                  <input type=\"text\" class=\"form-control\" formControlName=\"microservice_name\" />\n                </pw-input-container>\n\n                <div class=\"col-md-12 text-end mt-2\">\n                  <i\n                    class=\"fa fa-trash delete-icon text-danger\"\n                    (click)=\"removeAbTest(i)\"\n                    (keydown.enter)=\"removeAbTest(i)\"\n                    (keydown.space)=\"removeAbTest(i)\"\n                    ngbTooltip=\"Remove AB Test\"\n                    aria-hidden=\"true\"\n                  ></i>\n                </div>\n              </div>\n\n              <div class=\"text-start mt-2\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addAbTest()\">+ Add AB Test</button>\n              </div>\n            </div>\n          </div>\n        </p-accordionTab>\n\n\n\n\n\n        <p-accordionTab [header]=\"'Coming soon pages - Subscribe to newsletter (TO DISCONTINUE)'\">\n          <div class=\"mb-3\">\n            <p>ComingSoon Pages will enable users to subscribe to Newsletters and are accessible at the internal paths\n              /join/cs1, /join/cs2, etc.</p>\n          </div>\n          <div class=\"text-end\" *ngIf=\"shardUrl\">\n            <span>See the live page <span class=\"tooltip-wrap ms-1\" [appendTo]=\"'body'\"\n                [pTooltip]=\"'Admin.DomainConfig.Tooltip.SeeLiveCs' | transloco\" tooltipPosition=\"top\">\n                <i class=\"fas fa-info-circle\"></i>\n              </span> : <a [href]=\"shardUrl + '/join/cs1'\" target=\"_blank\">{{ shardUrl }}/join/cs1</a></span>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsProduct' | transloco\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsProduct' | transloco\" name=\"cs_product_id\">\n                <p-autoComplete [suggestions]=\"productsList\" formControlName=\"cs_product_id\" dataKey=\"id\" field=\"name\"\n                  [dropdown]=\"true\" [delay]=\"1000\" (completeMethod)=\"searchProduct($event)\" styleClass=\"w-100\"\n                  placeholder=\"Search Product\" [inputStyle]=\"\n                                                form.get('cs_product_id').touched &&\n                                                form.get('cs_product_id').invalid\n                                                    ? { border: '1px solid #ff586b' }\n                                                    : { border: '1px solid gray' }\n                                            \" [multiple]=\"false\">\n                </p-autoComplete>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCrmSourceId' | transloco\" name=\"cs_crm_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCrmSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_crm_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_crm_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfSourceId' | transloco\" name=\"cs_pdf_source_id\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsPdfSourceId' | transloco\">\n                <p-dropdown [options]=\"crmSourcesList\" formControlName=\"cs_pdf_source_id\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_pdf_source_id']?.errors }\" [placeholder]=\"'Select CRM Source'\"\n                  optionValue=\"id\" optionLabel=\"name\">\n                </p-dropdown>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\"></div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsVideoUrl' | transloco\" name=\"cs_video_url\" [showTooltip]=\"true\"\n                [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsVideoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_video_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_video_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12 col-sm-3\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsBookDemoUrl' | transloco\" name=\"cs_book_demo_url\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsBookDemoUrl' | transloco\">\n                <input type=\"text\" class=\"form-control\" formControlName=\"cs_book_demo_url\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_book_demo_url'].errors }\" />\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsCtaIframe' | transloco\" name=\"cs_cta_iframe\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsCtaIframe' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_cta_iframe\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_cta_iframe'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsJoinMessage' | transloco\" name=\"cs_join_message\"\n                [showTooltip]=\"true\" [tooltipText]=\"'Admin.DomainConfig.Tooltip.CsJoinMessage' | transloco\">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_join_message\"\n                  [ngClass]=\"{ 'is-invalid': submitted && f['cs_join_message'].errors }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n            <div class=\"col-12\">\n              <pw-input-container [label]=\"'Admin.DomainConfig.CsPdfDownloadText' | transloco\" name=\"cs_pdf_download_text\"\n                [showTooltip]=\"true\" [tooltipText]=\"\n                                            'Admin.DomainConfig.Tooltip.CsPdfDownloadText' | transloco\n                                        \">\n                <textarea class=\"form-control\" rows=\"3\" formControlName=\"cs_pdf_download_text\" [ngClass]=\"{\n                                                'is-invalid': submitted && f['cs_pdf_download_text'].errors\n                                            }\">\n                                        </textarea>\n              </pw-input-container>\n            </div>\n          </div>\n          <div class=\"row\" matchHeight=\"card\">\n            <div class=\"col-md-4\">\n              <label for=\"cs_image\">{{ 'Admin.DomainConfig.CsImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image'\"\n                [controlName]=\"'cs_image'\" [previewData]=\"data['cs_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image2\">{{ 'Admin.DomainConfig.CsImage2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImage2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Image2'\"\n                [controlName]=\"'cs_image2'\" [previewData]=\"data['cs_image2']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_pdf_image\">{{ 'Admin.DomainConfig.CsPdfImage' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsPdfImage' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image'\"\n                [controlName]=\"'cs_pdf_image'\" [previewData]=\"data['cs_pdf_image']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg\">{{ 'Admin.DomainConfig.CsImageBg' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg'\"\n                [controlName]=\"'cs_image_bg'\" [previewData]=\"data['cs_image_bg']\">\n              </pw-custom-uploader>\n            </div>\n            <div class=\"col-md-4\">\n              <label for=\"cs_image_bg2\">{{ 'Admin.DomainConfig.CsImageBg2' | transloco }} <span class=\"info-circle\">\n                  <span class=\"tooltiptext gradient-custom-branding\">{{ 'Admin.DomainConfig.Tooltip.CsImageBg2' | transloco\n                    }}</span>\n                </span>\n              </label>\n              <pw-custom-uploader (saveEvent)=\"onSaveFile($event)\" [aspectRatio]=\"'custom'\" [title]=\"'Cs Pdf Image Bg2'\"\n                [controlName]=\"'cs_image_bg2'\" [previewData]=\"data['cs_image_bg2']\">\n              </pw-custom-uploader>\n            </div>\n          </div>\n        </p-accordionTab>\n      </p-accordion>\n    </div>\n\n    <div class=\"col-12 text-end mt-3\">\n      <button type=\"button\"\n        class=\"btn btn-outline-default me-2\"\n        (click)=\"back()\">\n        {{ 'Button.Cancel' | transloco }}\n      </button>\n      <button type=\"submit\" [buttonBusy]=\"buttonBusy\"\n        class=\"btn btn-primary\">{{ 'Button.Submit' | transloco }}</button>\n    </div>\n  </form>\n</ng-container>\n<div *ngIf=\"!data?.host_name && !isLoading\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.DomainConfig.EnableConfigTab' | transloco\"> </pw-no-data>\n</div>\n\n\n<ng-template #partnerCropper let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Partner Image</h5>\n    <button type=\"button\" class=\"btn-close\" aria-label=\"Close\" (click)=\"modal.dismiss()\"></button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload JPG, PNG, or GIF files. Avoid images with celebrities, nudity, or artwork.</small>\n    <pw-image-cropper\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onPartnerImageSelected($event)\"\n      (closeEvent)=\"onClosePartnerModal()\"\n    ></pw-image-cropper>\n  </div>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i1.AdminService }, { type: i1$2.ProductService }, { type: i1$1.NgbModal }, { type: i3$2.FormBuilder }], propDecorators: { uploader: [{
                 type: ViewChildren,
                 args: [CustomUploaderComponent]
@@ -5321,7 +5370,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
         this.tagsSuggestion = [];
         this.selectedTags = [];
         this.isLoading = true;
-        this.routers = ROUTERS;
+        this.routers = ADMIN_ROUTERS;
         QuillHelper.init();
         this.editorConfig = QuillHelper.getEditorConfig();
         this.form = AppAdmin.getResourcesForm();
@@ -5462,6 +5511,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
     }
     onUpdate() {
         const data = { ...this.form.value };
+        console.log(this.file);
         if (this.rectangularFile) {
             data.rectangular_picture = this.rectangularFile;
         }
@@ -5502,21 +5552,38 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
         if (!this.form.get('showcase').value) {
             data.showcase = '';
         }
+        if (!this.file && !this.image) {
+            data.remove_picture = true;
+        }
+        if (!this.rectangularFile && !this.rectangularImage) {
+            data.remove_rectangular_picture = true;
+        }
         this.postTags(this.blog.id);
         this.adminService
             .updatePost(data, this.id)
             .subscribe(() => {
             this.toast.success(this.translation.translate('Resource.UpdatedMessage'));
-            this.router.navigate(['/' + this.routers.resourcesList], {
-                state: {
-                    ...this.filterData
-                }
-            });
+            this.navigateToResourceList();
         })
             .add(() => {
             this.submitted = false;
         });
     }
+    navigateToResourceList() {
+        this.router.navigate(['/' + this.routers.resourcesList], {
+            state: {
+                ...this.filterData
+            }
+        });
+    }
+    deleteCoverImage() {
+        this.image = null;
+        this.file = null;
+    }
+    deleteRectangularImage() {
+        this.rectangularImage = null;
+        this.rectangularFile = null;
+    }
     getPostTags() {
         this.tagService
             .getTagsByType('post_categories', {}, this.subscriptionId)
@@ -5554,7 +5621,7 @@ class ResourceAdminDetailsComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceAdminDetailsComponent, deps: [{ token: i1$1.NgbModal }, { token: i1.AdminService }, { token: i0.Injector }, { token: i1$2.TagService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceAdminDetailsComponent, selector: "pw-resources-details-index", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <a aria-label=\"Edit Picture\" class=\"d-inline-block mb-2\" (click)=\"openModal(content)\">\n                    {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                  </a>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Rectangular Picture\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n                <a class=\"d-inline-block mt-2\" (click)=\"openRectModal(rectContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </a>\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"], dependencies: [{ kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i8.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourceAdminDetailsComponent, selector: "pw-resources-details-index", usesInheritance: true, ngImport: i0, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"navigateToResourceList()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center text-center d-flex flex-column align-items-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                      <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                        <a class=\"d-inline-block\" (click)=\"openModal(content)\">\n                          {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                        </a>\n                        <i\n                        class=\"fa fa-trash delete-icon text-danger ms-2\"\n                        title=\"Remove Image\"\n                        (click)=\"deleteCoverImage()\"\n                        style=\"cursor: pointer;\"\n                        *ngIf=\"image && !image.includes('default-photo.jpg')\">\n                        </i>\n                      </div>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Rectangular Picture\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                    <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n                      {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                    </a>\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger ms-2\"\n                      title=\"Remove Image\"\n                      (click)=\"deleteRectangularImage()\"\n                      style=\"cursor: pointer;\"\n                      *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\">\n                    </i>\n                  </div>\n\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"navigateToResourceList()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"], dependencies: [{ kind: "component", type: i4$3.AutoComplete, selector: "p-autoComplete", inputs: ["minLength", "delay", "style", "panelStyle", "styleClass", "panelStyleClass", "inputStyle", "inputId", "inputStyleClass", "placeholder", "readonly", "disabled", "scrollHeight", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "maxlength", "name", "required", "size", "appendTo", "autoHighlight", "forceSelection", "type", "autoZIndex", "baseZIndex", "ariaLabel", "dropdownAriaLabel", "ariaLabelledBy", "dropdownIcon", "unique", "group", "completeOnFocus", "showClear", "field", "dropdown", "showEmptyMessage", "dropdownMode", "multiple", "tabindex", "dataKey", "emptyMessage", "showTransitionOptions", "hideTransitionOptions", "autofocus", "autocomplete", "optionGroupChildren", "optionGroupLabel", "overlayOptions", "suggestions", "itemSize", "optionLabel", "optionValue", "id", "searchMessage", "emptySelectionMessage", "selectionMessage", "autoOptionFocus", "selectOnFocus", "searchLocale", "optionDisabled", "focusOnHover", "variant"], outputs: ["completeMethod", "onSelect", "onUnselect", "onFocus", "onBlur", "onDropdownClick", "onClear", "onKeyUp", "onShow", "onHide", "onLazyLoad"] }, { kind: "component", type: i8.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.UiSwitchComponent, selector: "ui-switch", inputs: ["size", "color", "switchOffColor", "switchColor", "defaultBgColor", "defaultBoColor", "checkedLabel", "uncheckedLabel", "checkedTextColor", "uncheckedTextColor", "beforeChange", "ariaLabel", "checked", "disabled", "reverse", "loading"], outputs: ["change", "changeEvent", "valueChange"] }, { kind: "component", type: i9.ProfileImageCropperComponent, selector: "pw-image-cropper", inputs: ["aspectRatio", "dynamicData"], outputs: ["imageSelectionEvent", "closeEvent", "fileChangeEvent"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.InputContainerComponent, selector: "pw-input-container", inputs: ["name", "label", "labelClass", "tooltipPosition", "required", "errorMsg", "isReadOnly", "showTooltip", "tooltipText", "showTriangle", "afterLabel", "showAfterLabel", "showTriangleText", "isLeftTooltip"] }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i9$1.QuillEditorComponent, selector: "quill-editor" }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     ValidateForm('form'),
@@ -5564,7 +5631,7 @@ __decorate([
 ], ResourceAdminDetailsComponent.prototype, "onSave", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourceAdminDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-resources-details-index', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"back()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <a aria-label=\"Edit Picture\" class=\"d-inline-block mb-2\" (click)=\"openModal(content)\">\n                    {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                  </a>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Rectangular Picture\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n\n                <a class=\"d-inline-block mt-2\" (click)=\"openRectModal(rectContent)\">\n                  {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                </a>\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"back()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"] }]
+            args: [{ selector: 'pw-resources-details-index', encapsulation: ViewEncapsulation.None, template: "<div class=\"container-fluid pw-tab overflow-hidden\">\n  <div class=\"dashboard\">\n    <div class=\"dashboard-body\">\n\n      <div class=\"me-auto col-xs-6 mt-4\">\n        <a aria-label=\"Navigate to Target\"\n          (click)=\"navigateToResourceList()\"\n          class=\"previous\">\n          <i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h3 class=\"m-subheader__title m-subheader__title--separator\">\n         Add or edit resource\n        </h3>\n      </div>\n      <div class=\"w-100 text-center mt-3\"\n      *ngIf=\"isLoading\">\n        <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n      </div>\n\n      <div class=\"p-2 mt-3\">\n        <form [formGroup]=\"form\"\n        *ngIf=\"!isLoading\"\n          (ngSubmit)=\"onSave()\">\n          <div class=\"row\">\n            <!-- Title -->\n            <pw-input-container [label]=\"'Label.Title' | transloco\"\n              class=\"col-12\"\n              name=\"title\"\n              [errorMsg]=\"'Resource.Posts.Validation.Title' | transloco\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"title\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <!-- Rich Text Editor -->\n            <pw-input-container [label]=\"'Resource.Posts.Body' | transloco\"\n              class=\"col-9 col-md-9 col-sm-12\"\n              name=\"body\"\n              [errorMsg]=\"'Resource.Posts.Validation.Body' | transloco\">\n              <quill-editor [styles]=\"{ height: '500px' }\"\n              class=\"quillEditor\" [modules]=\"editorConfig\"\n                formControlName=\"body\"\n                [ngClass]=\"{\n                  'w-100': true,\n                  'quill-container': true,\n                  'is-invalid': submitted && f['body'].errors\n                }\">\n              </quill-editor>\n            </pw-input-container>\n            <div class=\"col-12 col-md-3 col-sm-4 my-4\">\n              <div class=\"text-center mb-4\">\n                <label for=\"coverPicture\">{{ 'Resource.Posts.CoverPicture' | transloco }}</label>\n                <div class=\"text-center text-center d-flex flex-column align-items-center\">\n                  <img [src]=\"(image !== null && !image?.includes('default-photo.jpg') )? image : 'assets/img/resource/blog.png'\"\n                      (keydown.enter)=\"openModal(content)\"\n                      (click)=\"openModal(content)\"\n                      class=\"image w-100\" alt=\"Modal\"\n                      (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                      <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                        <a class=\"d-inline-block\" (click)=\"openModal(content)\">\n                          {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                        </a>\n                        <i\n                        class=\"fa fa-trash delete-icon text-danger ms-2\"\n                        title=\"Remove Image\"\n                        (click)=\"deleteCoverImage()\"\n                        style=\"cursor: pointer;\"\n                        *ngIf=\"image && !image.includes('default-photo.jpg')\">\n                        </i>\n                      </div>\n                </div>\n              </div>\n\n              <!-- Rectangular Picture -->\n              <div class=\"text-center d-flex flex-column align-items-center\">\n                <label for=\"rectangularPicture\">Rectangular Picture</label>\n                <img\n                  [src]=\"(rectangularImage !== null && !rectangularImage?.includes('default-photo.jpg')) ? rectangularImage : 'assets/img/resource/blog.png'\"\n                  (keydown.enter)=\"openRectModal(rectContent)\"\n                  (click)=\"openRectModal(rectContent)\"\n                  class=\"image rec-img\"\n                  [ngClass]=\"{ 'w-100': rectangularImage === null || rectangularImage?.includes('default-photo.jpg') }\"\n                  alt=\"Rectangular Picture\"\n                  (error)=\"handleImageError($event, 'assets/img/resource/blog.png')\" />\n                  <div class=\"d-flex justify-content-between align-items-center mt-2\">\n                    <a class=\"d-inline-block\" (click)=\"openRectModal(rectContent)\">\n                      {{ slug !== 'create' ? 'Edit' : 'Add' }} Picture\n                    </a>\n                    <i\n                      class=\"fa fa-trash delete-icon text-danger ms-2\"\n                      title=\"Remove Image\"\n                      (click)=\"deleteRectangularImage()\"\n                      style=\"cursor: pointer;\"\n                      *ngIf=\"rectangularImage && !rectangularImage.includes('default-photo.jpg')\">\n                    </i>\n                  </div>\n\n              </div>\n\n            </div>\n            <pw-input-container [label]=\"'Resource.Posts.CtaText' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\"\n              name=\"cta_text\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"cta_text\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['title'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.ExternalUrl' | transloco\"\n              class=\"col-12 col-md-6\"\n              [showTooltip]=\"true\"\n              [tooltipText]=\"'Resource.Posts.Tooltip.ExternalUrl' | transloco\"\n              name=\"external_url\">\n              <input type=\"text\"\n                class=\"form-control\"\n                formControlName=\"external_url\"\n                [ngClass]=\"{ 'is-invalid': submitted && f['external_url'].errors }\" />\n            </pw-input-container>\n\n            <pw-input-container [label]=\"'Resource.Posts.Tags' | transloco \" class=\"ui-fluid skills-modal col-12 col-md-4 col-sm-12 tags\"\n              [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.CtaText' | transloco\" name=\"cta_text\">\n              <p-autoComplete [(ngModel)]=\"selectedTags\" class=\"body-bg\" [suggestions]=\"tagsSuggestion\" dataKey=\"id\" field=\"name\"\n                (completeMethod)=\"search($event)\" styleClass=\"w-100\" [minLength]=\"1\" [maxlength]=\"10\" [dropdown]=\"true\"\n                [ngModelOptions]=\"{ standalone: true }\" placeholder=\"Tags\" [multiple]=\"true\">\n              </p-autoComplete>\n            </pw-input-container>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [label]=\"'Resource.Posts.When' | transloco\"\n                  [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.When' | transloco\"\n                  name=\"when\">\n                  <div>\n                    <p-calendar formControlName=\"when\"\n                      [showIcon]=\"true\"\n                      dateFormat=\"dd-M-yy\"\n                      [placeholder]=\"'Select Date'\"\n                      [ngClass]=\"{'is-invalid': submitted && f['when'].errors}\">\n                    </p-calendar>\n                  </div>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <div class=\"col-12 col-md-2 col-sm-6\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\" [tooltipText]=\"'Resource.Posts.Tooltip.ShowCase' | transloco\"\n                  [label]=\"'Resource.Posts.ShowCase' | transloco\" name=\"showcase\">\n                  <ui-switch class=\"d-block\" formControlName=\"showcase\" name=\"showcase\">\n                  </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Published At -->\n            <div class=\"col-12 col-md-2 col-sm-6\">\n\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.Published' | transloco\"\n                  [label]=\"'Resource.Posts.Published' | transloco\"\n                  name=\"published_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"published_at\"\n                  name=\"published_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n            <!--Accepted At -->\n\n            <div class=\"col-12 col-md-2 col-sm-6 accept-icon\">\n              <div class=\"mb-3\">\n                <pw-input-container [showTooltip]=\"true\"\n                  [tooltipText]=\"'Resource.Posts.Tooltip.AcceptedByAdmin' | transloco\"\n                  [label]=\"'Resource.Posts.AcceptedByAdmin' | transloco\"\n                  name=\"accepted_at\">\n                  <ui-switch class=\"d-block\"\n                  formControlName=\"accepted_at\"\n                  name=\"accepted_at\">\n                </ui-switch>\n                </pw-input-container>\n              </div>\n            </div>\n\n          </div>\n          <div class=\"row text-end mt-4\">\n            <div class=\"col-12\">\n              <button type=\"button\"\n                class=\"btn btn-outline-default me-2\"\n                (click)=\"navigateToResourceList()\">\n                {{ 'Button.Cancel' | transloco }}\n              </button>\n              <button type=\"submit\"\n                [buttonBusy]=\"submitted\"\n                class=\"btn btn-primary\">\n                {{ 'Button.Submit' | transloco }}\n              </button>\n            </div>\n          </div>\n        </form>\n      </div>\n    </div>\n  </div>\n</div>\n\n\n<ng-template #content\n  let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <small>You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)</small>\n    <pw-image-cropper #profile\n      aspectRatio=\"auto\"\n      (imageSelectionEvent)=\"onImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n\n<ng-template #rectContent let-modal>\n  <div class=\"modal-header\">\n    <h5 class=\"modal-title\">Upload Picture</h5>\n    <button type=\"button\"\n      class=\"btn-close float-end\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\">\n    </button>\n  </div>\n\n  <div class=\"modal-body\">\n    <small>\n      You can upload a JPG, GIF, or PNG file. (Do not upload pictures containing celebrities,\n      nudity, artwork or copyrighted images.)\n    </small>\n\n\n    <pw-image-cropper\n      #profile\n      [aspectRatio]=\"'dynamic'\"\n      [dynamicData]=\"getAspectRatio()\"\n      (imageSelectionEvent)=\"onRectangularImageSelection($event)\"\n      (closeEvent)=\"onClose()\">\n    </pw-image-cropper>\n  </div>\n</ng-template>\n", styles: [".col-md-6.display-grid{display:grid}body .ui-autocomplete.ui-autocomplete-multiple .ui-autocomplete-multiple-container{width:100%}body .ui-inputtext{padding:0}.comment{border:1px solid rgb(238,238,238)}.is-invalid .ql-container.ql-snow,.is-invalid .ql-toolbar.ql-snow{border-color:#dc3545}.rec-img{max-width:100%;max-height:400px!important}.body-bg span .ui-autocomplete-multiple-container{background-color:#f5f7fa}.p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token{color:var(--tabs_text)}.tags .info-circle .tooltiptext:after{left:25px!important}.tags .info-circle .tooltiptext{left:-30px!important}.accept-icon .info-circle .tooltiptext:after{left:110px!important}.accept-icon .info-circle .tooltiptext{right:-85px!important}\n"] }]
         }], ctorParameters: () => [{ type: i1$1.NgbModal }, { type: i1.AdminService }, { type: i0.Injector }, { type: i1$2.TagService }], propDecorators: { onSave: [] } });
 
 class ResourcesAdminIndexComponent extends AppBaseComponent {
@@ -5618,6 +5685,7 @@ class ResourcesIndexComponent extends AppBaseComponent {
     }
     ngOnInit() {
         const state = history.state;
+        console.log('Bang Ner', state);
         if (state) {
             this.selectedTags = Array.isArray(state.selectedTags) ? state.selectedTags : [];
             this.searchTextItems =
@@ -5668,7 +5736,6 @@ class ResourcesIndexComponent extends AppBaseComponent {
         });
     }
     getPosts(paging) {
-        console.log(paging);
         this.isLoaded = false;
         if (this.subscriptionId) {
             this.adminService
@@ -5687,7 +5754,7 @@ class ResourcesIndexComponent extends AppBaseComponent {
             });
         }
     }
-    navigateToEdit(item) {
+    navigateToResourceDetails(item) {
         this.router.navigate(['/' + this.routers.posts + item.slug], {
             state: {
                 selectedTags: this.selectedTags,
@@ -5720,11 +5787,11 @@ class ResourcesIndexComponent extends AppBaseComponent {
         super.ngOnDestroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcesIndexComponent, deps: [{ token: i1.AdminService }, { token: i1$2.TagService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourcesIndexComponent, selector: "pw-resources-index", usesInheritance: true, ngImport: i0, template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n  </div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n            target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\">\n          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\n                class=\"badge m-1\"\n                [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                [colorByName]=\"true\"\n                [dataName]=\"tag.name\"\n                color=\"cyan\">{{ tag.name }}</span>\n\n          <span *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                  color=\"cyan\" >{{ tag.name }}</span>\n          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\n        </td>\n\n        <td data-head=\"showcase\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n          [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n            class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Insight\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: ResourcesIndexComponent, selector: "pw-resources-index", usesInheritance: true, ngImport: i0, template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n  </div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n            target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\">\n          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\n                class=\"badge m-1\"\n                [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                [colorByName]=\"true\"\n                [dataName]=\"tag.name\"\n                color=\"cyan\">{{ tag.name }}</span>\n\n          <span *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                  color=\"cyan\" >{{ tag.name }}</span>\n          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\n        </td>\n\n        <td data-head=\"showcase\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n          [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n            class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (click)=\"navigateToResourceDetails(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Insight\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n", dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "component", type: i4$4.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.LazyImgDirective, selector: "img" }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.IfNameNullShowEmailPipe, name: "ifNameNullShowEmail" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: ResourcesIndexComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-resources-index', template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n  </div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n            target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\">\n          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\n                class=\"badge m-1\"\n                [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                [colorByName]=\"true\"\n                [dataName]=\"tag.name\"\n                color=\"cyan\">{{ tag.name }}</span>\n\n          <span *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                  color=\"cyan\" >{{ tag.name }}</span>\n          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\n        </td>\n\n        <td data-head=\"showcase\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n          [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n            class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (click)=\"navigateToEdit(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Insight\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n" }]
+            args: [{ selector: 'pw-resources-index', template: "\n<div class=\"row\">\n  <div class=\"col-12 d-flex flex-wrap justify-content-between align-items-center\">\n    <h2 class=\"card-title p-0 float-start\">{{'Resource.Posts.Title' | transloco}}</h2>\n    <button *rbacAllow=\"blogPermission\"\n      class=\"btn btn-sm btn-outline-primary float-end\"\n      [routerLink]=\"['/' + routers.createResource]\">\n      <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> {{'Resource.Add' | transloco}}\n    </button>\n  </div>\n  </div>\n  <div class=\"col-12 mb-3\">\n    <p [innerHTML]=\"'Resource.Description' | transloco\"></p>\n  </div>\n\n<div class=\"w-100 text-center mt-3\"\n  *ngIf=\"!isLoaded\">\n  <p-progressSpinner strokeWidth=\"2\"> </p-progressSpinner>\n</div>\n<div class=\"primeng-datatable-container table-responsive\"\n  [class.hideTable]=\"data.unfiltered_count === 0\">\n  <p-table #dt\n    [value]=\"data.posts\"\n    [paginator]=\"data.object_count !== 0\"\n    [lazy]=\"true\"\n    [rows]=\"PAGE_SIZE\"\n    [totalRecords]=\"data.object_count\"\n    [loading]=\"loading\"\n    [filterDelay]=\"1000\"\n    (onLazyLoad)=\"onLazyLoad($event)\">\n    <ng-template pTemplate=\"caption\">\n      <div class=\"search-filter\">\n        <div class=\"col-sm-4\">\n          <p-multiSelect\n            [showToggleAll]=\"true\"\n            [options]=\"tagOptions\"\n            [(ngModel)]=\"selectedTags\"\n            (onChange)=\"onTagChange($event)\"\n            placeholder=\"Search by Tags\"\n            [showHeader]=\"true\"\n            maxSelectedLabels=\"2\"\n            appendTo=\"body\">\n          </p-multiSelect>\n        </div>\n        <div class=\"text-end\">\n          <i class=\"fa fa-search mt-2 me-2\" aria-hidden=\"true\"></i>\n          <input type=\"text\"\n            [(ngModel)]=\"searchTextItems\"\n            pInputText\n            size=\"50\"\n            placeholder=\"Search Resources...\"\n            (input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n            style=\"max-width: 90%\" />\n        </div>\n      </div>\n    </ng-template>\n    <ng-template pTemplate=\"header\">\n      <tr>\n        <th scope=\"true\">{{ 'Resource.Posts.Author' | transloco }}</th>\n        <th scope=\"true\"\n          pSortableColumn=\"title\">\n          {{ 'Label.Title' | transloco }}\n          <p-sortIcon field=\"title\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">\n          {{ 'Resource.Posts.Tags' | transloco }}\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"showcase\">\n          {{ 'Resource.Posts.Showcase' | transloco }}\n          <p-sortIcon field=\"showcase\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"when\">\n          {{ 'Resource.Posts.When' | transloco }}\n          <p-sortIcon field=\"when\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"published_at\">\n          {{ 'Resource.Posts.PublishedAt' | transloco }}\n          <p-sortIcon field=\"published_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"accepted_at\">\n          {{ 'Resource.Posts.AcceptedAt' | transloco }}\n          <p-sortIcon field=\"accepted_at\"></p-sortIcon>\n        </th>\n        <th scope=\"true\"\n          pSortableColumn=\"view\">\n          {{ 'Resource.Posts.View' | transloco }}\n          <p-sortIcon field=\"view\"></p-sortIcon>\n        </th>\n        <th scope=\"true\">{{ 'Label.Actions' | transloco }}</th>\n      </tr>\n    </ng-template>\n    <ng-template pTemplate=\"body\"\n      let-item>\n      <tr>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/members', item.author?.slug]\"\n            class=\"d-flex align-items-center\">\n            <img *ngIf=\"item.author?.avatar\"\n              [src]=\"item.author?.avatar[0].url\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <img *ngIf=\"!item.author?.avatar\"\n              src=\"assets/img/icons/male.png\"\n              alt=\"author\"\n              width=\"25\"\n              class=\"img-fluid\" />\n            <span class=\"ms-2\">{{ item.author | ifNameNullShowEmail }}</span>\n          </a>\n        </td>\n        <td data-head=\"Title\">\n          <a [routerLink]=\"['/resources/view', item?.slug]\"\n            target=\"_blank\">{{ item.title }}</a>\n        </td>\n        <td data-head=\"tags\">\n          <span *ngFor=\"let tag of item?.tags?.slice(0, 3)\"\n                class=\"badge m-1\"\n                [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                [colorByName]=\"true\"\n                [dataName]=\"tag.name\"\n                color=\"cyan\">{{ tag.name }}</span>\n\n          <span *ngIf=\"item.expandedTags\">\n            <span *ngFor=\"let tag of item?.tags?.slice(3)\"\n                  class=\"badge m-1\"\n                  [appDynamicBadge]=\"{ itemsArray: item?.tags, item: tag }\"\n                  [colorByName]=\"true\"\n                  [dataName]=\"tag.name\"\n                  color=\"cyan\" >{{ tag.name }}</span>\n          </span>\n\n          <span *ngIf=\"item?.tags?.length > 3\" class=\"fw-bold\">\n            <a (click)=\"item.expandedTags = !item.expandedTags\">\n              <span>...</span>\n            </a>\n          </span>\n        </td>\n\n        <td data-head=\"showcase\">\n          <span [appDynamicBadge]=\"{ itemsArray: [true, false], item: item?.showcase }\"\n          [ngClass]=\"item?.showcase ? 'bg-success' : 'bg-secondary'\"\n            class=\"badge\">{{ !!item?.showcase }}</span>\n        </td>\n        <td data-head=\"when\">{{ item.when | dateFormat }}</td>\n        <td data-head=\"Published At\">{{ item.published_at | dateFormat }}</td>\n        <td data-head=\"Accepted At\">{{ item.accepted_at | dateFormat }}</td>\n        <td data-head=\"View\">{{ item.view }}</td>\n        <td data-head=\"Action\">\n          <ul class=\"list-unstyled list-inline list-action\">\n            <li ngbTooltip=\"Edit\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (click)=\"navigateToResourceDetails(item)\">\n              <i class=\"fa fa-edit edit-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Delete\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"blogPermission\"\n              (keydown.enter)=\"onDeletePost(item)\"\n              (click)=\"onDeletePost(item)\">\n              <i class=\"fa fa-trash delete-icon\" aria-hidden=\"true\"></i>\n            </li>\n            <li ngbTooltip=\"Insight\"\n              class=\"me-2 me-sm-3\"\n              *rbacAllow=\"isBlogAdmin\"\n              [routerLink]=\"[\n                                '/' + routers.resourcesList + item.id + '/insight'\n                            ]\"\n              [queryParams]=\"{ insight_name: item?.title }\">\n              <i class=\"fa fa-fw fa-list fa-lg\" aria-hidden=\"true\"></i>\n            </li>\n          </ul>\n        </td>\n      </tr>\n    </ng-template>\n  </p-table>\n  <span *ngIf=\"data.object_count !== 0\" class=\"total-records-count\">{{ 'Label.Total' | transloco }}: {{  data.object_count }}</span>\n  <div *ngIf=\"data.object_count === 0 && isLoaded\">\n    <pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage'| transloco\" [description]=\"'Search.NoDataDescription' | transloco\"  >\n    </pw-no-data>\n  </div>\n</div>\n<div class=\"col-12 text-center\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Resource.Posts.NoDataMessage' | transloco\"\n    *ngIf=\"data.unfiltered_count === 0 && isLoaded\">\n  </pw-no-data>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1.AdminService }, { type: i1$2.TagService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }] });
 
 class ResourcesInsightComponent extends AppBaseComponent {
@@ -5994,6 +6061,9 @@ class AddMembersComponent extends AppBaseComponent {
             this.getSubscriptionDetails();
         });
     }
+    get emailsFormArrayElements() {
+        return this.form.get('emailsFormArray');
+    }
     createItem() {
         return this.formBuilder.group({
             email: ['', [Validators.email, Validators.required]]
@@ -6091,7 +6161,7 @@ class AddMembersComponent extends AppBaseComponent {
                         if (response?.status === StatusCodes.OK) {
                             this.membersAdded.emit();
                             this.toast.success(response.message);
-                            this.form.reset();
+                            this.form.setControl('emailsFormArray', this.formBuilder.array([this.createItem()]));
                         }
                         else {
                             this.toast.error(response.error.message);
@@ -6105,14 +6175,20 @@ class AddMembersComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddMembersComponent, deps: [{ token: i0.Injector }, { token: i3$2.UntypedFormBuilder }, { token: i1$2.SubscriptionService }, { token: i1$2.AuthService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddMembersComponent, selector: "pw-add-members", outputs: { membersAdded: "membersAdded" }, usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of form.get('emailsFormArray')['controls'];\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i3$5.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$5.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: AddMembersComponent, selector: "pw-add-members", outputs: { membersAdded: "membersAdded" }, usesInheritance: true, ngImport: i0, template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  accept=\".csv\"\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of emailsFormArrayElements.controls\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\" aria-label=\"Go Back\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n", dependencies: [{ kind: "directive", type: i3$5.NgFileDropDirective, selector: "[ngFileDrop]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$5.NgFileSelectDirective, selector: "[ngFileSelect]", inputs: ["options", "uploadInput"], outputs: ["uploadOutput"] }, { kind: "directive", type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i10.ButtonBusyDirective, selector: "[buttonBusy]", inputs: ["buttonBusy", "busyText"] }, { kind: "directive", type: i3$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i3$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i3$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }] }); }
 }
+__decorate([
+    ValidateForm('form'),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], AddMembersComponent.prototype, "onSignUpMember", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: AddMembersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-add-members', template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of form.get('emailsFormArray')['controls'];\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n" }]
+            args: [{ selector: 'pw-add-members', template: "<section>\n  <div class=\"row\">\n    <div class=\"col-12 mb-3\">\n      <div class=\"title d-flex\">\n        <a\n          aria-label=\"Navigate to Target\"\n          (click)=\"membersAdded.emit()\"\n          class=\"previous\"><i class=\"fa fa-arrow-alt-circle-left\" aria-hidden=\"true\"></i></a>\n        <h2 class=\"mt-3\">Enterprise Members for this subscription</h2>\n      </div>\n      <p>Here you can add members to your subscription</p>\n    </div>\n  </div>\n</section>\n\n<section>\n  <h5 class=\"ms-2 pt-3\">Upload File (CSV)</h5>\n  <div class=\"row p-2\">\n    <div class=\"col-12\">\n      <div class=\"upload-box\">\n        <div class=\"upload-box-content\">\n          <div class=\"drop-container\"\n            ngFileDrop\n            [options]=\"options\"\n            (uploadOutput)=\"onUploadOutput($event)\"\n            [uploadInput]=\"uploadInput\">\n            <p>\n              Drag files here or\n              <label class=\"upload-button\">\n                <input type=\"file\"\n                  ngFileSelect\n                  accept=\".csv\"\n                  [options]=\"options\"\n                  (uploadOutput)=\"onUploadOutput($event)\"\n                  [uploadInput]=\"uploadInput\"\n                  multiple />\n                browse\n              </label>\n              to upload.\n            </p>\n          </div>\n          <div class=\"upload-item\"\n            *ngFor=\"let f of files; let i = index\">\n            <div class=\"upload-item-content\">\n              <div class=\"filename\">\n                <div class=\"filename-left\">\n                  <i class=\"ionicon ion-ios-copy\" aria-hidden=\"true\"></i>\n                  <span>{{ f.name }}</span>\n                </div>\n              </div>\n              <div class=\"progress-content\">\n                <div class=\"progress\">\n                  <span class=\"bar\"\n                    [style.width]=\"f?.progress?.data?.percentage + '%'\"\n                    [class.is-done]=\"f?.progress?.data?.percentage === 100\"></span>\n                </div>\n              </div>\n              <div class=\"progress-text-content\">\n                <span class=\"progress-text\"\n                  [class.is-done]=\"f?.progress?.data?.percentage === 100\">\n                  <span>{{ f.progress?.data?.percentage }}% </span>\n                  <span *ngIf=\"f.progress?.data?.percentage !== 100\">Uploading...</span>\n                  <span *ngIf=\"f.progress?.data?.percentage === 100\">Done</span>\n                </span>\n                <span class=\"speed-and-eta-text\"\n                  *ngIf=\"\n                                        f.progress?.data?.percentage !== 0 &&\n                                        f.progress?.data?.percentage !== 100\n                                    \">\n                  <span>{{ f.progress?.data?.speedHuman }} </span>\n                  <span>ETA {{ f.progress?.data?.etaHuman }}</span>\n                </span>\n              </div>\n            </div>\n          </div>\n          <div class=\"help-text\">\n            <span>Note: You can upload a .csv file containing the comma separated emails\n              of the members to add.</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <h5 class=\"ms-2 pt-3 d-inline-block me-2\">Add Member's Email</h5>\n  <small><strong> (Available {{ availableUnits }} Seats) </strong></small>\n  <div class=\"p-2\">\n    <form [formGroup]=\"form\"\n      (ngSubmit)=\"onSignUpMember()\">\n      <div formArrayName=\"emailsFormArray\"\n        *ngFor=\"\n                    let item of emailsFormArrayElements.controls\n                    let i = index;\n                    let last = last\n                \">\n        <div [formGroupName]=\"i\">\n          <div class=\"row mb-2\">\n            <label class=\"col-12 col-md-4 text-md-end col-form-label col-form-label-sm\" for=\"Email\">\n              #{{ i + 1 }}</label>\n            <div class=\"col-10 col-md-4\">\n              <input formControlName=\"email\"\n                class=\"form-control form-control-sm\"\n                placeholder=\"Email\" />\n            </div>\n            <div class=\"col-2\">\n              <button class=\"btn btn-sm btn-danger\"\n                type=\"button\">\n                <i\n                                class=\"fa fa-times\"\n                                title=\"Delete\"\n                                (click)=\"removeItem(i)\"\n                                (keydown.enter)=\"removeItem(i)\"\n                                aria-hidden=\"true\"\n                            ></i>\n              </button>\n              <i\n                                class=\"btn btn-sm btn-primary fal fa-plus ms-2\"\n                                *ngIf=\"last && emailsFormArray?.controls?.length < availableUnits\"\n                                title=\"Add More\"\n                                (click)=\"addItem()\"\n                                (keydown.enter)=\"addItem()\"\n                                aria-hidden=\"true\"\n                            ></i>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div class=\"text-center mt-2\">\n        <button class=\"btn btn-sm btn-outline-default me-2\"\n        (click)=\"membersAdded.emit()\">\n          <i class=\"fa fa-plus-times\" aria-hidden=\"true\" aria-label=\"Go Back\"></i>\n          {{ 'Button.Back' | transloco }}\n        </button>\n        <button type=\"submit\"\n          class=\"btn btn-sm btn-outline-primary me-2\"\n          [buttonBusy]=\"buttonBusy\"\n          [disabled]=\"form.invalid || buttonBusy\">\n          Add Members\n        </button>\n      </div>\n    </form>\n  </div>\n</section>\n" }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: i3$2.UntypedFormBuilder }, { type: i1$2.SubscriptionService }, { type: i1$2.AuthService }], propDecorators: { membersAdded: [{
                 type: Output
-            }] } });
+            }], onSignUpMember: [] } });
 
 class SubscriptionUsersComponent extends AppBaseComponent {
     constructor(subscriptionService, injector, cdr, authService, windowService, adminService, toaster) {
@@ -6157,6 +6233,33 @@ class SubscriptionUsersComponent extends AppBaseComponent {
             search: this.searchText
         });
     }
+    makeAdmin(user, value) {
+        swal.fire({
+            title: value === true ? 'Make Admin' : 'Remove Admin',
+            text: value === true
+                ? `This user will now have full access to your subscription. Read more in FAQ.`
+                : `Are you sure?`,
+            showCancelButton: true,
+            reverseButtons: true,
+            icon: 'warning'
+        }).then(rep => {
+            if (rep.value) {
+                const data = {
+                    user_id: user.id,
+                    is_admin: value
+                };
+                this.subscriptionService.toggleAdmin(this.id, data).subscribe(response => {
+                    if (response.status === StatusCodes.OK) {
+                        this.toast.success(response.message);
+                    }
+                    this.getSubscriptionDetails({
+                        page: this.page,
+                        page_size: PAGE_SIZE
+                    });
+                });
+            }
+        });
+    }
     onImpersonate(user) {
         this.userToImpersonate = user;
         this.passwordValidationModalForImpersonate.open();
@@ -6237,6 +6340,7 @@ class SubscriptionUsersComponent extends AppBaseComponent {
             .getEnrolledSubscription(this.id, paging)
             .subscribe(response => {
             this.subscriptionMembers = response?.members || [];
+            this.subscriptionAdmins = response?.admins || [];
             this.subscriptionOwnerUserId = response?.owner_id;
             this.totalRecords = response?.members.length;
             this.totalUnfilteredCount = response.unfiltered_count;
@@ -6251,11 +6355,11 @@ class SubscriptionUsersComponent extends AppBaseComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionUsersComponent, deps: [{ token: i1$2.SubscriptionService }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i1$2.AuthService }, { token: i1$2.WindowService }, { token: i1.AdminService }, { token: i1$2.CustomToastService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"hasAccess && !isAddEnabled\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.11", type: SubscriptionUsersComponent, selector: "pw-subscription-users", viewQueries: [{ propertyName: "passwordValidationModalForImpersonate", first: true, predicate: ["passwordValidationModalForImpersonate"], descendants: true }, { propertyName: "passwordValidationModalForUserDelete", first: true, predicate: ["passwordValidationModalForUserDelete"], descendants: true }, { propertyName: "passwordValidationModalForRemove2fa", first: true, predicate: ["passwordValidationModalForRemove2fa"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"hasAccess && !isAddEnabled\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span class=\"badge bg-success mx-1 admin-badge\" *ngIf=\"subscriptionAdmins?.includes(user?.id)\"> Admin </span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"hasAccess && user.id !== subscriptionOwner\"\n\t\t\t\t\t\t[ngIfElse]=\"empty\">\n\t\t\t\t\t\t<!-- Make Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Make Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"!subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-user-crown fa-lg success\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(users, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li></li>\n\t\t\t\t\t\t<!-- Remove Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Remove Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-ban warning fa-lg\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template #empty>\n\t\t\t\t\t\t\t<li class=\"mx-3\"></li>\n\t\t\t\t\t\t  </ng-template>\n\t\t\t\t\t  </ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"], dependencies: [{ kind: "component", type: i2.Table, selector: "p-table", inputs: ["frozenColumns", "frozenValue", "style", "styleClass", "tableStyle", "tableStyleClass", "paginator", "pageLinks", "rowsPerPageOptions", "alwaysShowPaginator", "paginatorPosition", "paginatorStyleClass", "paginatorDropdownAppendTo", "paginatorDropdownScrollHeight", "currentPageReportTemplate", "showCurrentPageReport", "showJumpToPageDropdown", "showJumpToPageInput", "showFirstLastIcon", "showPageLinks", "defaultSortOrder", "sortMode", "resetPageOnSort", "selectionMode", "selectionPageOnly", "contextMenuSelection", "contextMenuSelectionMode", "dataKey", "metaKeySelection", "rowSelectable", "rowTrackBy", "lazy", "lazyLoadOnInit", "compareSelectionBy", "csvSeparator", "exportFilename", "filters", "globalFilterFields", "filterDelay", "filterLocale", "expandedRowKeys", "editingRowKeys", "rowExpandMode", "scrollable", "scrollDirection", "rowGroupMode", "scrollHeight", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "virtualScrollDelay", "frozenWidth", "responsive", "contextMenu", "resizableColumns", "columnResizeMode", "reorderableColumns", "loading", "loadingIcon", "showLoader", "rowHover", "customSort", "showInitialSortBadge", "autoLayout", "exportFunction", "exportHeader", "stateKey", "stateStorage", "editMode", "groupRowsBy", "groupRowsByOrder", "responsiveLayout", "breakpoint", "paginatorLocale", "value", "columns", "first", "rows", "totalRecords", "sortField", "sortOrder", "multiSortMeta", "selection", "selectAll", "virtualRowHeight"], outputs: ["contextMenuSelectionChange", "selectAllChange", "selectionChange", "onRowSelect", "onRowUnselect", "onPage", "onSort", "onFilter", "onLazyLoad", "onRowExpand", "onRowCollapse", "onContextMenuSelect", "onColResize", "onColReorder", "onRowReorder", "onEditInit", "onEditComplete", "onEditCancel", "onHeaderCheckboxToggle", "sortFunction", "firstChange", "rowsChange", "onStateSave", "onStateRestore"] }, { kind: "directive", type: i3$3.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "directive", type: i2.SortableColumn, selector: "[pSortableColumn]", inputs: ["pSortableColumn", "pSortableColumnDisabled"] }, { kind: "component", type: i2.SortIcon, selector: "p-sortIcon", inputs: ["field"] }, { kind: "directive", type: i4$2.Tooltip, selector: "[pTooltip]", inputs: ["tooltipPosition", "tooltipEvent", "appendTo", "positionStyle", "tooltipStyleClass", "tooltipZIndex", "escape", "showDelay", "hideDelay", "life", "positionTop", "positionLeft", "autoHide", "fitContent", "hideOnEscape", "pTooltip", "tooltipDisabled", "tooltipOptions"] }, { kind: "directive", type: i4$1.InputText, selector: "[pInputText]", inputs: ["variant"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$2.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: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i9.PasswordValidationComponent, selector: "pw-password-validation", inputs: ["confirmMessage"], outputs: ["successEvent"] }, { kind: "directive", type: i7.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: i5.ProgressSpinner, selector: "p-progressSpinner", inputs: ["styleClass", "style", "strokeWidth", "fill", "animationDuration", "ariaLabel"] }, { kind: "component", type: i9.NoDataComponent, selector: "pw-no-data", inputs: ["message", "description", "withImage"] }, { kind: "directive", type: i10.DynamicBadgeDirective, selector: "[appDynamicBadge]", inputs: ["appDynamicBadge", "color", "colorByName", "dataName"] }, { kind: "directive", type: i10.RbacAllowDirective, selector: "[rbacAllow]", inputs: ["rbacAllow"] }, { kind: "directive", type: i1$1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "component", type: AddMembersComponent, selector: "pw-add-members", outputs: ["membersAdded"] }, { kind: "pipe", type: i12.TranslocoPipe, name: "transloco" }, { kind: "pipe", type: i13.DateFormatPipe, name: "dateFormat" }, { kind: "pipe", type: i13.SinceAgoPipe, name: "sinceAgo" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.11", ngImport: i0, type: SubscriptionUsersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"hasAccess && !isAddEnabled\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
+            args: [{ selector: 'pw-subscription-users', template: "<div class=\"w-100 text-center mt-3\">\n\t<ng-template [ngIf]=\"!isLoaded\">\n\t\t<p-progressSpinner></p-progressSpinner>\n\t</ng-template>\n</div>\n<div class=\"text-end mb-2\" *ngIf=\"hasAccess && !isAddEnabled\">\n\t<button class=\"btn btn-sm btn-outline-primary\" (click)=\"isAddEnabled = true\">\n\t  <i class=\"fa fa-plus-circle\" aria-hidden=\"true\"></i> Add Members\n\t</button>\n  </div>\n  <section id=\"members\"\n  *ngIf=\"!isAddEnabled\">\n<div [class.hideTable]=\"totalUnfilteredCount === 0\"\n\tclass=\"primeng-datatable-container table-responsive mt-0\">\n\t<p-table #dt\n\t\t[value]=\"subscriptionMembers\"\n\t\t[paginator]=\"totalRecords !== 0\"\n\t\t[rows]=\"PAGE_SIZE\"\n\t\t[lazy]=\"true\"\n\t\t[totalRecords]=\"totalRecords\"\n\t\t[loading]=\"loading\"\n\t\t[filterDelay]=\"1000\"\n\t\t[customSort]=\"true\"\n\t\t(onLazyLoad)=\"onLazyLoad($event)\">\n\t\t<ng-template pTemplate=\"caption\">\n\t\t\t<div class=\"text-end\">\n\t\t\t\t<i class=\"fa fa-search mt-2 me-2\"\n\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t<input [(ngModel)]=\"searchText\"\n\t\t\t\t\t(input)=\"dt.filterGlobal($event.target.value, 'contains')\"\n\t\t\t\t\ttype=\"text\"\n\t\t\t\t\tpInputText\n\t\t\t\t\tsize=\"50\"\n\t\t\t\t\tplaceholder=\"Search subscription users...\"\n\t\t\t\t\tclass=\"mw-90\">\n\t\t\t</div>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"header\">\n\t\t\t<tr>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"id\">\n\t\t\t\t\t{{ 'Admin.Users.Id' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"id\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"first_name\">\n\t\t\t\t\t{{ 'Label.FirstName' | transloco }}\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_name\">\n\t\t\t\t\t{{ 'Label.LastName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_name\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"email\">\n\t\t\t\t\t{{ 'Label.Email' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"email\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"slug\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.NickName' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"slug\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"has_password\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.EmailConfirmed' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"has_password\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\"\n\t\t\t\t\tpSortableColumn=\"last_sign_in_at\">\n\t\t\t\t\t{{ 'Admin.Subscriptions.LastLogin' | transloco }}\n\t\t\t\t\t<p-sortIcon field=\"last_sign_in_at\"></p-sortIcon>\n\t\t\t\t</th>\n\t\t\t\t<th scope=\"true\">\n\t\t\t\t\t{{ 'Label.Actions' | transloco }}\n\t\t\t\t</th>\n\t\t\t</tr>\n\t\t</ng-template>\n\t\t<ng-template pTemplate=\"body\"\n\t\t\tlet-user>\n\t\t\t<tr>\n\t\t\t\t<td data-head=\"Id\">{{ user.id }}</td>\n\t\t\t\t<td data-head=\"First Name\">\n\t\t\t\t\t<span class=\"first-name\">{{ user.first_name }}</span>\n\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId === user.id\">\n\t\t\t\t\t\t<span *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Subscription Owner\">\n\t\t\t\t\t\t\t<i class=\"info-icon fas fa-user-tie success\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t\t<span class=\"badge bg-success mx-1 admin-badge\" *ngIf=\"subscriptionAdmins?.includes(user?.id)\"> Admin </span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Name\">\n\t\t\t\t\t{{ user.last_name }}\n\t\t\t\t\t<span *ngIf=\"user?.alpha\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.AlphaIcon'|transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-a alpha-beta text-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.beta\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.BetaIcon'|transloco\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-regular fa-square-b alpha-beta text-primary\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.cognito_sso_activated\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\t[pTooltip]=\"'Admin.Users.Tooltip.Cognito' | transloco\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa fa-cloud success\" ></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email\">{{ user.email }}</td>\n\t\t\t\t<td data-head=\"Nick Name\">\n\t\t\t\t\t<a [routerLink]=\"['/members', user.slug]\">{{ user.slug }}</a>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Email Confirm\">\n\t\t\t\t\t<span [appDynamicBadge]=\"{ itemsArray: [true, false], item: user?.has_password }\"\n\t\t\t\t\t\tcolor=\"success-danger\"\n\t\t\t\t\t\tclass=\"badge\">\n\t\t\t\t\t\t{{ user?.has_password ? 'Yes' : 'No' }}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span *ngIf=\"user?.blocked\"\n\t\t\t\t\t\t[pTooltip]=\"'This user has been blocked'\"\n\t\t\t\t\t\tclass=\"ms-2\"\n\t\t\t\t\t\ttooltipPosition=\"top\">\n\t\t\t\t\t\t<i class=\"fa-solid fa-hexagon-exclamation text-danger hexa-warning\"></i>\n\t\t\t\t\t</span>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Last Login\">\n\t\t\t\t\t<span *ngIf=\"user?.current_sign_in_at; else lastSignin\">\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t{{ user.current_sign_in_at | dateFormat }}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t<span *ngIf=\"user.current_sign_in_at\">\n\t\t\t\t\t\t\t&nbsp;({{ user.current_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</span>\n\t\t\t\t\t<ng-template #lastSignin>\n\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t<span>\n\t\t\t\t\t\t\t\t{{ user.last_sign_in_at | dateFormat }}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t<span *ngIf=\"user.last_sign_in_at\">\n\t\t\t\t\t\t\t\t&nbsp;({{ user.last_sign_in_at | sinceAgo }})\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</ng-template>\n\t\t\t\t</td>\n\t\t\t\t<td data-head=\"Action\">\n\t\t\t\t\t<ul class=\"list-unstyled list-inline list-action\">\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Impersonate this user\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t<i (click)=\"onImpersonate(user)\" (keydown.enter)=\"onImpersonate(user)\"  class=\"fas fa-people-arrows fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template [ngIf]=\"subscriptionOwnerUserId !== user.id\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\" ngbTooltip=\"Set this user as new owner\" class=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t\t<i (click)=\"onChangeOwner(user)\" (keydown.enter)=\"onChangeOwner(user)\"  class=\"fa fa-user-crown warning fa-lg\" aria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"user?.enable_two_factor_authenticator\">\n\t\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Alpha'\"\n\t\t\t\t\t\t\t\t(click)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"disable2fa(user?.id)\"\n\t\t\t\t\t\t\t\tngbTooltip=\"Disable 2FA\"\n\t\t\t\t\t\t\t\tclass=\"me-2 me-sm-3 success\">\n\t\t\t\t\t\t\t\t<i class=\"fa fa-lock\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t</ng-template>\n\t\t\t\t\t\t<ng-template [ngIf]=\"hasAccess && user.id !== subscriptionOwner\"\n\t\t\t\t\t\t[ngIfElse]=\"empty\">\n\t\t\t\t\t\t<!-- Make Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Make Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"!subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-user-crown fa-lg success\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(users, true)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li></li>\n\t\t\t\t\t\t<!-- Remove Admin -->\n\t\t\t\t\t\t<li ngbTooltip=\"Remove Admin\"\n\t\t\t\t\t\t  class=\"me-2 me-sm-3 mx-2\"\n\t\t\t\t\t\t  *ngIf=\"subscriptionAdmins?.includes(user.id)\">\n\t\t\t\t\t\t  <i\n\t\t\t\t\t\t\t\t\t\t\t\tclass=\"fa fa-ban warning fa-lg\"\n\t\t\t\t\t\t\t\t\t\t\t\t(keydown.enter)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\t(click)=\"makeAdmin(user, false)\"\n\t\t\t\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t\t\t\t></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<ng-template #empty>\n\t\t\t\t\t\t\t<li class=\"mx-3\"></li>\n\t\t\t\t\t\t  </ng-template>\n\t\t\t\t\t  </ng-template>\n\t\t\t\t\t\t<li [routerLink]=\"[routers.usersDetails + user.id]\"\n\t\t\t\t\t\t\tngbTooltip=\"Edit\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i class=\"fa fa-edit edit-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t\t<li *rbacAllow=\"'Pages.Admin.Users.Delete'\"\n\t\t\t\t\t\t\tngbTooltip=\"Delete\"\n\t\t\t\t\t\t\tclass=\"me-2 me-sm-3\">\n\t\t\t\t\t\t\t<i (click)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\t(keydown.enter)=\"onDelete(user)\"\n\t\t\t\t\t\t\t\tclass=\"fa fa-trash delete-icon\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"></i>\n\t\t\t\t\t\t</li>\n\t\t\t\t\t</ul>\n\t\t\t\t</td>\n\t\t\t</tr>\n\t\t</ng-template>\n\t</p-table>\n\t<div *ngIf=\"totalRecords === 0 && totalUnfilteredCount !== 0\">\n\t\t<pw-no-data [withImage]=\"true\" [message]=\"'Search.NoDataMessage' | transloco\" [description]=\"'Search.NoDataDescription' | transloco\" >\n\t\t</pw-no-data>\n\t</div>\n\t<span class=\"total-records-count\" *ngIf=\"totalRecords !== 0\">\n\t\t{{ 'Label.Total' | transloco }}: {{ totalRecords }}\n\t</span>\n</div>\n<div *ngIf=\"totalUnfilteredCount === 0 && isLoaded\">\n  <pw-no-data [withImage]=\"true\" [message]=\"'Admin.Subscriptions.NoSubscriptionUsersMessage' | transloco\">\n  </pw-no-data>\n</div>\n\n</section>\n\n\n<section id=\"manage-members\"\n  *ngIf=\"isAddEnabled\">\n  <pw-add-members (membersAdded)=\"onMembersAdded()\"\n  ></pw-add-members>\n</section>\n\n<!-- password validation modal for impersonate -->\n<pw-password-validation #passwordValidationModalForImpersonate\n\t(successEvent)=\"onUserImpersonation($event)\">\n</pw-password-validation>\n<!-- password validation modal for delete user -->\n<pw-password-validation #passwordValidationModalForUserDelete\n\t(successEvent)=\"deleteUser($event)\">\n\t<div class=\"row\">\n\t\t<div class=\"col-12\">\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ActionCanNotUndone' | transloco }}\n\t\t\t</p>\n\t\t\t<p>\n\t\t\t\t{{ 'User.Account.Message.ConfirmPassword' | transloco }}\n\t\t\t</p>\n\t\t</div>\n\t</div>\n</pw-password-validation>\n<!-- password validation modal for remove2fa -->\n<pw-password-validation #passwordValidationModalForRemove2fa\n\t(successEvent)=\"remove2fa($event)\">\n</pw-password-validation>\n", styles: [".hexa-warning{font-size:18px;vertical-align:middle}.alpha-beta{font-size:14px}.info-icon{vertical-align:middle;margin-left:5px}.first-name{margin-right:5px}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.SubscriptionService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i1$2.AuthService }, { type: i1$2.WindowService }, { type: i1.AdminService }, { type: i1$2.CustomToastService }], propDecorators: { passwordValidationModalForImpersonate: [{
                 type: ViewChild,
                 args: ['passwordValidationModalForImpersonate', { static: false }]