@page "/statuslog/latest"

<h3>Statuses</h3>

<p>This component demonstrates showing data from the omg.lol API.</p>

@if (statuses == null)
{
  <p><em>Loading...</em></p>
}
else
{
    <div id="statuses">
      @foreach (var status in statuses) {
        <article class="status">
          <aside class="emoji">
            @status.Emoji
          </aside>
          <p class="author">
            <a href="/person/@status.Address">
              <i class="fa-solid fa-fw fa-at"></i>@status.Address
            </a>
          </p>
          @status.HtmlContent
          <small class="post-info">
            <i class="fa fa-clock"></i> @status.RelativeTime
            @if(!string.IsNullOrEmpty(status.ExternalUrl)) {
              <i class="fa fa-message-dots"></i>
              <a href="@status.ExternalUrl">Respond</a>
            }
          </small>
        </article>
      }
    </div>
}

@code {
  
  private Status[]? statuses;

  protected override async Task OnInitializedAsync()
  {
    RestService api = new RestService();
    statuses = (await api.StatuslogLatest()).ToArray();
  }
}