<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">
              <!--<img src="assets/images/logo-dark.svg" alt=""/>-->
              <!--یه توضیحی در مورد روند کار اینجا بنویس -->
              <p class="mat-text-muted">لطفا ایمیل یا موبایل خود را وارد کنید </p>
            </div>
            <div  fxLayout="column"  fxLayoutAlign="space-around">
              <div class="pb-1">
                <mat-form-field style="width: 100%">
                  <input matInput placeholder="لطفا username خود را وارد کنید"  type="email"  formControlName="usernameCtrl">
                </mat-form-field>
                <div [hidden]="usernameCtrl.valid || usernameCtrl.untouched">
                  <div [hidden]="usernameCtrl.valid">
                    {{usernameCtrl.getError("error")? usernameCtrl.getError("error") : 'لطفا شماره همراه خود را وارد کنید '}}
                  </div>
                </div>
              </div>
              <button mat-raised-button color="primary"  (click)="onSubmit()" [disabled]="!form.valid">ارسال</button>
            </div>
            <div class="pt-1 pb-1 text-xs-center">
              <a [routerLink]="['/auth/signin']">بازگشت به صفحه ی لاگین </a>
              <a [routerLink]="['/auth/signup']">ثبت نام</a>
            </div>
            <div class="my-container">
              <ngx-loading [show]="loading" [config]="{ backdropBorderRadius: '14px' }"></ngx-loading>
            </div>
          </form>
        </mat-card-content>
      </mat-card>
    </div>
  </div>
</div>

