@using MudBlazor

<MudDialog>
    <DialogContent>
        @if (ViewModel != null)
        {
            <div class="recipe-grid">
                @foreach (var recipe in ViewModel.Recipes)
                {
                    var isSelected = recipe == ViewModel.SelectedRecipe;
                    <div class="recipe-item @(isSelected ? "recipe-selected" : "")"
                         @onclick="() => SelectRecipe(recipe)">
                        @if (recipe.Image != null && !recipe.Image.Empty())
                        {
                            <img src="@recipe.Image.ToBase64DataUri(60)" alt="@recipe.RecipeName" class="recipe-thumbnail" />
                        }
                        else
                        {
                            <div class="recipe-thumbnail recipe-no-image">No image</div>
                        }
                        <span class="recipe-name">@recipe.RecipeName</span>
                    </div>
                }
            </div>
        }
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancel</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = null!;
    [Parameter] public RecipeSelectionVM? ViewModel { get; set; }

    private void SelectRecipe(RecipeData recipe)
    {
        if (ViewModel != null)
            ViewModel.SelectedRecipe = recipe;
        MudDialog.Close(DialogResult.Ok(true));
    }

    private void Cancel() => MudDialog.Cancel();
}