@inject IJSRuntime JS

<article class="no-padding">
  <img src="@Pic.Url" loading="lazy">
  <div class="padding">
    <nav>
      <a class="author" href="/person/@Pic.Address#pics">
        <i class="fa-solid fa-fw fa-at"></i>@Pic.Address
      </a>
      <span class="max"></span>
      <a class="chip transparent-border right">
        <i class="fa fa-clock"></i> @Pic.RelativeTime
      </a>
    </nav>
    <p>@((MarkupString)Pic.DescriptionHtml)</p>
    <nav>
      <div class="max"></div>
      @if(Editable) {
        <button @onclick="EditPic"><i class="fa-solid fa-pencil"></i> Edit</button>
      }
      <button class="transparent circle" @onclick="ShareClick">
        <i class="fa-solid fa-share-nodes"></i>
      </button>
    </nav>
  </div>
</article>

@code {
  [Parameter]
  public Pic Pic {get; set;}
    [Parameter]
  public bool Editable { get; set; } = false;
  [Parameter]
  public EditPicDialog? Dialog { get; set; }

  private async Task EditPic(EventArgs e){
    Dialog.Pic = Pic;
    // await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("ui", "#" + Dialog?.id);
  }

  public async Task ShareClick(EventArgs e){
    await Share.Default.RequestAsync(new ShareTextRequest{
      Uri = Pic.Url,
      Text = Pic.Description,
      Title = "I saw this on some.pics",
      Subject = "I saw this on some.pics"
    });
  }
}