<div class="signup3-wrap">
  <div
    class="signup3-form-holder mat-bg-default mat-elevation-z4 py-48"
    [perfectScrollbar]
    [@animate]="{value:'*',params:{y: '40px',opacity:'0',delay:'100ms', duration: '400ms'}}"
  >
    <!-- headline -->
    <div class="form-headline text-center mb-32">
      <h1 class="font-weight-light">Sign in to your account</h1>
    </div>
    <div class="mb-32" fxLayout="row wrap" fxLayoutAlign="center center">
      <img
        width="200px"
        src="assets/images/illustrations/breaking_barriers.svg"
        alt=""
      />
    </div>

    <form [formGroup]="signupForm" class="signup3-form" (ngSubmit)="onSubmit()">
      <div>
        <mat-form-field class="full-width" appearance="outline">
          <mat-label>Username</mat-label>
          <input
            matInput
            formControlName="username"
            type="text"
            name="username"
            placeholder="Username"
          />
        </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>
      </div>
      <div class="mb-24">
        <button fxFill mat-raised-button color="primary">Sign In</button>
      </div>
      <p>
        Don't have an account?
        <a
          class="mat-color-primary font-weight-bold mx-8"
          routerLink="/sessions/signup3"
          >Sign Up</a
        >
      </p>
    </form>
  </div>
</div>
