<ion-content padding>
  <ion-grid class="customGrid">
    <ion-row *ngIf="!user">
        <div class="content">
            <div class="first-circle"></div>
            <div class="middle-circle"></div>
            <div class="last-circle"></div>
        </div>
    </ion-row>

    <ion-row>
      <ion-col *ngIf="!user">
        <P class="pageTitle text-caps">{{ts.trPK('login','login')}}</P>
      </ion-col>
    </ion-row>
  </ion-grid>

  <div *ngIf="!user">
    <ion-item class="item-input-login">
      <img style="margin: 9px 8px 9px 0 !important;" class="item-icon" src="assets/imgs/username.png" item-start />
      <ion-input class="login-input" required type="text" [(ngModel)]="username" placeholder="{{ts.trPK('login','username')}}">
      </ion-input>
    </ion-item>

    <ion-item class="item-input-login">
      <img style="margin: 9px 8px 9px 0 !important;" class="item-icon" src="assets/imgs/password.png" item-start />
      <ion-input class="login-input" required [type]="inputType" [(ngModel)]="password" placeholder="{{ts.trPK('login','password')}}">
      </ion-input>
      <ion-icon *ngIf='inputType === "text"' name="ios-eye" (click)="showPassword()"></ion-icon>
      <ion-icon *ngIf='inputType === "password"' name="ios-eye-off" (click)="hidePassword()"></ion-icon>
    </ion-item>

    <div class="centerDiv signupDiv" *ngIf="isAppleStore==false">
      <a>{{ts.trPK('login','signup')}}</a>
    </div>
    <div ng class="gridDiv" aria-disabled="true">
      <button  class="gridBtn"  ion-button (click)="changeLanguage('2')" [ngClass]="{'active':currentLang ==2}">English</button>
        <button  class="gridBtn arTxt"  ion-button (click)="changeLanguage('1')" [ngClass]="{'active':currentLang ==1}">عربي</button>
    </div>
  </div>

  

  <!-- <div *ngIf="welcomeBack"> -->
    <welcome-login (onLogin)="login()" (loginWithUser)="loginWithUser()" *ngIf="user ">
    </welcome-login>
  <!-- </div> -->
  
  <div class="centerDiv" style="margin-top: 20px !important;">
    <ion-button [ngClass]="{'disable-button-opacity': isValidForm()}" class="button-login" (click)="onLogin()" [disabled]="isValidForm()" style="width: 100% !important;">{{ts.trPK('login','login')}}</ion-button>

    <!-- digital ID button -->
    <!-- <ion-button *ngIf="userInfo" class="button-digital-id" (click)="openDigitalId()">
      <p style="color: black;">{{ts.trPK('general','digital-id')}}</p> 
      <img [ngClass]=" currentLang === '2' ?  'digital-id-en' : 'digital-id-ar'" src="../assets/imgs/ID_ico.png">
    </ion-button> -->
    
    <br><br>
    <button ion-button clear class="forgetText" type="button"  (click)="forgetPasswordPage()" item-right >
      {{ts.trPK('login','forgot-password')}}
    </button>
  </div>
</ion-content>

<ion-footer *ngIf="!user" [ngStyle]="keyboardOpened === true ? {'display': 'none'} : {}" style="padding: 0px;">
  <ion-row>
      <ion-col class="colPad">
        <img class="centerDiv logoFotor" src="../assets/imgs/CSLogo.png" />
      </ion-col>
  </ion-row>
</ion-footer>