<ion-content>
  <div class="head-title">

    <app-generic-header showImage="false" showBack="true" [headerText]="'general,contact' | translate">
    </app-generic-header>
  </div>
  <div class="header"></div>
  <div class="bottom"></div>
<div class="container" id="containerDiv">
  <ion-card class="add-new-row-card">
    <div class="new-row" (click)="addNewRow()"> 
      <p>
     <img class="add-icons" src="assets/imgs/itemsforsale/add.svg">   {{ts.trPK('general','add-new-row')}}
    
      </p>
    </div>
  </ion-card>
  <div class="" *ngFor="let phone of phoneNumbers">
<ion-card class="phoneContainer" *ngIf="!phone['DELETE_ROW']">
  <ion-row >
    <ion-col size="12">
        <div [ngClass]=" direction === 'en' ?  'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
 
  <label class="label" position='floating'  class="colBold requiredClass">{{ 'general,select' | translate}} </label>
  <select name="selectAbsenceType" class="label-Select"  #selectAbsenceType="ngModel" [(ngModel)]="phone.PHONE_TYPE"   required> 
    <option value="noType" selected hidden selected><p>{{ts.trPK('absenceList','selectType')}}</p></option>
      <option  *ngFor="let obj of objectValue" [value]="obj.CODE">{{ obj.MEANING}} </option>
  </select>
  </div>
</ion-col>
<ion-col size="12">
  <div [ngClass]=" direction === 'en' ?  'custom-text-area-element Field-en' : 'custom-text-area-element Field-ar'" >
 
    <ion-input  class="login-input" required type="tel"  [(ngModel)]="phone.PHONE_NUMBER">
    </ion-input>
    </div>
    </ion-col>
    <div class="delete-icon" (click)="deleteRow(phone)">
      <p><img class="icons-delete" src="assets/imgs/itemsforsale/delete.svg">  {{ts.trPK('general','delete')}}</p>
    </div>
  </ion-row>
</ion-card>
</div>
</div>
  </ion-content>
  <ion-footer>
    <div class="centerDiv">
      <ion-button  class="footer-button" style="background: var(--newgreen)!important;border-radius: 10px;    --background: transparent; width:80%" ion-button [disabled]="phoneNumbers.length==0" (click)="updatePhone()">
        {{'userProfile, update' | translate}}</ion-button>
        
    </div>
  </ion-footer>
  