From bfbfd34624c2401b001db06ae1b624ed99bb361d Mon Sep 17 00:00:00 2001
From: franc <franc@FRANCESCOSBUSIN>
Date: Wed, 14 May 2025 11:47:29 +0200
Subject: [PATCH] Create Grid for show instructions of recipe

---
 .../_RecipeInstructionGridPartial.cshtml      | 43 +++++++++++++++++++
 1 file changed, 43 insertions(+)
 create mode 100644 Francesco.Recipes.World/Views/Shared/_RecipeInstructionGridPartial.cshtml

diff --git a/Francesco.Recipes.World/Views/Shared/_RecipeInstructionGridPartial.cshtml b/Francesco.Recipes.World/Views/Shared/_RecipeInstructionGridPartial.cshtml
new file mode 100644
index 0000000..2a7b44b
--- /dev/null
+++ b/Francesco.Recipes.World/Views/Shared/_RecipeInstructionGridPartial.cshtml
@@ -0,0 +1,43 @@
+@model Francesco.Recipes.World.Models.InstructionViewModel
+
+<div class="recipe-instructions-section">
+	<h3>Instructions</h3>
+
+	<div class="instructions-grid">
+		@{
+			var groupedInstructions = Model.Instructions.OrderBy(i => i.Number).ToList();
+			var rows = (int)Math.Ceiling(groupedInstructions.Count / 3.0);
+
+			for (int row = 0; row < rows; row++)
+			{
+				<div class="instruction-row">
+					@for (int col = 0; col < 3 && (row * 3 + col < groupedInstructions.Count); col++)
+					{
+						var instruction = groupedInstructions[row * 3 + col];
+						<div class="instruction-card">
+							<div class="instruction-image">
+								@if (instruction.MediaFiles != null && instruction.MediaFiles.Any())
+								{
+									var mediaFile = instruction.MediaFiles.First();
+									@if (mediaFile.Data != null && mediaFile.Data.Length > 0)
+									{
+										<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)" alt="Step @instruction.Number" />
+									}
+								}
+
+								else
+								{
+									<div class="placeholder-image">
+										<i class="bi bi-image"></i>
+									</div>
+								}
+								<span class="step-number">@instruction.Number</span>
+							</div>
+							<p class="instruction-text">@instruction.Description</p>
+						</div>
+					}
+				</div>
+			}
+		}
+	</div>
+</div>