<!-- Flex container -->
<div class="flex">
  <!-- Centered container -->
  <div class="m-auto kick-motto">
    <div *ngIf="isLoading" class="loading-spinner-correct">
      <app-loading-spinner></app-loading-spinner>
    </div>
    <!-- Material card -->
    <mat-card
      class="default-background-color mat-mdc-card_noshadow"
      *ngIf="!isLoading"
    >
      <header-lsr></header-lsr>
      <!-- Card content -->
      <mat-card-content>
        <!-- Sign up form -->
        <form [formGroup]="signUpForm" (ngSubmit)="onSubmit()">
          <!-- Email input field -->
          <mat-form-field appearance="outline" class="custom-form-field">
            <mat-label>Email</mat-label>
            <input
              type="email"
              matInput
              formControlName="email"
              placeholder="@atos.net | @eviden.com"
            />
            <mat-error *ngIf="signUpForm.get('email')?.hasError('required')"
              >Die E-Mail-Adresse wird benötigt.
            </mat-error>
            <mat-error *ngIf="signUpForm.get('email')?.hasError('pattern')">
              Bitte gib deine Firmen-E-Mail lautend auf '&#64;atos.net' oder
              '&#64;eviden.com' an.
            </mat-error>
          </mat-form-field>

          <!-- Password input field -->
          <mat-form-field appearance="outline" class="example-full-width">
            <mat-label>Passwort</mat-label>
            <input
              [type]="hide ? 'password' : 'text'"
              matInput
              formControlName="password"
              placeholder="10-20 Zeichen"
              autocomplete="new-password"
              title="10-20 Zeichen, mind. 1 Großbuchstaben und 1 Zahl."
              (blur)="updateErrorMessage()"
            />
            <mat-error *ngIf="signUpForm.get('password')?.invalid">
              {{ this.errorMessagePassword }}
            </mat-error>
            <!-- Suffix button to toggle visibility -->
            <!-- Add type="button" to prevent form submission when clicking the button -->
            <button
              id="pwVisibility"
              type="button"
              mat-icon-button
              matSuffix
              (click)="hide = !hide"
              [attr.aria-label]="hide ? 'Show password' : 'Hide password'"
              [attr.aria-pressed]="!hide"
            >
              <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
            </button>
          </mat-form-field>

          <!-- Repeat password input field -->

          <mat-form-field appearance="outline" class="example-full-width">
            <mat-label>Passwort bestätigen</mat-label>
            <input
              [type]="hide ? 'password' : 'text'"
              matInput
              formControlName="confirmPassword"
              placeholder="10-20 Zeichen"
              autocomplete="new-password"
              title="10-20 Zeichen, mind. 1 Großbuchstaben und 1 Zahl."
              (blur)="updateErrorMessage()"
            />
            <mat-error *ngIf="signUpForm.get('confirmPassword')?.invalid">
              {{ this.errorMessageConfirmPassword }}
            </mat-error>

            <!-- Suffix button to toggle visibility -->
            <!-- Add type="button" to prevent form submission when clicking the button -->
            <button
              type="button"
              mat-icon-button
              matSuffix
              (click)="hide = !hide"
              [attr.aria-label]="hide ? 'Show password' : 'Hide password'"
              [attr.aria-pressed]="!hide"
            >
              <mat-icon>{{ hide ? "visibility_off" : "visibility" }}</mat-icon>
            </button>
          </mat-form-field>

          <!-- Card footer with login link -->
          <mat-card-footer
            ><a routerLink="/login"
              >Du hast bereits ein Konto? Einloggen.</a
            ></mat-card-footer
          >

          <!-- Card actions with sign up button -->
          <mat-card-actions>
            <button
              mat-button
              class="m-auto blue-buttons disabled-button"
              type="submit"
              [disabled]="!signUpForm.valid"
            >
              REGISTRIEREN
            </button>
          </mat-card-actions>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>
