gameyfin/frontend/src/app/components/library-overview/library-overview.component.html

<div fxFlexFill>
  <div class="fullscreen-overlay" *ngIf="this.loading" fxLayout="column" fxLayoutAlign="center center">
    <mat-spinner></mat-spinner>
    <h2>Loading library...</h2>
  </div>

  <div *ngIf="!this.loading && this.gameLibraryIsEmpty" fxFlex fxLayout="column" fxLayoutAlign="center center"
       style="height: calc(100vh - 64px)">
    <div class="library-management-hint" fxLayout="column" fxLayoutAlign="start end">
      <mat-icon fontSet="material-icons-outlined">north_east</mat-icon>
      <p>Use the library management to scan your file system for games</p>
    </div>

    <div fxLayout="column" fxLayoutAlign="center center">
      <mat-icon fontSet="material-icons-outlined" color="primary"
                style="font-size: 128px; height: 128px; width: 128px;">videogame_asset_off
      </mat-icon>
      <h1>Your game library is empty!</h1>
    </div>
  </div>

  <div class="content" fxLayout="row" fxLayout.lt-lg="column" fxFlexFill="100"
       *ngIf="!this.loading && !this.gameLibraryIsEmpty">
    <div fxFlex="10" fxHide fxShow.gt-md><!--SPACER--></div>

    <div fxFlex.gt-md="0 1 15" fxLayout="column" fxLayoutGap="16px" fxLayoutAlign.lt-lg="start center"
         fxFlex.lt-lg="100" [ngClass.gt-md]="'sticky'">

      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="6px" class="mat-card-48">
        <button mat-icon-button *ngIf="searchTerm.length > 0" matTooltip="Clear search input"
                (click)="clearSearchTerm()">
          <mat-icon>close</mat-icon>
        </button>

        <button mat-icon-button *ngIf="searchTerm.length === 0" matTooltip="Search for games by title">
          <mat-icon>search</mat-icon>
        </button>

        <mat-form-field fxFlex>
          <input type="text" matInput [matAutocomplete]="librarySearchAutocomplete" [(ngModel)]="searchTerm"
                 (ngModelChange)="refreshLibraryView()">
          <mat-autocomplete #librarySearchAutocomplete="matAutocomplete">
            <mat-option *ngFor="let game of games" [value]="game.title">
              {{game.title}}
            </mat-option>
          </mat-autocomplete>
        </mat-form-field>
      </mat-card>

      <mat-card fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="20px" class="mat-card-48">
        <h3 class="filter-category-title" style="white-space: nowrap; padding-left: 6px">Sort by: </h3>
        <mat-select [(value)]="selectedSortOption" (valueChange)="refreshLibraryView()">
          <mat-option *ngFor="let sortOption of sortOptions" [value]="sortOption">
            {{sortOption.title}}
          </mat-option>
        </mat-select>
      </mat-card>

      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title fxLayout="row" fxLayoutAlign="start start" fxLayoutGap="6px">
            <h3 class="filter-category-title">Gamemodes</h3>
            <mat-icon matTooltip="Filter may not work correctly, working on a fix" color="warn">error</mat-icon>
          </mat-panel-title>
        </mat-expansion-panel-header>

        <div fxLayout="column">
          <mat-checkbox [(ngModel)]="offlineCoopFilterEnabled" (change)="refreshLibraryView()" color="primary">Offline
            Co-op
          </mat-checkbox>
          <mat-checkbox [(ngModel)]="onlineCoopFilterEnabled" (change)="refreshLibraryView()" color="primary">Online
            Co-op
          </mat-checkbox>
          <mat-checkbox [(ngModel)]="lanSupportFilterEnabled" (change)="refreshLibraryView()" color="primary">LAN
            Support
          </mat-checkbox>
        </div>
      </mat-expansion-panel>

      <mat-expansion-panel *ngIf="availableGenres.length > 0">
        <mat-expansion-panel-header>
          <h3 class="filter-category-title">Genres</h3>
        </mat-expansion-panel-header>

        <div fxLayout="column">
          <mat-checkbox *ngFor="let genre of availableGenres" (change)="toggleGenreFilter(genre.slug)"
                        [checked]="activeGenreFilters.includes(genre.slug)"
                        color="primary">{{genre.name}}</mat-checkbox>
        </div>
      </mat-expansion-panel>

      <mat-expansion-panel *ngIf="availableThemes.length > 0">
        <mat-expansion-panel-header>
          <h3 class="filter-category-title">Themes</h3>
        </mat-expansion-panel-header>

        <div fxLayout="column">
          <mat-checkbox *ngFor="let theme of availableThemes" (change)="toggleThemeFilter(theme.slug)"
                        [checked]="activeThemeFilters.includes(theme.slug)"
                        color="primary">{{theme.name}}</mat-checkbox>
        </div>
      </mat-expansion-panel>

      <mat-expansion-panel *ngIf="availablePlayerPerspectives.length > 0">
        <mat-expansion-panel-header>
          <h3 class="filter-category-title">Player Perspectives</h3>
        </mat-expansion-panel-header>

        <div fxLayout="column">
          <mat-checkbox *ngFor="let playerPerspective of availablePlayerPerspectives" (change)="togglePlayerPerspectiveFilter(playerPerspective.slug)"
                        [checked]="activePlayerPerspectiveFilters.includes(playerPerspective.slug)"
                        color="primary">{{playerPerspective.name}}</mat-checkbox>
        </div>
      </mat-expansion-panel>
    </div>

    <div fxFlex="0 1 1"><!--SPACER--></div>

    <div fxFlex fxLayout="row wrap" fxLayoutGap="16px grid">
      <div *ngFor="let game of games">
        <game-cover [game]="game"></game-cover>
      </div>
    </div>

    <div fxFlex="0 1 10" fxHide fxShow.gt-lg><!--SPACER--></div>
  </div>
</div>