@using MyRecipes2.Shared;
@inject NavigationManager NavManager;

<div class="col-sm-6 col-lg-3 py-2 mb-3">
    <div class="card h-100" style="box-shadow: 5px 4px 6px 1px #e8e8e8;">
        <img style="width: 100%; height: 15vw; object-fit: cover;" src="@recipe.ImageUrl" />
        <div class="card-body">
            <h5 class="card-title">@recipe.Name</h5>
            <button class="btn btn-primary" @onclick="() => ClickView(recipe)"> View this recipe</button>
        </div>
    </div>
</div>

@code {
    [Parameter]
    public RecipeDto recipe { get; set; }

    protected void ClickView(RecipeDto recipe)
    {
        NavManager.NavigateTo($"ViewRecipe/{recipe.Id}");
    }
}