@model IEnumerable<Francesco.Recipes.World.Models.BackendModels.Recipe.Recipe>

@if (!Model.Any())
{
	<p class="text-muted">Keine Ergebnisse gefunden.</p>
}
else
{
	<div class="row">
		@foreach (var recipe in Model)
		{
			<div class="col-md-4 mb-3">
				<div class="card h-100 shadow-sm">
					<div class="recipe-image">
						@{
							var mediaFile = recipe.MediaFiles.FirstOrDefault();
						}
						@if (mediaFile != null && mediaFile.Data != null)
						{
							<img src="data:@mediaFile.MimeType;base64,@Convert.ToBase64String(mediaFile.Data)"
								 alt="@recipe.Name"
								 class="card-img-top" />
						}
						else
						{
							<img src="~/images/placeholder.png"
								 alt="Platzhalter"
								 class="card-img-top" />
						}
					</div>

					<div class="card-body d-flex flex-column justify-content-between">
						<div>
							<h5 class="card-title">@recipe.Name</h5>
							<p class="card-text text-muted mb-2">
								<i class="bi bi-clock"></i>
								@recipe.PreparationTime.Hours h @recipe.PreparationTime.Minutes min
							</p>
						</div>

						<div>
							<button class="btn btn-outline-secondary"
									hx-post="/Recipe/ToggleFavorite"
									hx-vals='{"id": "@recipe.Id"}'
									hx-swap="outerHTML">
								<i class="bi @((recipe.IsFavorite) ? "bi-star-fill" : "bi-star")"></i>
							</button>
						</div>
					</div>
				</div>
			</div>
		}
	</div>
}