<ion-content padding>
  <ion-grid class="customGrid">
    <!-- <ion-row>
      <ion-col class="colPad">
        <img class="centerDiv" src="../assets/imgs/header.png" />
      </ion-col>
    </ion-row> -->
    <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 *ngIf="user ">
      <ion-col [size]="4">
          <img [src]="logo" class="logo" />

        <ion-img class="centerDiv" src="../assets/imgs/CS.png"></ion-img>
      </ion-col>
    </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 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 class="item-icon" src="assets/imgs/password.png" item-start />
    <ion-input class="login-input" required type="password" [(ngModel)]="password" placeholder="{{ts.trPK('login','password')}}">
    </ion-input>
    <button ion-button clear class="forgetText" type="button"  (click)="forgetPasswordPage()" item-right >
      {{ts.trPK('login','forgot-password')}}
    </button>

  </ion-item>
  

  <!-- <ion-item>
    <ion-label>{{ts.trPK('login','remeber-me')}}</ion-label>
    <ion-checkbox [(ngModel)]="remeberMe" (ionChange)="addValue($event)" ></ion-checkbox>
  </ion-item> -->

  <div class="centerDiv signupDiv" *ngIf="isAppleStore==false">
    <a>{{ts.trPK('login','signup')}}</a>
  </div>
  <div 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>
    <!-- <button class="gridBtn" ion-button (click)="changeLanguage()" style="background: #dcdcdc !important;color: #ccc6c6 !important;margin: 1px;width: 49%">English</button>
    <button class="gridBtn arTxt" ion-button (click)="changeLanguage()" style="background: #dcdcdc !important;color: #ccc6c6 !important;margin: 1px;width: 49%">عربي</button> -->
  </div>


</div> 
   <!-- div login-->

  <!-- <div *ngIf="welcomeBack"> -->
    <welcome-login (onLogin)="login()" (loginWithUser)="loginWithUser()" *ngIf="user ">
    </welcome-login>
  <!-- </div> -->
  





</ion-content>
<ion-footer *ngIf="!user">
  <div class="centerDiv">
    <ion-button class="button-login" (click)="onLogin()">{{ts.trPK('login','login')}}</ion-button>
  </div>
  <br />
  <!-- <div class="centerDiv">
    <a (click)="forgetPasswordPage()">{{ts.trPK('login','forgot-password')}}</a>
  </div> -->

  <ion-row>
      <ion-col class="colPad">
        <img class="centerDiv logoFotor" src="../assets/imgs/CSLogo.png" />
      </ion-col>
  </ion-row>
</ion-footer>