boooomb

src/app/pages/items-list/items-list.component.html

@@ -76,10 +76,19 @@
 
         <div class="item-image">
           @if (item.imgs.length) {
-            <img [src]="item.imgs[0]" [alt]="item.name">
-          } @else {
-            <div class="no-image">
-              <mat-icon>image</mat-icon>
+            <img [src]="item.imgs[0]" [alt]="item.name" (error)="onImageError($event)">
+          }
+          <div class="no-image" [style.display]="item.imgs.length ? 'none' : 'flex'">
+            <mat-icon>image</mat-icon>
+          </div>
+          @if (item.quantity === 0) {
+            <div class="out-of-stock-overlay">Out of Stock</div>
+          }
+          @if (item.badges?.length) {
+            <div class="item-badges">
+              @for (badge of (item.badges || []).slice(0, 2); track badge) {
+                <span class="badge badge-{{ badge }}">{{ badge }}</span>
+              }
             </div>
           }
         </div>