marketplaces/src/app/components/product-card/product-card.component.html

<article class="product-card" [class.product-card-compact]="appearance === 'compact'" (mouseenter)="preview.emit(item.itemID)">
  <a [routerLink]="['/item', item.itemID] | langRoute" class="product-link" (click)="onSelected($event)">
    <div class="product-image">
      <img [src]="getMainImage(item)" [alt]="title || item.name" loading="lazy" decoding="async" width="300" height="300" />
      @if (item.discount > 0) {
        <div class="discount-badge">-{{ item.discount }}%</div>
      }
      @if (item.badges && item.badges.length > 0) {
        <div class="product-badges-overlay">
          @for (badge of item.badges; track badge) {
            <span class="product-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
          }
        </div>
      }
    </div>

    <div class="product-details">
      <h3 class="product-name">{{ title || item.name }}</h3>

      @if (showDescription && description) {
        <p class="product-description">{{ description }}</p>
      }

      @if (showRating) {
        <div class="product-rating" [attr.aria-label]="'Rating ' + item.rating">
          <span class="rating-stars">{{ item.rating | number:'1.1-1' }}</span>
          <span class="rating-count">({{ item.callbacks?.length || item.comments?.length || 0 }})</span>
        </div>
      }

      <div class="product-price">
        @if (item.discount > 0) {
          <span class="original-price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
          <span class="discounted-price">{{ getDiscountedPrice(item) | number:'1.2-2' }} {{ item.currency }}</span>
        } @else {
          <span class="current-price">{{ item.price | number:'1.2-2' }} {{ item.currency }}</span>
        }
      </div>

      @if (showStock && item.remainings) {
        <div class="product-stock" aria-hidden="true">
          <div class="stock-bar">
            <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium' || item.remainings === 'low'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'" [class.low]="item.remainings === 'low'"></span>
            <span class="bar-segment" [class.filled]="item.remainings === 'high' || item.remainings === 'medium'" [class.high]="item.remainings === 'high'" [class.medium]="item.remainings === 'medium'"></span>
            <span class="bar-segment" [class.filled]="item.remainings === 'high'" [class.high]="item.remainings === 'high'"></span>
          </div>
        </div>
      }
    </div>
  </a>

  <button class="add-to-cart-btn" type="button" (click)="onAddToCart($event)" [attr.aria-label]="addToCartLabel + ': ' + (title || item.name)">
    {{ addToCartLabel }}
  </button>
</article>