<div class="page-wrap h-full slate">
  <div class="session-form-hold">
    <mat-progress-bar mode="determinate" class="session-progress"></mat-progress-bar>
    <mat-card>
      <mat-card-content>
        <div class="text-center pt-8 pb-16">
          <img width="60px" src="assets/images/logo.png" alt="" class="mb-8">
           <h2>Lets get started</h2>
          <p class="text-muted m-0">Sign up to use our service</p>
        </div>
        <form [formGroup]="signupForm"  (ngSubmit)="signup()">
          <div class="">
            <mat-form-field class="full-width">
              <input
                matInput
                type="email"
                name="email"
                [formControl]="signupForm.controls['email']"
                placeholder="Your Email"
                value="">
            </mat-form-field>
            <small 
              *ngIf="signupForm.controls['email'].hasError('required') && signupForm.controls['email'].touched" 
              class="form-error-msg"> Email is required </small>

              <small 
                *ngIf="signupForm.controls['email'].hasError('email') && signupForm.controls['email'].touched" 
                class="form-error-msg"> Invaild email address </small>
          </div>

          <div class="">
            <mat-form-field class="full-width">
              <input 
                type="password"
                name="password"
                matInput
                [formControl]="signupForm.controls['password']"
                placeholder="Password" 
                value="">
            </mat-form-field>
            <small 
              *ngIf="signupForm.controls['password'].hasError('required') && signupForm.controls['password'].touched" 
              class="form-error-msg"> Password is required </small>
          </div>
          
          <div class="pb-16">
            <mat-checkbox
              name="agreed"
              [formControl]="signupForm.controls['agreed']"
              class="pb-16">I have read and agree to the terms of service.</mat-checkbox>

              <small 
                *ngIf="signupForm.controls['agreed'].hasError('agreed') && signupForm.controls['agreed'].touched" 
                class="form-error-msg"> You must agree to the terms and conditions </small>
          </div>

          <button mat-raised-button class="mat-primary full-width mb-16" [disabled]="signupForm.invalid">Sign up</button>
          <div class="text-center">
            <a [routerLink]="'/sessions/signin'" class="text-center full-width">Sign in to existing account</a>
          </div>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>
