<sky-paging
  [itemCount]="(pagedData | async)?.totalCount ?? 0"
  [maxPages]="3"
  [pageSize]="pageSize"
  [(currentPage)]="currentPage"
  (contentChange)="contentChange.next($event)"
>
  <sky-paging-content>
    <sky-repeater>
      @for (person of (pagedData | async)?.people; track person) {
        <sky-repeater-item>
          <sky-repeater-item-title>
            {{ person.name }}
          </sky-repeater-item-title>
          <sky-repeater-item-content>
            <sky-description-list>
              <sky-description-list-content>
                <sky-description-list-term>
                  Formal name
                </sky-description-list-term>
                <sky-description-list-description>
                  {{ person.formal }}
                </sky-description-list-description>
              </sky-description-list-content>
            </sky-description-list>
          </sky-repeater-item-content>
        </sky-repeater-item>
      }
    </sky-repeater>
  </sky-paging-content>
</sky-paging>
