@page "/ephemeral"
@inject IJSRuntime JS
@inject State State
<PageHeading title="Eph.emer.al" icon="fa-light fa-comment-dots">
  <Description><a href="https://eph.emer.al">Eph.emer.al</a> is a place for fleeting thoughts. Everything on this page will disappear after a while.</Description>
</PageHeading>

<div id="ephemeral" class="responsive">

  @if (messages != null) {
    foreach (MarkupString message in messages) {
      <article class="ephemeral center">
        @message
      </article>
    }
  }

  <LoadingCard id="ephemeral-loading" icon="fa-light fa-comment-dots"></LoadingCard>
</div>

@code {
  private List<MarkupString>? messages;

  protected override async Task OnInitializedAsync() {
    await base.OnInitializedAsync();
    if (messages == null || messages.Count == 0) messages = await State.GetEphemeralMessages();
    await InvokeAsync(StateHasChanged);
    await JS.InvokeVoidAsync("removeElementById", "ephemeral-loading");
  }
}