@switch (status()) {
  @case ('loading') {
    <ul class="dashboard-timeline dashboard-timeline--loading" aria-hidden="true">
      @for (i of [0, 1, 2]; track i) {
        <li class="dashboard-timeline__skeleton-row">
          <app-skeleton shape="circle" width="20px" height="20px" />
          <app-skeleton shape="text" width="75%" height="1em" />
        </li>
      }
    </ul>
  }
  @case ('unavailable') {
    <app-empty-state
      [title]="'dashboard.activityUnavailable' | translate"
      [description]="'dashboard.activityUnavailableHint' | translate"
    />
  }
  @case ('error') {
    <app-empty-state
      [title]="'dashboard.stateError' | translate"
      [description]="'dashboard.activityErrorHint' | translate"
    />
  }
  @default {
    @if (entries().length === 0) {
      <app-empty-state
        [title]="'dashboard.activityEmpty' | translate"
        [description]="'dashboard.activityEmptyHint' | translate"
      />
    } @else {
      <ol class="dashboard-timeline">
        @for (entry of entries(); track entry.id) {
          <li class="dashboard-timeline__item">
            <span class="pi {{ entry.icon }} dashboard-timeline__icon" aria-hidden="true"></span>
            <span class="dashboard-timeline__label">{{ entry.labelKey | translate }}</span>
            <time class="dashboard-timeline__time">{{ entry.timeText }}</time>
          </li>
        }
      </ol>
    }
  }
}