@if (hasWrapper) {
<aui-card [divider]="false">
  <ng-container *ngTemplateOutlet="content" />
</aui-card>
} @else {
<aui-inline-alert>
  <ng-container [aclTranslate]="'realtime_event_list_tip'">
    <a target="_blank" [routerLink]="[
          '/workspace',
          stringifyWorkspace(workspaceParams),
          'event',
        ]" [queryParams]="
          params | pure: getLinkQueryParams : mixedInvokedObjectCache
        " *aclTranslateMatch="'link'">{{ 'all_events' | translate
      }}<aui-icon icon="jump" margin="left" size="small"></aui-icon>
    </a>
    <span *aclTranslateText="let text">{{ text }}</span>
  </ng-container>
</aui-inline-alert>
<div class="realtime-event-list-container">
  <div *declare="list.items$ | async as events">
    @for (event of events; track event) {
    <acl-k8s-realtime-event-row class="realtime-event-list-row" [event]="event"></acl-k8s-realtime-event-row>
    }
  </div>
  <acl-k8s-resource-list-footer [class]="
        (list.loading$ | async) && (list.items$ | async).length > 0
          ? 'realtime-event-list-footer-spaced'
          : ''
      " [list]="list">
    <ng-container *aclK8sListFooterNoData>
      {{ 'no_data' | translate }}
    </ng-container>
  </acl-k8s-resource-list-footer>
</div>
}

<ng-template #content>
  <aui-inline-alert>
    <ng-container [aclTranslate]="'realtime_event_list_tip'">
      <a target="_blank" [routerLink]="[
          '/workspace',
          stringifyWorkspace(workspaceParams),
          'event',
        ]" [queryParams]="
          params | pure: getLinkQueryParams : mixedInvokedObjectCache
        " *aclTranslateMatch="'link'">{{ 'all_events' | translate
        }}<aui-icon icon="jump" margin="left" size="small"></aui-icon>
      </a>
      <span *aclTranslateText="let text">{{ text }}</span>
    </ng-container>
  </aui-inline-alert>
  <div class="realtime-event-list-container">
    <div *declare="list.items$ | async as events">
      @for (event of events; track event) {
      <acl-k8s-realtime-event-row class="realtime-event-list-row" [event]="event"></acl-k8s-realtime-event-row>
      }
    </div>

    <acl-k8s-resource-list-footer [class]="
        (list.loading$ | async) && (list.items$ | async).length > 0
          ? 'realtime-event-list-footer-spaced'
          : ''
      " [list]="list">
      <ng-container *aclK8sListFooterNoData>
        {{ 'no_data' | translate }}
      </ng-container>
    </acl-k8s-resource-list-footer>
  </div>
</ng-template>