<app-header></app-header>
<!-- Flex container -->
<div class="flex">
  <!-- Centered container -->
  <div class="center-container">
    <div class="btn-header">
      <mat-slide-toggle
        #slideToggle
        [(ngModel)]="showUserGames"
        (click)="setPageSize()"
        [class.atos-company]="isCompanyAtos()"
      ></mat-slide-toggle>

      <!-- Bestenliste/Deine Spiele as an h1 element -->
      <h1 *ngIf="!showUserGames" class="bestenliste-text">
        iWuzzler Bestenliste
      </h1>
      <h1 *ngIf="showUserGames" class="bestenliste-text">Deine Spiele</h1>

      <button
        [disabled]="showUserGames"
        class="btn-search"
        mat-button
        (click)="toggleSearch()"
      >
        <mat-icon matPrefix>search</mat-icon>
      </button>
    </div>

    <div class="score-table" *ngIf="!showUserGames">
      <app-table-search
        [isSearchActive]="isSearchActive"
        [dataSource]="dataSource"
      ></app-table-search>

      <!--- Table -->
      <div class="mat-elevation-z8">
        <table
          mat-table
          [dataSource]="dataSource"
          aria-label="user-score-table"
        >
          <!-- Position Column -->
          <ng-container matColumnDef="position">
            <th class="center-text" mat-header-cell *matHeaderCellDef>
              Position
            </th>
            <td class="center-text" mat-cell *matCellDef="let element">
              {{ element.rank }}
            </td>
          </ng-container>

          <!-- Name Column -->
          <ng-container matColumnDef="name">
            <th class="center-text" mat-header-cell *matHeaderCellDef>Name</th>
            <td class="center-text" mat-cell *matCellDef="let element">
              {{ element.firstName }} {{ element.lastName }}
            </td>
          </ng-container>

          <!-- Score Column -->
          <ng-container matColumnDef="wins">
            <th class="center-text" mat-header-cell *matHeaderCellDef>Wins</th>
            <td class="center-text" mat-cell *matCellDef="let element">
              {{ element.wins }}
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr
            (click)="goToUserPage(row.uid)"
            mat-row
            *matRowDef="let row; columns: displayedColumns"
          ></tr>
        </table>
        <mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
      </div>
    </div>
    <div class="user-games-table mat-elevation-z8" *ngIf="showUserGames">
      <table
        mat-table
        [dataSource]="dataSourceUserGames"
        aria-label="user-games-table"
      >
        <!-- Date Column -->
        <ng-container matColumnDef="date">
          <th class="center-text" mat-header-cell *matHeaderCellDef>Zeit</th>
          <td class="center-text" mat-cell *matCellDef="let element">
            {{ element.date }}
          </td>
        </ng-container>

        <!-- Score Column -->
        <ng-container matColumnDef="score">
          <th class="center-text" mat-header-cell *matHeaderCellDef>Score</th>
          <td class="center-text" mat-cell *matCellDef="let element">
            {{ element.score }}
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumnsUserGames"></tr>
        <tr
          mat-row
          *matRowDef="let row; columns: displayedColumnsUserGames"
        ></tr>
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" [attr.colspan]="displayedColumns.length">
            <p *ngIf="isUserLoggedIn(); else loggedOut" class="empty-table">
              Keine Spiele gefunden.
            </p>
            <ng-template #loggedOut>
              <p class="empty-table">
                <a routerLink="/login">Logge dich ein</a>, um deine Spiele zu
                sehen. Kein Konto?&nbsp;
                <a routerLink="/signup">Registriere dich jetzt</a>
              </p>
            </ng-template>
          </td>
        </tr>
      </table>
      <mat-paginator [pageSizeOptions]="[10, 25, 50]"></mat-paginator>
    </div>
  </div>
</div>
