fix: show empty cart if cart is empty

src/app/shared/components/cart/cart.html

@@ -1,31 +1,36 @@
 <ul>
   @if (authService.authState() === AuthState.Unauthenticated) {
-  <li><a class="block h-full w-full" routerLink="/login">Login to access cart</a></li>
+    <li><a class="block h-full w-full" routerLink="/login">Login to access cart</a></li>
   } @else if (authService.authState() === AuthState.Loading) {
-  <li><a class="block h-full w-full">Loading</a></li>
+    <li><a class="block h-full w-full">Loading</a></li>
   } @else {
-  <ol
-    [class.pointer-events-none]="isLoading()"
-    [class.opacity-40]="isLoading()"
-    [class.cursor-block]="isLoading()"
-    class="rounded-none!"
-  >
-    @for (item of cart.items; track item.id) {
-    <app-cart-item
-      (qtyChangeEvent)="updateProductQty($event)"
-      (productDeleteEvent)="removeProduct($event)"
-      [cartItem]="item"
-    />
+    <ol
+      [class.cursor-block]="isLoading()"
+      [class.opacity-40]="isLoading()"
+      [class.pointer-events-none]="isLoading()"
+      class="rounded-none!"
+    >
+      @for (item of cart.items; track item.id) {
+        <app-cart-item
+          (productDeleteEvent)="removeProduct($event)"
+          (qtyChangeEvent)="updateProductQty($event)"
+          [cartItem]="item"
+        />
+      }
+    </ol>
+    @if (cart.itemsCount > 0) {
+
+      <div class="flex justify-between mt-4 px-2 font-bold text-lg">
+        <p>Total</p>
+        <p>Rs. {{ cart.totalPrice }}</p>
+      </div>
+
+      <li class="pt-4! mt-4 border-t border-gray-200 rounded-none!">
+        <a [routerLink]="`/checkout/address`" class="btn btn-primary px-4">Proceed to checkout</a>
+      </li>
     }
-  </ol>
-
-  <div class="flex justify-between mt-4 px-2 font-bold text-lg">
-    <p>Total</p>
-    <p>Rs. {{ cart.totalPrice }}</p>
-  </div>
-
-  <li class="pt-4! mt-4 border-t border-gray-200 rounded-none!">
-    <a [routerLink]="`/checkout/address`" class="btn btn-primary px-4">Proceed to checkout</a>
-  </li>
+  @else{
+    <li><a class="block h-full w-full">Cart is empty !</a></li>
+  }
   }
 </ul>