<div class="seciton-left">
  <div class="section-left-content">
    <h1 class="text-36 font-weight-light">Don't have an account?</h1>
    <p class="mb-24 text-small">Stop wasting time and money. It's free!</p>
    <button mat-flat-button color="accent" [routerLink]="'/sessions/signup2'">Sign Up</button>
  </div>
</div>


<div class="form-holder h-full-screen mat-bg-card mat-elevation-z4" [perfectScrollbar]="{}">
  <form
    [formGroup]="signupForm"
    class="signup-form"
    fxLayout="column"
    (ngSubmit)="onSubmit()"
  >
    <!-- headline -->
    <div class="form-headline text-center mb-32">
      <h1 class="font-weight-light">Sign in to your account</h1>
    </div>
    <div class="mb-48" fxLayout="row wrap" fxLayoutAlign="center center">
      <img
        width="200px"
        src="assets/images/illustrations/breaking_barriers.svg"
        alt=""
      />
    </div>

    <mat-form-field class="full-width" appearance="outline">
      <mat-label>Email</mat-label>
      <input
        matInput
        formControlName="email"
        type="email"
        name="email"
        placeholder="Email"
      />
    </mat-form-field>

    <mat-form-field class="full-width" appearance="outline">
      <mat-label>Password</mat-label>
      <input
        matInput
        formControlName="password"
        type="password"
        name="password"
        placeholder="********"
      />
    </mat-form-field>

    <mat-checkbox class="mb-24" formControlName="agreed"
      >I agree with terms and condtions</mat-checkbox
    >
    <button  mat-raised-button color="primary">Signin</button>
    <mat-divider class="my-32"></mat-divider>

    <div class="mb-24" fxLayout="column" fxLayoutGap="16px">
      <button mat-raised-button color="warn" type="button">
        Signin with Auth0
      </button>
      <button mat-raised-button color="warn" type="button">Firebase Signin</button>
    </div>

    <!-- <div class="text-center">
      <a
        [routerLink]="'/sessions/signup2'"
        class="mat-color-primary text-center full-width"
        >Sign up</a
      >
    </div> -->
  </form>
</div>
