<ng-container *ngVar="(itemRD$ | async) as itemRD">
  @if (itemRD?.hasSucceeded && itemRD?.payload?.page.length > 0) {
    <div class="mt-4" [ngClass]="placeholderFontClass" @fadeIn>
      <div class="d-flex flex-row border-bottom mb-4 pb-4"></div>
      <h2> {{ 'home.recent-submissions.head' | translate }}</h2>
      <ul class="list-unstyled m-0 p-0">
        @for (item of itemRD?.payload?.page; track item) {
          <li class="my-4">
            <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode" class="pb-4">
            </ds-listable-object-component-loader>
          </li>
        }
      </ul>
      <button (click)="onLoadMore()" class="btn btn-primary search-button mt-4 float-start" role="link" tabindex="0">
        {{ 'vocabulary-treeview.load-more' | translate }} ...
      </button>
    </div>
  }
  @if (itemRD?.hasFailed) {
    <ds-error message="{{'error.recent-submissions' | translate}}"></ds-error>
  }
  @if (!itemRD || itemRD.isLoading) {
    <ds-loading message="{{'loading.recent-submissions' | translate}}">
    </ds-loading>
  }
</ng-container>
