<h1 mat-dialog-title>Hi </h1>
<form [formGroup]="signUpForm">
<div mat-dialog-content>
  <p>User name</p>
  <mat-form-field class="fillField">
    <input matInput
           formControlName="username"
           [(ngModel)]="data.username"
           minlength="3"
    >
  </mat-form-field>
  <p>Email</p>
  <mat-form-field class="fillField">
    <mat-label>Email</mat-label>
    <input matInput type="email"
           formControlName="email"

           placeholder="Ex. pat@example.com"
           [(ngModel)]="data.email"
           (blur)="updateErrorMessage()"
           required
    >
    @if (emailFormControl.invalid) {
      <mat-error>{{errorMessage()}}</mat-error>
    }
  </mat-form-field>
  <p>Password</p>
  <mat-form-field class="fillField">
    <mat-label>Enter your password</mat-label>
    <input matInput

           formControlName = "password"
           [type]="hide() ? 'password' : 'text'"
           [(ngModel)]="data.password"
           minlength="6"
           required
    />
    <button
      mat-icon-button
      matSuffix
      (click)="clickEvent($event)"
      [attr.aria-label]="'Hide password'"
      [attr.aria-pressed]="hide()"
    >
      <mat-icon>{{hide() ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>
  <p>Confirm password</p>
  <mat-form-field class="fillField">
    <mat-label>Confirm your password</mat-label>
    <input matInput

           formControlName = "confirmPassword"
           [type]="hide() ? 'password' : 'text'"
           [(ngModel)]="data.confirmPassword"
    />
    @if (signUpForm.get("confirmPassword")?.value !== signUpForm.get("password")?.value) {
      <mat-error>Passwords do not match</mat-error>
    }
    <button
      mat-icon-button
      matSuffix
      (click)="clickEvent($event)"
      [attr.aria-label]="'Hide password'"
      [attr.aria-pressed]="hide()"
    >
      <mat-icon>{{hide() ? 'visibility_off' : 'visibility'}}</mat-icon>
    </button>
  </mat-form-field>
</div>

<div mat-dialog-actions>
  <button mat-button (click)="login()">Login</button>
  <span class="menu-spacer"></span>
  <button mat-button mat-dialog-close (click)="onNoClick()">No Thanks</button>
  <button mat-button cdkFocusInitial (click)="signup()">Ok</button>
</div>
</form>
