<div class="mb-4 d-flex justify-content-between align-items-end gap-2 flex-wrap">
  @if (pagination.totalItems) {
    <span class="total-items"> {{ getTotalTitle() }}</span>
  }

  <my-advanced-input-filter class="d-block ms-auto" (search)="onSearch($event)" emitOnInit="true"></my-advanced-input-filter>
</div>

@if (pagination.totalItems === 0) {
  <div class="no-results" i18n>You don't have any subscription yet.</div>
}

<div class="actors" myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onDataSubject.asObservable()">
  @for (videoChannel of videoChannels; track videoChannel) {
    <div class="actor">
      <my-actor-avatar [actor]="videoChannel" actorType="channel" [internalHref]="[ '/c', videoChannel.nameWithHost ]" size="80"></my-actor-avatar>

      <div class="actor-info">
        <a [routerLink]="[ '/c', videoChannel.nameWithHost ]" class="actor-names" i18n-title title="Channel page">
          <div class="actor-display-name">{{ videoChannel.displayName }}</div>
          <div class="actor-name">{{ videoChannel.nameWithHost }}</div>
        </a>

        <div i18n class="actor-followers">{{ videoChannel.followersCount }} subscribers</div>

        <a [routerLink]="[ '/a', videoChannel.ownerBy ]" i18n-title title="Owner account page" class="actor-owner">
          <span i18n>Created by {{ videoChannel.ownerBy }}</span>
          <my-actor-avatar [actor]="videoChannel.ownerAccount" actorType="account" size="18"></my-actor-avatar>
        </a>
      </div>

      <my-subscribe-button [videoChannels]="[videoChannel]"></my-subscribe-button>
    </div>
  }
</div>
