Add Caroussel to Shoppinglistdetail Site

Francesco.Recipes.World/Views/ShoppingList/Details.cshtml

@@ -8,6 +8,56 @@
 	Anzahl Rezepte: <span id="recipeCount">@Model.RecipeCount</span>
 </div>
 
+<div class="d-flex align-items-center mb-4">
+	<button class="btn btn-outline-secondary me-2" type="button" id="carouselLeft">
+		<i class="bi bi-arrow-left"></i>
+	</button>
+	<div class="flex-grow-1 overflow-auto" style="white-space:nowrap;" id="recipeCarousel">
+		@foreach (var recipe in Model.RecipesInAnyShoppingList)
+		{
+			var mediaFile = recipe.MediaFiles?.FirstOrDefault();
+			var imageData = mediaFile?.Data;
+			var mimeType = mediaFile?.MimeType;
+
+			<div class="card d-inline-block mx-2" style="width: 180px; vertical-align:top; border: 1px solid #000;">
+				<div class="position-relative">
+					<div class="position-absolute top-0 end-0 p-2">
+						<button class="btn btn-sm btn-link text-dark" title="Rezept entfernen">
+							<i class="bi bi-trash" style="font-size: 1.2rem;"></i>
+						</button>
+					</div>
+					<div class="text-center p-2" style="height: 120px; display: flex; align-items: center; justify-content: center;">
+						@if (imageData != null && mimeType != null)
+						{
+							<img src="data:@mimeType;base64,@Convert.ToBase64String(imageData)"
+								 alt="@recipe.Name"
+								 style="max-height: 100%; max-width: 100%; object-fit: contain;" />
+						}
+						else
+						{
+							<div style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
+								<i class="bi bi-image" style="font-size: 3rem; color: #ccc;"></i>
+							</div>
+						}
+					</div>
+					<div class="p-2 text-center" style="border-top: 1px solid #000; background-color: #fff;">
+						<div class="recipe-name" style="font-weight: bold; font-size: 0.9rem; white-space: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 40px;">@recipe.Name</div>
+					</div>
+					<div style="height: 10px; background-color: #000;"></div>
+				</div>
+			</div>
+		}
+
+		}
+
+	</div>
+	<button class="btn btn-outline-secondary ms-2" type="button" id="carouselRight">
+		<i class="bi bi-arrow-right"></i>
+	</button>
+</div>
+
+
+
 
 @section Scripts {
 <script>
@@ -34,5 +84,12 @@
 	window.addEventListener('beforeunload', function() {
 	clearInterval(countUpdateInterval);
 	});
+
+			document.getElementById('carouselLeft').onclick = function() {
+			document.getElementById('recipeCarousel').scrollBy({ left: -200, behavior: 'smooth' });
+		};
+		document.getElementById('carouselRight').onclick = function() {
+			document.getElementById('recipeCarousel').scrollBy({ left: 200, behavior: 'smooth' });
+		};
 </script>
 }