<div *ngIf="this.dsa.roleName == 'dsa' else Subdsa">
  <title>DSA</title>
  <div *ngIf="paramid else Add">
    <app-breadcrumb [title]="'DSA'" [items]="[{'name':'Dsa', 'route':'/dsa'}]" [active_item]="'Edit'">
    </app-breadcrumb>
  </div>
  <ng-template #Add>
    <app-breadcrumb [title]="'DSA'" [items]="[{'name':'Dsa', 'route':'/dsa'}]" [active_item]="'Add'">
    </app-breadcrumb>
  </ng-template>
</div>
<ng-template #Subdsa>
  <div *ngIf="this.dsa.roleName == 'subdsa'">
    <title>SUB DSA</title>
    <div *ngIf="paramid else Add">
      <app-breadcrumb [title]="'SUBDSA'" [items]="[{'name':'Subdsa', 'route':'/subdsa'}]" [active_item]="'Edit'">
      </app-breadcrumb>
    </div>
    <ng-template #Add>
      <app-breadcrumb [title]="'SUBDSA'" [items]="[{'name':'Subdsa', 'route':'/subdsa'}]" [active_item]="'Add'">
      </app-breadcrumb>
    </ng-template>
  </div>
</ng-template>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-12">
      <mat-drawer-container class="example-container" autosize>
        <div class="card">
          <div class="p-4">

            <form [formGroup]="dsaform">

              <div>
                <h2>{{ 'lbl_personal_detail' | translate}}</h2>

                <div class="form-row">
                  <div class="col-lg-2 col-sm-12">
                    <div class="form-row">
                      <div class="form-group">
                        <div class="main-contact-info-header pt-3">
                          <div *ngIf="!url else upload">
                            <img src="../../../assets/admin/images/userprofile.png" class="rounded-pill" width="120px"
                              height="120px" alt="" (click)="fileInput.click()" />
                          </div>
                          <ng-template #upload>
                            <img [src]="url" class="rounded-pill" width="120px" height="120px" alt=""
                              (click)="fileInput.click()" />
                          </ng-template>
                        </div>
                        <a>
                          <input type="file" #fileInput id="uploadFile" (change)="selectedImage($event)"
                            name="profilePicUrl" accept="image/*" style="display:none;" />
                        </a>
                        <div class="center">
                          <button class="p-2 text-black" *ngIf="this.url && this.url.length > 0" (click)="removeImage()"
                            style="text-align:center; border: none; border-radius:40%; font-size: 18px;">
                            <i class="icon-trash"></i>
                          </button>
                          <button class="p-2 text-black" *ngIf="!this.url"
                            style="text-align:center; border: none; border-radius:40%; font-size: 18px;">
                            <i class="icon-gallery" (click)="fileInput.click()"></i>
                          </button>
                        </div>
                      </div>
                    </div>
                    <div class="form-row">
                      <div class="form-group col-md-12">
                        <label for="name">{{ 'lbl_gender' | translate}} <span style="color: red;">*</span></label>
                        <div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioinline1" type="radio" value="Male" name="gender"
                              formControlName="gender">
                            <label class="form-check-label" for="radioinline1">{{ 'lbl_male' | translate}}</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioinline2" type="radio" value="Female" name="gender"
                              formControlName="gender">
                            <label class="form-check-label" for="radioinline2">{{ 'lbl_female' | translate}}</label>
                          </div>
                        </div>
                        <mat-error
                          *ngIf="(dsaform.get('gender') && !dsaform.get('gender')?.valid && dsaform.get('gender')?.touched)">
                          {{ 'message_lbl_gender_is_required' | translate}}
                        </mat-error>
                      </div>
                    </div>
                  </div>
                  <div class="col-lg-10 col-sm-12">
                    <div class="form-row">
                      <div class="form-group col-lg-6 col-md-6 ">
                        <label for="fullName">{{ 'lbl_full_name' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" id="fullName" name="fullName" formControlName="fullName"
                          onlyAlphabets placeholder="{{'lbl_type_here'| translate}}" required />
                        <mat-error
                          *ngIf="(dsaform.get('fullName') && !dsaform.get('fullName')?.valid && dsaform.get('fullName')?.touched)">
                          {{ 'message_lbl_full_name_is_required' | translate}}
                        </mat-error>
                      </div>
                      <div class="form-group col-lg-6 col-md-6">
                        <label for="contactNo">{{ 'lbl_contact_no' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" maxlength="10" minlength="0" id="contactNo"
                          name="contactNo" formControlName="contactNo"
                          placeholder="{{ 'placeholder_lbl_enter_your_contact_no' |translate}}" ContactNo required>
                        <mat-error
                          *ngIf="(dsaform.get('contactNo') && !dsaform.get('contactNo')!.valid  && dsaform.get('contactNo')!.touched)">
                          <span *ngIf="dsaform.get('contactNo')!.errors!['required']">
                            {{ 'message_lbl_contact_no_is_required' | translate}}</span>
                          <span
                            *ngIf="dsaform.get('contactNo')!.errors!['minlength']">{{'message_lbl_enter_valid_contact_no'
                            | translate}}</span>
                        </mat-error>
                      </div>
                    </div>
                    <div class="form-row" *ngIf="dsa.roleName == 'dsa' else Subdsacode">
                      <!-- <div class="form-group col-md-4">
                        <label for="aadhaarCardNo">{{ 'Aadhar Card No' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" id="aadhaarCardNo" formControlName="aadhaarCardNo"
                          placeholder="{{'lbl_type_here'| translate}}" maxlength="12" required>
                        <mat-error
                          *ngIf="(dsaform.get('aadhaarCardNo') && !dsaform.get('aadhaarCardNo')?.valid && dsaform.get('aadhaarCardNo')?.touched)">
                          {{ 'message_lbl_aadhar_card_no_is_required' | translate}}
                        </mat-error>
                      </div>
                      <div class="form-group col-md-4">
                        <label for="panCardNo">{{ 'lbl_pan_card_no' | translate}} <span
                            style="color: red;">*</span></label>
                        <input class="form-control" type="text" id="panCardNo" formControlName="panCardNo"
                          placeholder="{{ 'placeholder_lbl_enter_pan_no' |translate}}" maxlength="10" required
                          oninput="this.value = this.value.toUpperCase()" (keypress)="keyPressAlphanumeric($event)">
                        <mat-error
                          *ngIf="(dsaform.get('panCardNo') && !dsaform.get('panCardNo')?.valid && dsaform.get('panCardNo')?.touched)">
                          {{ 'message_lbl_pan_card_no_is_required' | translate}}
                        </mat-error>
                      </div> -->
                      <div class="form-group col-md-4">
                        <label>{{ 'lbl_job_type' | translate}} <span style="color: red;">*</span></label>
                        <div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioinline2" type="radio" value="FullTime"
                              formControlName="jobType">
                            <label class="form-check-label" for="radioinline2">{{'lbl_full_time' | translate}}</label>
                          </div>
                          <div class="form-check form-check-inline">
                            <input class="form-check-input" id="radioinline1" type="radio" value="PartTime"
                              formControlName="jobType">
                            <label class="form-check-label" for="radioinline1">{{'lbl_part_time' | translate}}</label>
                          </div>
                        </div>

                      </div>
                    </div>
                    <ng-container *ngIf="dsa.roleName == 'dsa'">
                      <form [formGroup]="customFieldForm">
                        <div class="row">
                          <ng-container *ngFor="let controlName of customFieldForm?.controls | keyvalue;let i = index">
                            <div class="col-lg-4 col-md-6 col-sm-12">
                              <div class="form-group">
                                <label>{{ controlName.key | titlecase }}</label>
                                <ng-container *ngIf="hints[i]">
                                  <a class="systooltip"><i class="fa fa-info-circle w-4 h-4 ml-1"
                                      style="margin-top:4px"></i>
                                    <span class="tooltiptext">{{hints[i]
                                      }}</span>
                                  </a>
                                </ng-container>
                                <input class="form-control" [formControlName]="controlName.key" type="text">
                              </div>
                            </div>
                          </ng-container>
                        </div>
                      </form>
                    </ng-container>
                    <ng-template #Subdsacode>
                      <div class="form-row" *ngIf="this.dsa.roleName == 'subdsa' ">
                        <!-- <div class="form-group col-lg-3 col-md-3">
                          <label for="aadhaarCardNo">{{ 'Aadhar Card No' | translate}} <span
                              style="color: red;">*</span></label>
                          <input class="form-control" type="text" id="aadhaarCardNo" formControlName="aadhaarCardNo"
                            placeholder="{{'lbl_type_here'| translate}}" maxlength="12" required>
                          <mat-error
                            *ngIf="(dsaform.get('aadhaarCardNo') && !dsaform.get('aadhaarCardNo')?.valid && dsaform.get('aadhaarCardNo')?.touched)">
                            {{ 'message_lbl_aadhar_card_no_is_required' | translate}}
                          </mat-error>
                        </div>
                        <div class="form-group col-lg-3 col-md-3">
                          <label for="panCardNo">{{ 'lbl_pan_card_no' | translate}} <span
                              style="color: red;">*</span></label>
                          <input class="form-control" type="text" id="panCardNo" formControlName="panCardNo"
                            placeholder="{{ 'placeholder_lbl_enter_pan_no' |translate}}" maxlength="10" required>
                          <mat-error
                            *ngIf="(dsaform.get('panCardNo') && !dsaform.get('panCardNo')?.valid && dsaform.get('panCardNo')?.touched)">
                            {{ 'message_lbl_pan_card_no_is_required' | translate}}
                          </mat-error>
                        </div> -->
                        <div class="form-group col-lg-3 col-md-3">
                          <label for="referralCode">{{ 'lbl_dsa_code' | translate}} <span
                              style="color: red;">*</span></label>
                          <input class="form-control" type="text" id="contactNo" name="referralCode"
                            formControlName="referralCode"
                            placeholder="{{ 'placeholder_lbl_enter_your_referral_code' |translate}}">
                        </div>
                        <div class="form-group col-md-3">
                          <label>{{ 'lbl_job_type' | translate}} <span style="color: red;">*</span></label>
                          <div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" id="subdsaradioinline2" type="radio" value="FullTime"
                                formControlName="jobType">
                              <label class="form-check-label" for="subdsaradioinline2">{{'lbl_full_time' |
                                translate}}</label>
                            </div>
                            <div class="form-check form-check-inline">
                              <input class="form-check-input" id="subdsaradioinline1" type="radio" value="PartTime"
                                formControlName="jobType">
                              <label class="form-check-label" for="subdsaradioinline1">{{'lbl_part_time' |
                                translate}}</label>
                            </div>
                          </div>

                        </div>

                      </div>

                      <form [formGroup]="customFieldForm">
                        <div class="row">
                          <ng-container *ngFor="let controlName of customFieldForm?.controls | keyvalue;let i = index">
                            <div class="col-lg-4 col-md-6 col-sm-12">
                              <div class="form-group">
                                <label>{{ controlName.key | titlecase }}</label>
                                <ng-container *ngIf="hints[i]">
                                  <a class="systooltip"><i class="fa fa-info-circle w-4 h-4 ml-1"
                                      style="margin-top:4px"></i>
                                    <span class="tooltiptext">{{hints[i]
                                      }}</span>
                                  </a>
                                </ng-container>
                                <input class="form-control" [formControlName]="controlName.key" type="text">
                              </div>
                            </div>
                          </ng-container>
                        </div>
                      </form>
                    </ng-template>
                  </div>
                </div>
              </div>
              <div>
                <h2>{{ 'lbl_address' | translate}}</h2>
                <div class="form-group">
                  <label for="label">{{ 'lbl_current_address' | translate}} <span style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="label" formControlName="label"
                    placeholder="{{'lbl_type_here'| translate}}" required>
                  <mat-error
                    *ngIf="(dsaform.get('label') && !dsaform.get('label')?.valid && dsaform.get('label')?.touched)">
                    {{ 'message_lbl_company_name_is_required is required' | translate}}
                  </mat-error>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="addressLine1">{{ 'lbl_address_line1' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="addressLine1" formControlName="addressLine1"
                      placeholder="{{'lbl_type_here'| translate}}" name="addressLine1" required />
                    <mat-error
                      *ngIf="(dsaform.get('addressLine1') && !dsaform.get('addressLine1')?.valid && dsaform.get('addressLine1')?.touched)">
                      {{ 'message_lbl_address_line_1_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="addressLine2">{{ 'lbl_address_line_2' | translate}}</label>
                    <input class="form-control" type="text" id="addressLine2" formControlName="addressLine2"
                      placeholder="{{'lbl_type_here'| translate}}" name="addressLine2" />
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <label for="pincode">{{ 'lbl_pincode' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="pincode" formControlName="pincode"
                      placeholder="{{'lbl_type_here'| translate}}" maxlength="6" onlyNumbers
                      (keyup)="onKeyUpEvent($event,true)" required>
                    <mat-error
                      *ngIf="(dsaform.get('pincode') && !dsaform.get('pincode')?.valid && dsaform.get('pincode')?.touched)">
                      {{ 'message_lbl_pincode_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-lg-6">
                    <label for="cityId">{{ 'lbl_city' | translate}} <span style="color: red;">*</span></label>
                    <ng-select [items]="cities" class="js-example-basic-single p-0"
                      placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name" bindValue="id"
                      formControlName="cityId" name="cityId"></ng-select>
                    <mat-error
                      *ngIf="(dsaform.get('cityId') && !dsaform.get('cityId')?.valid && dsaform.get('cityId')?.touched)">
                      {{ 'message_lbl_city_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <label for="districtName">{{ 'lbl_district' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="districtName" formControlName="districtName" required
                      [disabled]="true">
                    <mat-error
                      *ngIf="(dsaform.get('districtName') && !dsaform.get('districtName')?.valid && dsaform.get('districtName')?.touched)">
                      {{ 'message_lbl_district_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-lg-6">
                    <label for="state">{{ 'lbl_state' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="state" formControlName="state" required
                      [disabled]="true">
                    <mat-error
                      *ngIf="(dsaform.get('state') && !dsaform.get('state')?.valid && dsaform.get('state')?.touched)">
                      {{ 'message_lbl_state_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
              </div>


              <div>
                <h2>{{ 'lbl_business_details' | translate}}</h2>
                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <label for="companyName">{{ 'lbl_company_name' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="companyName" formControlName="companyName"
                      placeholder="{{ 'placeholder_lbl_enter_your_company_name' |translate}}"
                      (keypress)="keyPressAlpha($event)" required>
                    <mat-error
                      *ngIf="(dsaform.get('companyName') && !dsaform.get('companyName')?.valid && dsaform.get('companyName')?.touched)">
                      {{ 'message_lbl_company_name_is_required is required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-lg-6">
                    <label for="profession">{{ 'lbl_profession' | translate}} <span style="color: red;">*</span></label>
                    <ng-select [items]="professions" class="js-example-basic-single p-0"
                      placeholder="{{ 'placeholder_lbl_select_profession' |translate}}" bindLabel="name" bindValue="id"
                      name="professionTypeId" formControlName="professionTypeId"></ng-select>
                    <mat-error
                      *ngIf="(dsaform.get('professionTypeId') && !dsaform.get('professionTypeId')?.valid && dsaform.get('professionTypeId')?.touched)">
                      {{ 'add_dsa_message_lbl_profession_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <label for="businessName">{{ 'lbl_business_name' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="gender" formControlName="businessName"
                      placeholder="{{ 'placeholder_lbl_enter_your_business_name' |translate}}"
                      (keypress)="keyPressAlpha($event)" required>
                    <mat-error
                      *ngIf="(dsaform.get('businessName') && !dsaform.get('businessName')?.valid && dsaform.get('businessName')?.touched)">
                      {{ 'messsage_lbl_business_name_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-lg-6">
                    <label for="gstNo">{{ 'lbl_gst_no' | translate}} </label>
                    <input class="form-control" type="text" id="gstNo" formControlName="gstNo"
                      placeholder="{{ 'placeholder_lbl_enter_your_gst_no' |translate}}" maxlength="15"
                      oninput="this.value = this.value.toUpperCase()" required>
                    <mat-error
                      *ngIf="(dsaform.get('gstNo') && !dsaform.get('gstNo')?.valid && dsaform.get('gstNo')?.touched)">
                      {{ 'add_dsa_message_lbl_gst_no_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-lg-4">
                    <label for="businessName">{{ 'lbl_label' | translate}}</label>
                    <input class="form-control" type="text" formControlName="businessAddress">
                  </div>
                  <div class="form-group col-lg-4">
                    <label for="businessName">{{ 'lbl_address_line1' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" formControlName="businessAddressLine1" required>
                    <mat-error
                      *ngIf="(dsaform.get('businessAddressLine1') && !dsaform.get('businessAddressLine1')?.valid && dsaform.get('businessAddressLine1')?.touched)">
                      {{ 'add_dsa_message_lbl_addressline1_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-lg-4">
                    <label for="businessAddressLine2">{{ 'lbl_address_line_2' | translate}}</label>
                    <input class="form-control" type="text" formControlName="businessAddressLine2">
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-lg-6">
                    <label for="businessName">{{ 'lbl_pincode' | translate}} <span style="color: red;">*</span></label>
                    <input class="form-control" type="text" formControlName="businessAddressPincode" required onlyNumber
                      maxlength="6" (keyup)="onKeyUpEvent($event,true,'business')">
                    <mat-error
                      *ngIf="(dsaform.get('businessAddressPincode') && !dsaform.get('businessAddressPincode')?.valid && dsaform.get('businessAddressPincode')?.touched)">
                      {{ 'message_lbl_pincode_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col-lg-6">
                    <label for="cityId">{{ 'lbl_city' | translate}} <span style="color: red;">*</span></label>
                    <ng-select [items]="businessAddressCities" class="js-example-basic-single p-0"
                      placeholder="{{ 'lbl_select_city' |translate}}" bindLabel="name" bindValue="id"
                      formControlName="workAddressCityId" name="cityId"></ng-select>
                    <mat-error
                      *ngIf="(dsaform.get('workAddressCityId') && !dsaform.get('workAddressCityId')?.valid && dsaform.get('workAddressCityId')?.touched)">
                      {{ 'message_lbl_city_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>

                <div class="form-row">
                  <div class="form-group col-md-2">
                    <label for="haveOffice">{{ 'lbl_have_office' | translate}} <span
                        style="color: red;">*</span></label>
                    <div>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" id="radioinline1" type="radio" value="1" name="haveOffice"
                          formControlName="haveOffice">
                        <label class="form-check-label" for="radioinline1">{{ 'lbl_yes' | translate}}</label>
                      </div>
                      <div class="form-check form-check-inline">
                        <input class="form-check-input" id="radioinline2" type="radio" value="2" name="haveOffice"
                          formControlName="haveOffice">
                        <label class="form-check-label" for="radioinline2">{{ 'lbl_no' | translate}}</label>
                      </div>
                    </div>
                    <mat-error
                      *ngIf="(dsaform.get('haveOffice') && !dsaform.get('haveOffice')?.valid && dsaform.get('haveOffice')?.touched)">
                      {{ 'add_dsa_message_lbl_have_office_is_required' | translate}}
                    </mat-error>
                  </div>
                  <div class="form-group col">
                    <label for="workExperience">{{ 'add_dsa_experience_in_finance_industry_in_years' | translate}} <span
                        style="color: red;">*</span></label>
                    <input class="form-control" type="text" id="workExperience" formControlName="workExperience"
                      placeholder="{{ 'placeholder_lbl_enter_your_work_experience' |translate}}"
                      (keypress)="keyPressNumbers($event)" required>
                    <mat-error
                      *ngIf="(dsaform.get('workExperience') && !dsaform.get('workExperience')?.valid && dsaform.get('workExperience')?.touched)">
                      {{ 'add_dsa_message_lbl_work_experience_is_required' | translate}}
                    </mat-error>
                  </div>
                </div>
              </div>

              <div>
                <h2>{{ 'lbl_other_detail' |translate}}</h2>
                <div class="form-group">
                  <label for="commitment">{{ 'lbl_business_commitment_in_amount' | translate}} <span
                      style="color: red;">*</span></label>
                  <input class="form-control" type="text" id="commitment" formControlName="commitment"
                    placeholder="{{ 'placeholder_lbl_enter_your_commitment' |translate}}"
                    (keypress)="keyPressNumbers($event)" required>
                  <mat-error
                    *ngIf="(dsaform.get('commitment') && !dsaform.get('commitment')?.valid && dsaform.get('commitment')?.touched)">
                    {{ 'message_lbl_business_commitment_is_required' | translate}}
                  </mat-error>
                </div>
              </div>

              <div>
                <h2>{{ 'lbl_bank_detail' | translate}}</h2>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="accountHolderName">{{ 'lbl_account_holder_name' | translate}}</label>
                    <input class="form-control" type="text" id="accountHolderName" formControlName="accountHolderName"
                      placeholder="{{'lbl_type_here'| translate}}" onlyAlphabets>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="bankId">{{ 'lbl_bank' | translate}}</label>
                    <ng-select [items]="banks" class="js-example-basic-single p-0"
                      placeholder="{{'lbl_select_bank'| translate}}" bindLabel="name" bindValue="id" name="bankId"
                      formControlName="bankId"></ng-select>
                  </div>
                </div>
                <div class="form-row">
                  <div class="form-group col-md-6">
                    <label for="accountNo">{{ 'lbl_account_no' | translate}}</label>
                    <input class="form-control" type="text" id="accountNo" formControlName="accountNo"
                      placeholder="{{'lbl_type_here'| translate}}" onlyNumbers>
                  </div>
                  <div class="form-group col-md-6">
                    <label for="ifscCode">{{ 'lbl_ifsc_code' | translate}}</label>
                    <input class="form-control" type="text" id="ifscCode" formControlName="ifscCode"
                      placeholder="{{'lbl_type_here'| translate}}" (keypress)="keyPressAlphanumeric($event)"
                      oninput="this.value = this.value.toUpperCase()">
                  </div>
                </div>
              </div>

              <div class="modal-footer">
                <button type="submit" (click)="insertDsa()" class="btn btn-sm btn-info filterbtn">
                  {{ 'button_lbl_save' | translate}}
                </button>
                <button type="reset" (click)="cancelUser()" class="btn btn-sm btn-secondary filterbtn">
                  {{ 'button_lbl_cancel' | translate}}
                </button>
              </div>
            </form>
          </div>
        </div>
      </mat-drawer-container>
    </div>
  </div>
</div>