Vladyslava-Maneliuk/final project/web-game-shop/src/app/components/library/library.html

<div class="library-container">
  <div class="library-header">
    <h1>My Library</h1>
    <p>Manage your collection, track playtime, and launch games.</p>
  </div>

  <div *ngIf="successMessage" class="alert alert-success">
    {{ successMessage }}
  </div>
  <div *ngIf="errorMessage" class="alert alert-danger">
    {{ errorMessage }}
  </div>

  <div *ngIf="items.length === 0" class="empty-state">
    <p>No games in your library yet. Visit the Storefront to purchase games.</p>
  </div>

  <div class="games-grid" *ngIf="items.length > 0">
    <div class="game-card" *ngFor="let item of items">
      <div class="game-image-wrapper">
        <img [src]="'http://localhost:8085' + item.game.imagePath" [alt]="item.game.title" class="game-image" />
      </div>
      <div class="game-info">
        <h3>{{ item.game.title }}</h3>
        <p class="purchase-date">Purchased: {{ item.lastPlayedAt | date }}</p>
        <p class="game-price">{{ item.game.price | currency }}</p>

        <div class="card-actions">
          <button class="btn btn-primary" (click)="launchGame(item.game.title)">
            Launch Game
          </button>
          <button class="btn btn-danger" (click)="returnGame(item.itemId, item.game.title)">
            Return & Refund
          </button>
          <button class="btn btn-secondary" (click)="openReportPage(item.game.gameId)">
            Report Bug
          </button>
        </div>
      </div>
    </div>
  </div>
</div>