<card [title]="'Create your account'" [align]="'center'">
  <form [formGroup]="form" (ngSubmit)="onSubmit()">
    <md-input-container>
      <input mdInput placeholder="Email address" [formControl]="form.controls['email']" type="email">
      <br />
      <small *ngIf="form.controls['email'].hasError('required') && form.controls['email'].touched"
             class="form-message text-danger">You must include an email address.
      </small>
      <small *ngIf="form.controls['email'].errors?.email && form.controls['email'].touched"
             class="form-message text-danger">You must include a valid email address.
      </small>
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Password" [formControl]="form.controls['password']" type="password">
      <br />
      <small *ngIf="form.controls['password'].hasError('required') && form.controls['password'].touched"
             class="form-message text-danger">You must include password.
      </small>
    </md-input-container>
    <md-input-container>
      <input mdInput placeholder="Confirm Password" [formControl]="form.controls['confirmPassword']" type="password">
      <br />
      <small *ngIf="form.controls['confirmPassword'].hasError('required') && form.controls['confirmPassword'].touched"
             class="form-message text-danger">You must include confirm password.
      </small>
      <small *ngIf="form.controls['confirmPassword'].errors?.equalTo" class="form-message text-danger">Passwords do not
        math.
      </small>
    </md-input-container>

    <div class="row">
      <div class="col col-12">
        <md-radio-group formGroup="companyMethod">
          <md-radio-button class="example-margin" name="user"  [value]=false (click)="setUserOrCompanyMethodType(TestMethodType.User)">User
              {{TestMethodType.user}}
          </md-radio-button>
          <md-radio-button class="example-margin" name="company" [value]=true (click)="setUserOrCompanyMethodType(TestMethodType.Company)">Company
            {{TestMethodType.company}}
          </md-radio-button>
        </md-radio-group>
      </div>
    </div>

  <div class="row" formGroup="user" *ngIf="form.controls.companyMethod.controls.type.value === TestMethodType.User">
      <div class="col col-12">
        <md-input-container>
            <input type="text" mdInput placeholder="Name Company" [formControl]="form.controls['companyName']" formControlName="companyName">
          </md-input-container>
          <md-input-container>
              <input type="text" mdInput placeholder="Address" [formControl]="form.controls['companyAddress']">
          </md-input-container>
          <md-input-container>
              <input type="text" mdInput placeholder="Phone" [formControl]="form.controls['companyPhone']">
          </md-input-container>
      </div>
    </div>
    <div class="row" formGroup="company" *ngIf="form.controls.companyMethod.controls.type.value === TestMethodType.Company" >
        <div class="col col-12">
          <md-input-container>
            <input type="text" mdInput placeholder="Name Company" [formControl]="form.controls['companyName']" formControlName="companyName">
            <small *ngIf="!form.controls.companyMethod.controls.company.controls.companyName.valid">
            required
            </small>
          </md-input-container>
          <md-input-container>
              <input type="text" mdInput placeholder="Address" [formControl]="form.controls['companyAddress']" formControlName="companyAddress">
              <small *ngIf="!form.controls.companyMethod.controls.company.controls.companyAddress.valid">
              required
              </small>
          </md-input-container>
          <md-input-container>
            <input type="text" mdInput placeholder="Phone" [formControl]="form.controls['companyPhone']" formControlName = "companyPhone">
            <small *ngIf="!form.controls.companyMethod.controls.company.controls.companyPhone.valid">
              required
            </small>
            </md-input-container>
      </div>
    </div>
    <div>
      <md-checkbox [formControl]="form.controls['agreeWithTerms']">
        I have read and agree to the terms of service.
      </md-checkbox>
      <br />
      <small *ngIf="form.controls['agreeWithTerms'].hasError('required') && form.controls['agreeWithTerms'].touched"
            class="form-message text-danger">You must include an email address.
      </small>
    </div>

      <button md-raised-button color="accent" type="submit" [disabled]="(!form.valid)">Submit</button>


    <div class="additional-info">
      Already have an account?
      <a routerLink="/account/signin">Sign in</a>
    </div>
  </form>
</card>