marketplaces/src/app/components/items-carousel/items-carousel.component.html

<div class="carousel-container" [class.novo-theme]="isnovo">
    @if (loading()) {
        <div class="carousel-loading">
            <div class="spinner"></div>
            <p>{{ 'carousel.loading' | translate }}</p>
        </div>
    } @else if (products().length > 0) {
        <p-carousel 
            [value]="products()" 
            [numVisible]="6" 
            [numScroll]="1" 
            [circular]="true" 
            [responsiveOptions]="responsiveOptions" 
            [autoplayInterval]="3000"
            [showNavigators]="true"
            [showIndicators]="true">
            <ng-template let-product pTemplate="item">
                <div class="item-card">
                    <a [routerLink]="['/item', product.itemID] | langRoute" class="item-link">
                        <div class="item-image">
                            <img [src]="getItemImage(product)" [alt]="product.name" loading="lazy" />
                            @if (product.discount > 0) {
                                <span class="discount-badge">-{{ product.discount }}%</span>
                            }
                            @if (product.badges && product.badges.length > 0) {
                                <div class="item-badges-overlay">
                                    @for (badge of product.badges; track badge) {
                                        <span class="item-badge" [class]="getBadgeClass(badge)">{{ badge }}</span>
                                    }
                                </div>
                            }
                        </div>
                        
                        <div class="item-details">
                            <h3 class="item-name">{{ product.name }}</h3>
                            
                            @if (product.rating) {
                              <div class="item-rating">
                                <svg width="14" height="14" viewBox="0 0 24 24" fill="#497671" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"/>
                                </svg>
                                <span class="rating-value">{{ product.rating }}</span>
                                <span class="rating-count">({{ product.callbacks?.length || 0 }})</span>
                              </div>
                            }
                            
                            <div class="item-price-row">
                                <div class="item-price">
                                    @if (product.discount > 0) {
                                        <span class="original-price">{{ product.price }} {{ product.currency }}</span>
                                        <span class="discounted-price">{{ getDiscountedPrice(product) | number:'1.0-0' }} {{ product.currency }}</span>
                                    } @else {
                                        <span class="current-price">{{ product.price }} {{ product.currency }}</span>
                                    }
                                </div>
                                <button class="cart-icon-btn" (click)="addToCart($event, product)" [title]="'carousel.addToCart' | translate">
                                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                        <path d="M6 2L3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z"></path>
                                        <line x1="3" y1="6" x2="21" y2="6"></line>
                                        <path d="M16 10a4 4 0 0 1-8 0"></path>
                                    </svg>
                                </button>
                            </div>
                        </div>
                    </a>
                </div>
            </ng-template>
        </p-carousel>
    }
</div>