@page "/pics"
@inject State State

<div class="row center-align">
  <h3>
    <i class="fa-solid fa-images"></i> Some.pics
  </h3>
</div>
<div class="row center-align">
  <p>Sit back, relax, and look at <a href="https://some.pics/">some.pics</a></p>
</div>

<AuthorizeView>
  <Authorized>
    <button class="fab circle extra large-elevate" data-ui="#post-modal">
      <i class="fa-solid fa-camera-retro"></i>
    </button>
    <NewPicDialog id="post-modal"></NewPicDialog>
  </Authorized>
</AuthorizeView>

<div id="pics" class="responsive card-grid">
  <PicList PicsFunc="@State.VirtualPicsFunc()"></PicList>
</div>

@code {
  private List<Pic> pics;
  private async ValueTask<ItemsProviderResult<Pic>> GetPics(ItemsProviderRequest request) {
    // TODO: request.cancellationToken
    RestService api = new RestService();
    if(pics == null || pics.Count == 0) pics = await api.SomePics();
    var numPics = Math.Min(request.Count, pics.Count - request.StartIndex);
    return new ItemsProviderResult<Pic>(pics.Skip(request.StartIndex).Take(numPics), pics.Count);
  }
}