@adlfe/campaign-management-library 2.11.5 → 2.11.7

package/projects/adl-campaign-management-library-internal/src/lib/campaign-management/modules/new-campaign/components/general-information-wa/general-information-wa.component.html

@@ -1,828 +0,0 @@
-<form autocomplete="off" [formGroup]="form">
-    <div class="form-group">
-        <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-            <mat-label class="asterix--after">Message Type</mat-label>
-
-            <mat-select placeholder="Select message type" formControlName="channel">
-                <mat-option
-                    *ngFor="let option of msgTypeWAOption"
-                    [value]="option.code"
-                    (click)="formReset()"
-                >
-                    {{ option.name }}
-                </mat-option>
-            </mat-select>
-        </mat-form-field>
-
-        <mat-error align="end" *ngFor="let validation of validationMessages.channel">
-            <p
-                class="font-12px mb-0"
-                *ngIf="
-                    form.get('channel')?.touched && form.get('channel')?.hasError(validation.type)
-                "
-            >
-                {{ validation.message }}
-            </p>
-        </mat-error>
-
-        <div
-            *ngIf="!getIsTemplate"
-            role="alert"
-            class="alert alert-warning d-flex align-items-center"
-            style="margin-top: 16px; border: 1px solid rgb(243, 124, 44)"
-        >
-            <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
-            <div>
-                If you select this channel, keep in mind that the message might not be delivered to
-                all selected customers. This is because the customer must have had a conversation
-                previously with BSP.
-            </div>
-        </div>
-    </div>
-
-    <ng-container *ngIf="getIsText">
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">From</mat-label>
-
-                <mat-select
-                    matSelectInfiniteScroll
-                    formControlName="from"
-                    placeholder="Select from"
-                    [complete]="isHaveNextAccountOption === false"
-                    [compareWith]="accountSelectedDisplay"
-                    (infiniteScroll)="getNextAccountBatch()"
-                >
-                    <div style="margin: 20px">
-                        <lib-search
-                            [placeholder]="'Search'"
-                            [currentValue]="form?.get('from').value?.name"
-                            (searchRes)="updateSearchAccount($event)"
-                        ></lib-search>
-                    </div>
-
-                    <mat-option *ngFor="let option of accountOption" [value]="option">
-                        {{ option.name + ' (' + option.accountNo + ')' }}
-                    </mat-option>
-                    <mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.from">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('from').touched && form.get('from').hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div class="form-group">
-            <mat-form-field appearance="outline" floatLabel="always">
-                <mat-label class="asterix--after">Text</mat-label>
-
-                <textarea
-                    matInput
-                    rows="6"
-                    cols="50"
-                    cdkTextareaAutosize
-                    cdkAutosizeMinRows="2"
-                    cdkAutosizeMaxRows="15"
-                    formControlName="text"
-                    placeholder="Enter text"
-                    #autosize="cdkTextareaAutosize"
-                ></textarea>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.text">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('text')?.touched && form.get('text')?.hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-    </ng-container>
-
-    <ng-container *ngIf="getIsMedia">
-        <div class="form-group">
-            <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                <mat-label class="asterix--after">Media Type</mat-label>
-
-                <mat-select
-                    placeholder="Select media type"
-                    formControlName="media"
-                    (selectionChange)="updateMediaType($event.value)"
-                >
-                    <mat-option *ngFor="let option of mediaTypeOption" [value]="option.code">
-                        {{ option.name }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.media">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('media').touched && form.get('media').hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">From</mat-label>
-
-                <mat-select
-                    matSelectInfiniteScroll
-                    formControlName="from"
-                    placeholder="Select from"
-                    [complete]="isHaveNextAccountOption === false"
-                    [compareWith]="accountSelectedDisplay"
-                    (infiniteScroll)="getNextAccountBatch()"
-                >
-                    <div style="margin: 20px">
-                        <lib-search
-                            [placeholder]="'Search'"
-                            [currentValue]="form?.get('from').value?.name"
-                            (searchRes)="updateSearchAccount($event)"
-                        ></lib-search>
-                    </div>
-
-                    <mat-option *ngFor="let option of accountOption" [value]="option">
-                        {{ option.name + ' (' + option.accountNo + ')' }}
-                    </mat-option>
-                    <mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.from">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('from').touched && form.get('from').hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <ng-container *ngIf="form.get('media').value?.toLowerCase() !== 'location'">
-            <div class="form-group">
-                <mat-form-field appearance="outline" class="w-100">
-                    <mat-label class="asterix--after">File</mat-label>
-
-                    <input
-                        matInput
-                        type="text"
-                        autocomplete="off"
-                        (click)="filePicker.click()"
-                        formControlName="fileName"
-                    />
-
-                    <button
-                        mat-button
-                        matSuffix
-                        mat-icon-button
-                        aria-label="Choose File"
-                        (click)="filePicker.click()"
-                    >
-                        <mat-icon>attach_file</mat-icon>
-                    </button>
-
-                    <input
-                        #filePicker
-                        hidden
-                        type="file"
-                        [accept]="extFileAccepted"
-                        (change)="onFileSelected($event)"
-                    />
-                </mat-form-field>
-
-                <mat-error align="end" *ngFor="let validation of validationMessages.fileName">
-                    <p
-                        class="font-12px mb-0"
-                        *ngIf="
-                            form.get('fileName').touched &&
-                            form.get('fileName').hasError(validation.type)
-                        "
-                    >
-                        {{ validation.message }}
-                    </p>
-                </mat-error>
-            </div>
-        </ng-container>
-
-        <ng-container *ngIf="form.get('media').value?.toLowerCase() === 'location'">
-            <div class="w-100">
-                <h4 class="asterix--after">Location</h4>
-
-                <div class="w-100">
-                    <agm-map
-                        style="width: 100%; height: 400px"
-                        [latitude]="maps.latitude"
-                        [longitude]="maps.longitude"
-                        [disableDoubleClickZoom]="maps.isDoubleClickZoom"
-                        [zoom]="maps.zoom"
-                    >
-                        <agm-marker
-                            [latitude]="maps.latitude"
-                            [longitude]="maps.longitude"
-                            [markerDraggable]="maps.isDraggable"
-                            (dragEnd)="markerDragEnd($event)"
-                        ></agm-marker>
-                    </agm-map>
-                </div>
-
-                <div class="form-group">
-                    <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                        <mat-label>Location</mat-label>
-
-                        <input
-                            #mapSearch
-                            matInput
-                            type="text"
-                            maxlength="100"
-                            placeholder="Enter location here"
-                        />
-                    </mat-form-field>
-                </div>
-            </div>
-        </ng-container>
-    </ng-container>
-
-    <ng-container *ngIf="getIsTemplate">
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">From</mat-label>
-
-                <mat-select
-                    matSelectInfiniteScroll
-                    formControlName="from"
-                    placeholder="Select from"
-                    [complete]="isHaveNextAccountOption === false"
-                    [compareWith]="accountSelectedDisplay"
-                    (infiniteScroll)="getNextAccountBatch()"
-                    (selectionChange)="getTemplateOptionService($event.value)"
-                >
-                    <div style="margin: 20px">
-                        <lib-search
-                            [placeholder]="'Search'"
-                            [currentValue]="form?.get('from').value?.name"
-                            (searchRes)="updateSearchAccount($event)"
-                        ></lib-search>
-                    </div>
-
-                    <mat-option *ngFor="let option of accountOption" [value]="option">
-                        {{ option.name + ' (' + option.accountNo + ')' }}
-                    </mat-option>
-                    <mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.from">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('from')?.touched && form.get('from')?.hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div class="form-group">
-            <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                <mat-label class="asterix--after">Template</mat-label>
-
-                <mat-select
-                    matSelectInfiniteScroll
-                    formControlName="template"
-                    placeholder="Select template"
-                    [complete]="isHaveNextTemplateOption === false"
-                    [compareWith]="templateSelectedDisplay"
-                    (infiniteScroll)="getNextTemplateBatch()"
-                    (selectionChange)="updateTemplate($event.value)"
-                >
-                    <div style="margin: 20px">
-                        <lib-search
-                            [placeholder]="'Search'"
-                            [currentValue]="form?.get('template').value?.name"
-                            (searchRes)="updateSearch($event)"
-                        ></lib-search>
-                    </div>
-
-                    <mat-option *ngFor="let option of templateOption" [value]="option">
-                        {{ option.name }}
-                    </mat-option>
-                    <mat-option *ngIf="isLoadingTemplateOption">Loading...</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.template">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="
-                        form.get('template')?.touched &&
-                        form.get('template')?.hasError(validation.type)
-                    "
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div *ngIf="isHaveTemplateParam" class="d-flex justify-content-end">
-            <mat-checkbox
-                labelPosition="before"
-                formControlName="isUpload"
-                (change)="updateDownloadCSV($event.checked)"
-            >
-                Using Download XLSX
-            </mat-checkbox>
-        </div>
-
-        <ng-container *ngIf="!form.get('isUpload')?.value">
-            <div
-                *ngIf="form.get('template')?.value?.category === 'AUTHENTICATION'"
-                class="form-group"
-            >
-                <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                    <mat-label> OTP Value </mat-label>
-
-                    <input matInput type="text" formControlName="otpValue" />
-                </mat-form-field>
-            </div>
-
-            <ng-container *ngIf="getParamHeader?.length > 0">
-                <p class="font-16px font-PoppinsBold">Header Parameter</p>
-
-                <div
-                    *ngFor="let param of getParamHeader; let paramHeaderIndex = index"
-                    class="form-group"
-                >
-                    <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                        <mat-label>Parameter {{ paramHeaderIndex + 1 }}</mat-label>
-
-                        <input
-                            matInput
-                            type="text"
-                            [placeholder]="'Parameter ' + (paramHeaderIndex + 1)"
-                            [formControl]="param.get('name')"
-                        />
-                    </mat-form-field>
-                </div>
-            </ng-container>
-
-            <ng-container *ngIf="getParamBody?.length > 0">
-                <p class="font-16px font-PoppinsBold mt-3">Body Parameter</p>
-
-                <div
-                    *ngFor="let param of getParamBody; let paramBodyIndex = index"
-                    class="form-group"
-                >
-                    <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                        <mat-label>Parameter {{ paramBodyIndex + 1 }}</mat-label>
-
-                        <input
-                            matInput
-                            type="text"
-                            [placeholder]="'Parameter ' + (paramBodyIndex + 1)"
-                            [formControl]="param.get('name')"
-                        />
-                    </mat-form-field>
-                </div>
-            </ng-container>
-
-            <ng-container *ngIf="isShowParameter">
-                <p class="font-16px font-PoppinsBold mt-3">Button Parameter</p>
-
-                <ng-container *ngFor="let button of getButton; let buttonIndex = index">
-                    <ng-container *ngIf="getParamButton(buttonIndex)?.length > 0">
-                        <p class="font-14px font-PoppinsBold mt-3">Button {{ buttonIndex + 1 }}</p>
-
-                        <div
-                            *ngFor="
-                                let param of getParamButton(buttonIndex);
-                                let paramIndex = index
-                            "
-                            class="form-group"
-                        >
-                            <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                                <mat-label>Parameter {{ paramIndex + 1 }}</mat-label>
-
-                                <input
-                                    matInput
-                                    type="text"
-                                    [placeholder]="'Parameter ' + (paramIndex + 1)"
-                                    [formControl]="param.get('name')"
-                                />
-                            </mat-form-field>
-                        </div>
-                    </ng-container>
-                </ng-container>
-            </ng-container>
-        </ng-container>
-
-        <ng-container
-            *ngIf="
-                ['image', 'video', 'document'].includes(
-                    form.get('template')?.value?.header?.type?.toLowerCase()
-                )
-            "
-        >
-            <p class="font-16px font-PoppinsBold mt-3">File</p>
-
-            <div class="form-group">
-                <mat-form-field appearance="outline" class="w-100">
-                    <mat-label class="asterix--after">File</mat-label>
-
-                    <input
-                        matInput
-                        type="text"
-                        autocomplete="off"
-                        (click)="filePicker.click()"
-                        formControlName="fileName"
-                    />
-
-                    <button
-                        mat-button
-                        matSuffix
-                        mat-icon-button
-                        aria-label="Choose File"
-                        (click)="filePicker.click()"
-                    >
-                        <mat-icon>attach_file</mat-icon>
-                    </button>
-
-                    <input
-                        #filePicker
-                        hidden
-                        type="file"
-                        [accept]="extFileAccepted"
-                        (change)="onFileSelected($event)"
-                    />
-                </mat-form-field>
-            </div>
-        </ng-container>
-    </ng-container>
-
-    <ng-container *ngIf="getIsCatalogue">
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">From</mat-label>
-
-                <mat-select
-                    matSelectInfiniteScroll
-                    formControlName="from"
-                    placeholder="Select from"
-                    [complete]="isHaveNextAccountOption === false"
-                    [compareWith]="accountSelectedDisplay"
-                    (infiniteScroll)="getNextAccountBatch()"
-                >
-                    <div style="margin: 20px">
-                        <lib-search
-                            [placeholder]="'Search'"
-                            [currentValue]="form?.get('from').value?.name"
-                            (searchRes)="updateSearchAccount($event)"
-                        ></lib-search>
-                    </div>
-
-                    <mat-option *ngFor="let option of accountOption" [value]="option">
-                        {{ option.name + ' (' + option.accountNo + ')' }}
-                    </mat-option>
-                    <mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.from">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('from')?.touched && form.get('from')?.hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">Category</mat-label>
-
-                <mat-select formControlName="category" placeholder="Select category">
-                    <mat-option *ngFor="let option of categoryOption" [value]="option.value">
-                        {{ option.label }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.category">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="
-                        form.get('category')?.touched &&
-                        form.get('category')?.hasError(validation.type)
-                    "
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">Catalog</mat-label>
-
-                <mat-select formControlName="catalogue" placeholder="Select catalog">
-                    <mat-option *ngFor="let option of accountOption" [value]="option">
-                        {{ option.name }}
-                    </mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.catalogue">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="
-                        form.get('catalogue')?.touched &&
-                        form.get('catalogue')?.hasError(validation.type)
-                    "
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <div
-            *ngIf="form.get('category')?.value === 'product'"
-            style="padding: 8px; border-radius: 8px; border: 1px solid #6177c4"
-        >
-            <div class="form-group">
-                <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                    <mat-label class="asterix--after">Product</mat-label>
-
-                    <mat-select formControlName="product" placeholder="Select product">
-                        <mat-option *ngFor="let option of accountOption" [value]="option">
-                            {{ option.name }}
-                        </mat-option>
-                    </mat-select>
-                </mat-form-field>
-
-                <mat-error align="end" *ngFor="let validation of validationMessages.product">
-                    <p
-                        class="font-12px mb-0"
-                        *ngIf="
-                            form.get('product')?.touched &&
-                            form.get('product')?.hasError(validation.type)
-                        "
-                    >
-                        {{ validation.message }}
-                    </p>
-                </mat-error>
-            </div>
-
-            <div class="form-group">
-                <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                    <mat-label>Body</mat-label>
-
-                    <input
-                        matInput
-                        type="text"
-                        maxlength="100"
-                        formControlName="body"
-                        placeholder="Enter body"
-                    />
-                </mat-form-field>
-            </div>
-        </div>
-    </ng-container>
-
-    <ng-container *ngIf="getIsUtility">
-        <div style="display: grid; gap: 0.5rem">
-            <mat-label class="asterix--after">Template</mat-label>
-            <mat-radio-group
-                style="display: flex; gap: 0.5rem; flex-wrap: wrap"
-                formControlName="isUseExistingTemplate"
-                (change)="handleChangeTemplate($event.value)"
-            >
-                <mat-radio-button
-                    [value]="option.value"
-                    *ngFor="let option of templates"
-                    color="primary"
-                >
-                    {{ option.label }}
-                </mat-radio-button>
-            </mat-radio-group>
-        </div>
-
-        <div class="form-group">
-            <mat-form-field
-                appearance="outline"
-                floatLabel="always"
-                class="w-100"
-                style="margin-bottom: 20"
-            >
-                <mat-label class="asterix--after">From</mat-label>
-
-                <mat-select
-                    matSelectInfiniteScroll
-                    formControlName="from"
-                    placeholder="Select from"
-                    [complete]="isHaveNextAccountOption === false"
-                    [compareWith]="accountSelectedDisplay"
-                    (infiniteScroll)="getNextAccountBatch()"
-                    (selectionChange)="handleChangeFrom($event.value)"
-                >
-                    <div style="margin: 20px">
-                        <lib-search
-                            [placeholder]="'Search'"
-                            [currentValue]="form?.get('from').value?.name"
-                            (searchRes)="updateSearchAccount($event)"
-                        ></lib-search>
-                    </div>
-
-                    <mat-option *ngFor="let option of accountOption" [value]="option">
-                        {{ option.name + ' (' + option.accountNo + ')' }}
-                    </mat-option>
-                    <mat-option *ngIf="isLoadingAccountOption">Loading...</mat-option>
-                </mat-select>
-            </mat-form-field>
-
-            <mat-error align="end" *ngFor="let validation of validationMessages.from">
-                <p
-                    class="font-12px mb-0"
-                    *ngIf="form.get('from')?.touched && form.get('from')?.hasError(validation.type)"
-                >
-                    {{ validation.message }}
-                </p>
-            </mat-error>
-        </div>
-
-        <ng-container *ngIf="!form.get('isUseExistingTemplate')?.value; else existingTmpl">
-            <div
-                role="alert"
-                class="alert alert-warning d-flex align-items-center"
-                style="margin-top: 8px; border: 1px solid rgb(243, 124, 44)"
-            >
-                <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
-                <div>
-                    Direct Send access restricted for 30 days due to continued misuse. Final warning
-                    before permanent revocation.
-                </div>
-            </div>
-
-            <div class="form-group">
-                <mat-form-field appearance="outline" floatLabel="always">
-                    <mat-label class="asterix--after">Body</mat-label>
-
-                    <textarea
-                        matInput
-                        rows="6"
-                        cols="50"
-                        cdkTextareaAutosize
-                        cdkAutosizeMinRows="2"
-                        cdkAutosizeMaxRows="15"
-                        formControlName="text"
-                        placeholder="Enter text"
-                        #autosize="cdkTextareaAutosize"
-                    ></textarea>
-                </mat-form-field>
-
-                <mat-error align="end" *ngFor="let validation of validationMessages.text">
-                    <p
-                        class="font-12px mb-0"
-                        *ngIf="
-                            form.get('text').touched && form.get('text').hasError(validation.type)
-                        "
-                    >
-                        {{ validation.message }}
-                    </p>
-                </mat-error>
-            </div>
-
-            <div class="form-group">
-                <app-input
-                    type="numeric"
-                    formControlName="ttl"
-                    label="TTL"
-                    placeholder="Enter ttl"
-                    [trimLeadingZeros]="true"
-                ></app-input>
-            </div>
-
-            <div *ngIf="!isReadOnlyMode">
-                <mat-checkbox formControlName="isNeedSave">
-                    Save this message as future template
-                </mat-checkbox>
-            </div>
-
-            <div
-                role="alert"
-                class="alert alert-warning d-flex align-items-center"
-                style="margin-top: 8px; border: 1px solid rgb(243, 124, 44)"
-                *ngIf="!isUtility"
-            >
-                <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
-                <div>
-                    Copy mismatch. This copy is not Utility content. Please revise to proceed.
-                </div>
-            </div>
-        </ng-container>
-
-        <ng-template #existingTmpl>
-            <div
-                role="alert"
-                class="alert alert-warning d-flex align-items-center"
-                style="margin-top: 8px; border: 1px solid rgb(243, 124, 44)"
-            >
-                <mat-icon style="margin-right: 10px !important">error_outline</mat-icon>
-                <div>
-                    Direct Send access restricted for 30 days due to continued misuse. Final warning
-                    before permanent revocation.
-                </div>
-            </div>
-
-            <div class="form-group">
-                <mat-form-field appearance="outline" floatLabel="always" class="w-100">
-                    <mat-label class="asterix--after">Template</mat-label>
-
-                    <mat-select
-                        matSelectInfiniteScroll
-                        formControlName="template"
-                        placeholder="Select template"
-                        [complete]="isHaveNextTemplateOption === false"
-                        [compareWith]="templateSelectedDisplay"
-                        (infiniteScroll)="getNextTemplateBatch()"
-                        (selectionChange)="updateTemplate($event.value)"
-                    >
-                        <div style="margin: 20px">
-                            <lib-search
-                                [placeholder]="'Search'"
-                                [currentValue]="form?.get('template').value?.name"
-                                (searchRes)="updateSearch($event)"
-                            ></lib-search>
-                        </div>
-
-                        <mat-option *ngFor="let option of templateOption" [value]="option">
-                            {{ option.name }}
-                        </mat-option>
-                        <mat-option *ngIf="isLoadingTemplateOption">Loading...</mat-option>
-                    </mat-select>
-                </mat-form-field>
-
-                <mat-error align="end" *ngFor="let validation of validationMessages.template">
-                    <p
-                        class="font-12px mb-0"
-                        *ngIf="
-                            form.get('template')?.touched &&
-                            form.get('template')?.hasError(validation.type)
-                        "
-                    >
-                        {{ validation.message }}
-                    </p>
-                </mat-error>
-            </div>
-
-            <div class="form-group">
-                <app-input
-                    type="numeric"
-                    formControlName="ttl"
-                    label="TTL"
-                    placeholder="Enter ttl"
-                    [trimLeadingZeros]="true"
-                ></app-input>
-            </div>
-        </ng-template>
-    </ng-container>
-</form>