@inject IJSRuntime JS
@inject State State

@if (Editable) {
  <EditPicDialog @ref="Dialog" id="EditPicModal"></EditPicDialog>
}

@if (pics != null) foreach (Pic pic in pics) {
  <PicCard Pic="pic" Editable="Editable" Dialog="Dialog"></PicCard>
}

<LoadingCard id="pics-loading" icon="fa-solid fa-images"></LoadingCard>

@code {
  [Parameter]
  public Func<Task<List<Pic>?>> PicsFunc { get; set; }
  [Parameter]
  public bool Editable { get; set; } = false;

  public EditPicDialog? Dialog { get; set; }

  private List<Pic>? pics;

  // TODO: There is a noticable rendering delay between the pics loading and the page rendering
  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    if (pics == null || pics.Count == 0) pics = await PicsFunc();
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("removeElementById", "pics-loading");
  }
}