Merge develop into feature/Show-ShoppingList-Of-Active-RecipeCard

Francesco.Recipes.World/Views/Shared/_AdjustableIngredientsPartial.cshtml

@@ -0,0 +1,36 @@
+@model Francesco.Recipes.World.Models.BackendModels.Recipe.Recipe
+
+<div class="adjustable-ingredients">
+	<div class="serving-adjustment mb-3" data-original-servings="@Model.Servings">
+		<h3>Ingredients</h3>
+		<div class="d-flex align-items-center mb-2">
+			<label for="servingsInput" class="me-2">Adjust servings:</label>
+			<div class="input-group" style="max-width: 150px;">
+				<button type="button" class="btn btn-outline-secondary" id="decreaseServings">-</button>
+				<input type="number" class="form-control text-center" id="servingsInput" value="@Model.Servings" min="1">
+				<button type="button" class="btn btn-outline-secondary" id="increaseServings">+</button>
+			</div>
+			<span class="ms-2 text-muted">(Original: @Model.Servings)</span>
+		</div>
+	</div>
+
+	<form id="ingredient-form">
+		<ul id="adjustable-ingredient-list">
+			@foreach (var ingredient in Model.RecipeIngredients)
+			{
+				<li id="ingredient-@ingredient.Id"
+					data-ingredient-id="@ingredient.Id"
+					data-original-quantity="@ingredient.Quantity"
+					data-ingredient-name="@ingredient.Ingredient.Name"
+					data-unit="@(ingredient.Unit?.Symbol ?? string.Empty)">
+					<input type="checkbox" name="ingredientIds" value="@ingredient.Id" />
+					<span class="ingredient-name">@ingredient.Ingredient.Name</span> -
+					<span class="ingredient-quantity">@ingredient.Quantity</span>
+					<span class="ingredient-unit">@(ingredient.Unit != null ? ingredient.Unit.Symbol : string.Empty)</span>
+					<span class="ingredient-note"></span>
+				</li>
+			}
+		</ul>
+		<button type="button" class="btn btn-primary mt-2" onclick="addSelectedIngredientsToShoppingList('@Model.Id')">Add Selected to Shopping List</button>
+	</form>
+</div>

Francesco.Recipes.World/Views/Shared/_RecipeInstructionGridPartial.cshtml

@@ -0,0 +1,31 @@
+@model Francesco.Recipes.World.Models.InstructionViewModel
+
+<div class="recipe-instructions-section">
+	<h3>Instructions</h3>
+
+	<div class="instructions-grid">
+		@foreach (var instruction in Model.Instructions.OrderBy(i => i.Number))
+		{
+			<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>