{config_load file="$language/lang_$language.conf" section="new_products"}
<style>
	
.product-scroll-container {
	max-height: 950px;
	overflow-y: auto;
	padding-right: 10px;
	scroll-behavior: smooth;
}

.product-scroll-container::-webkit-scrollbar {
	width: 6px;
}

.product-scroll-container::-webkit-scrollbar-thumb {
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 3px;
}
	
	
</style>
<div class="product-list">
	<div class="container" style="padding-bottom: 50px;">
		{if $smarty.session.language=='german'}
			<h2 class="ico ico-3"><span>Unsere Neuheiten</span></h2>
		{else}
			<h2 class="ico ico-3"><span>Our New Arrivals</span></h2>
		{/if}

		<!-- SCROLL CONTAINER -->
		<div class="row product-scroll-container">

			{foreach from=$module_content item=product}	
				<div class="col-12 col-lg-12 product-item">
					<div class="card h-100 position-relative">

						<a href="{$product.PRODUCTS_LINK}">
							{if $product.PRODUCTS_IMAGE}
								<img class="w-100"
									 src="{$product.PRODUCTS_IMAGE|replace:"thumbnail":"info"}"
									 alt="{$product.PRODUCTS_NAME}"
									 style="width: 200px; height: 200px; object-fit: contain;">
							{else}
								{if $smarty.session.language=='german'}
									<img src="/files/logo/Bild-fehlt_500px.jpg"
										 class="card-img-top"
										 alt="kein Bild vorhanden" />
								{else}
									<img src="/files/logo/Bild-fehlt_500px.jpg"
										 class="card-img-top"
										 alt="No image available" />
								{/if}
							{/if}
						</a>

						<div class="card-body">
							<h5 class="card-title">
								{$product.PRODUCTS_NAME|truncate:80:"...":true}
							</h5>

							<p class="card-text">
								{$product.PRODUCTS_PRICE|replace:'EUR':'&euro;'}*
							</p>

							{if $smarty.session.language=='german'}
								<a href="{$product.PRODUCTS_LINK}"
								   class="btn btn-primary w-100 text-light fw-bold list-button">
								   mehr erfahren
								</a>
							{else}
								<a href="{$product.PRODUCTS_LINK}"
								   class="btn btn-primary w-100 text-light fw-bold list-button">
								   learn more
								</a>
							{/if}
						</div>

					</div>
				</div>
			{/foreach}

		</div>
	</div>
</div>