<div class="form-container">
  <h1>Formulaire d'inscription :</h1>

  <mat-form-field class="form-field">
    <mat-label>Enter your email</mat-label>
    <input
      matInput
      placeholder="pat@example.com"
      [formControl]="email"
      (blur)="updateErrorMessage()"
      required />
    <mat-error *ngIf="email.invalid">{{ errorMessage }}</mat-error>
  </mat-form-field>

  <mat-form-field class="form-field">
    <mat-label>Enter your login</mat-label>
    <input
      matInput
      placeholder="pat"
      [formControl]="login"
      (blur)="updateErrorMessage()"
      required />
    <mat-error *ngIf="login.invalid">{{ errorMessage }}</mat-error>
  </mat-form-field>

  <mat-form-field class="form-field">
    <mat-label>Enter your password</mat-label>
    <input
      matInput
      [type]="hide ? 'password' : 'text'"
      [formControl]="password"
      (blur)="updateErrorMessage()"
      required />
    <button
      mat-icon-button
      matSuffix
      (click)="hide = !hide"
      [attr.aria-label]="'Hide password'"
      [attr.aria-pressed]="hide">
      <mat-icon>{{ hide ? 'visibility_off' : 'visibility' }}</mat-icon>
    </button>
    <mat-error *ngIf="password.invalid">{{ errorMessage }}</mat-error>
  </mat-form-field>

  <button
    mat-flat-button
    color="primary"
    (click)="register()"
    [disabled]="email.invalid || login.invalid || password.invalid">
    Créer un compte
  </button>

  <!-- Message de retour de l'inscription -->
  <div *ngIf="successRegister" class="success-message">
    {{ successRegister }}
  </div>
  <div *ngIf="errorRegister" class="error-message">
    {{ errorRegister }}
  </div>
</div>
