<!-- Flex container -->
<div class="flex" style="overflow: hidden">
  <!-- Centered container -->
  <div class="m-auto kick-motto">
    <div *ngIf="isLoading" class="loading-spinner-correct">
      <app-loading-spinner></app-loading-spinner>
    </div>
    <div *ngIf="isAuthenticated" style="margin-top: 100%">
      <app-score-table></app-score-table>
    </div>
    <!-- Material card -->
    <div *ngIf="!isAuthenticated">
      <mat-card
        class="mat-mdc-card_noshadow default-background-color"
        *ngIf="!isLoading"
      >
        <!-- Card image -->
        <header-lsr></header-lsr>
        <!-- Card content -->
        <mat-card-content>
          <!-- Login form -->
          <form [formGroup]="loginForm" (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="loginForm.get('email')?.hasError('required')"
                >Die E-Mail-Adresse wird benötigt.
              </mat-error>
              <mat-error *ngIf="loginForm.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="custom-form-field">
              <mat-label>Passwort</mat-label>
              <input
                [type]="hide ? 'password' : 'text'"
                matInput
                formControlName="password"
                placeholder="Eingabe"
              />
              <mat-error *ngIf="loginForm.get('password')?.hasError('required')"
                >Ein Passwort wird benötigt.</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>

            <!-- Card footer with sign-up link -->
            <mat-card-footer class="m-auto">
              <a routerLink="/login">Login ohne Passwort!</a>
            </mat-card-footer>

            <!-- Card footer with sign-up link -->
            <mat-card-footer class="m-auto margin-top-correct">
              <a routerLink="/signup">Kein Konto? Registriere dich jetzt!</a>
            </mat-card-footer>

            <!-- Card footer with reset-password link -->
            <mat-card-footer class="m-auto margin-top-correct">
              <a routerLink="/reset-password">Passwort vergessen?</a>
            </mat-card-footer>

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