model-list.component.html

<div class="flex-column">
  <div class="header-container">
    <div>
      <gp-headline [headlineTitle]="headlineTitle"></gp-headline>
    </div>
    <div class="total-items-container">
      <div class="total-items-text">
        <span class="showing-text"
          >Showing -
          <span class="total-items-number">
            {{ calculateStartIndex }} to
            {{ calculateEndIndex }}
            of {{ totalItems }} Models</span
          ></span
        >
      </div>
    </div>

    <div *ngIf="showEntirePage" class="entire-page-button-container">
      <button
        aria-label="Icon button with a menu icon"
        (click)="onClickSeeBackEvent()"
      >
        <div class="back-icon">
          <mat-icon>arrow_back_ios</mat-icon>
          <span>Back</span>
        </div>
      </button>
    </div>
  </div>
  <ng-container *ngIf="solutions; else isLoading">
    <ng-container *ngIf="solutions.length > 0; else noCatalogs">
      <div *ngIf="!viewTile; else gridView">
        <!-- Horizontal list view content -->
        <div class="grid-list">
          <gp-list-item
            [isPublishedSolution]="false"
            [item]="item"
            [items]="solutions"
            [isMarketPlacePage]="true"
            *ngFor="let item of solutions"
          ></gp-list-item>
        </div>
      </div>
      <ng-template #gridView>
        <div class="grid-list">
          <mat-grid-list cols="5" rowHeight="3:4" gutterSize="20px">
            <mat-grid-tile *ngFor="let item of solutions">
              <div class="cards-container">
                <gp-card-item
                  [isPublishedSolution]="false"
                  [item]="item"
                  [items]="solutions"
                  [isMarketPlacePage]="true"
                  [isFavoriteSolution]="favoriteSolutionsMap[item.solutionId]"
                  (favoriteClicked)="onUpdateFavoriteEvent(item.solutionId)"
                ></gp-card-item>
              </div>
            </mat-grid-tile>
          </mat-grid-list>
        </div>
      </ng-template>
    </ng-container>
    <ng-template #noCatalogs>
      <div class="loading-data">
        <p>No result found...</p>
      </div>
    </ng-template>
  </ng-container>
  <ng-template #isLoading>
    <div class="loading-data">
      <p>Loading {{ modelType }} models ...</p>
    </div>
  </ng-template>
  @if (showEntirePage) {
    <mat-paginator
      [length]="totalItems"
      [pageSize]="pageSize"
      [pageSizeOptions]="pageSizeOptions"
      (page)="onPageEvent($event)"
      aria-label="Select page"
      aria-label="Select page"
    >
    </mat-paginator>
  }
</div>