@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 instructionRows = groupedInstructions
			.Select((instruction, index) => new { Instruction = instruction, Index = index })
			.GroupBy(x => x.Index / 3)
			.Select(g => g.Select(x => x.Instruction).ToList())
			.ToList();

			foreach (var row in instructionRows)
			{
				<div class="instruction-row">
					@for (var instruction in row)
					{
						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>