@model Francesco.Recipes.World.Models.InstructionViewModel
@Html.AntiForgeryToken()
<div id="instructions-container">
	@for (int i = 0; i < Model.Instructions.Count; i++)
	{
		<div class="instruction-item" id="instruction-@Model.Instructions[i].Id">
			<div class="instruction-controls">
				@if (Model.Instructions[i].MediaFiles != null && Model.Instructions[i].MediaFiles.Any())
				{
					var mediaFile = Model.Instructions[i].MediaFiles.First();
					if (mediaFile.Data != null)
					{
						<div class="instruction-media">
							<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)"
								 alt="Instruction Media" class="instruction-media-preview" />
						</div>
					}
				}
				<input type="file" name="InstructionViewModel.Instructions[@i].MediaFile" class="instruction-file" />
				<textarea name="InstructionViewModel.Instructions[@i].Description" placeholder="Beschreibung" class="form-control">@Model.Instructions[i].Description</textarea>

				<button type="button" class="btn-delete" onclick="removeInstruction('@Model.Instructions[i].Id', '@Model.RecipeId',)">🗑️</button>
			</div>
			<div class="instruction-actions">
				<button type="button" class="btn-move-up" onclick="moveInstructionUp('@Model.Instructions[i].Id', '@Model.RecipeId')">⬆️</button>
				<button type="button" class="btn-move-down" onclick="moveInstructionDown('@Model.Instructions[i].Id', '@Model.RecipeId')">⬇️</button>
			</div>
		</div>
	}
</div>




<button type="button" class="btn-add" onclick="addInstruction()">Schritte hinzufügen</button>


@section Scripts {
	<script>
		setRecipeId('@Model.RecipeId');
	</script>
}