<div class="session mat-indigo">
  <div class="session-content">
    <div class="session-wrapper">
      <mat-card>
        <mat-card-content>
          <form [formGroup]="form">
            <div class="text-xs-center pb-1">
            </div>
            <div fxLayout="column" fxLayoutAlign="space-around">
              <div class="pb-1">
                <mat-form-field style="width: 100%">
                  <input matInput placeholder="لطفا شماره همراه خود را وارد کنید " formControlName="mobileCtrl">
                </mat-form-field>
                <div [hidden]="mobileCtrl.valid || mobileCtrl.untouched">
                  <div [hidden]="mobileCtrl.valid">
                    {{mobileCtrl.getError("error") ? mobileCtrl.getError("error") :
                    ' لطفا شماره همراه خود را وارد کنید'}}
                  </div>
                </div>
              </div>
              <div class="pb-1" *ngIf="showSms">
                <mat-form-field style="width: 100%">
                  <input matInput type="password" placeholder=" کدارسالی" formControlName="passwordCtrl">
                </mat-form-field>
                <div [hidden]="passwordCtrl.valid || passwordCtrl.untouched">
                  <div [hidden]="passwordCtrl.valid">
                    {{passwordCtrl.getError("error") ? passwordCtrl.getError("error")
                    : 'لطفا کد ارسال شده را وارد کنید '}}
                  </div>
                </div>
                <div class="pb-1">
                  <mat-checkbox [(ngModel)]="remember" [ngModelOptions]="{standalone: true}">مرا بخاطر بسپار
                  </mat-checkbox>
                </div>
              </div>
              <button *ngIf="showSms === false" mat-raised-button color="primary" type="submit"
                      (click)="mobileExists()">ارسال
              </button>
              <button *ngIf="showSms === true" mat-raised-button color="primary" type="submit"
                      (click)="onSubmit()">ارسال
              </button>
            </div>
            <div class="pt-1 pb-1 text-xs-center">
              <a [routerLink]="['/auth/passwordSignin']">ورود با رمز عبور </a><br>
              <div *ngIf="showTime">
                <div *ngIf="timer ; then timeleft  ; else receiveCode"></div>
                <ng-template #receiveCode>
                  <a (click)="receiveData()">دریافت مجدد کد </a>
                </ng-template>
                <ng-template #timeleft>
                  <p>لطفا بعد از گذشت {{timeLeft}}ثانیه دوباره تلاش کنید </p>
                </ng-template>
              </div>

            </div>
            <div class="my-container">
              <!--              <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>-->
            </div>
          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>
