<div myInfiniteScroller (nearOfBottom)="onNearOfBottom()" [dataObservable]="onSearchDataSubject.asObservable()" class="search-result">
  <div class="results-header">
    <div class="first-line">
      @if (pagination.totalItems) {
        <div class="results-counter">
          <span class="me-1" i18n>{{ pagination.totalItems | myNumberFormatter }} {pagination.totalItems, plural, =1 {result} other {results}}</span>

          @if (advancedSearch.searchTarget === 'local') {
            <span class="me-1" i18n>on this instance</span>
          }

          @if (advancedSearch.searchTarget === 'search-index') {
            <span class="me-1" i18n>on the vidiverse</span>
          }

          @if (currentSearch) {
            <span i18n>for <span class="search-value">{{ currentSearch }}</span></span>
          }
        </div>
      }

      <button
        class="filter-button peertube-button tertiary-button ms-auto" (click)="isSearchFilterCollapsed = !isSearchFilterCollapsed"
        [attr.aria-expanded]="!isSearchFilterCollapsed" aria-controls="search-results-filter" [title]="getFilterButtonTitle()"
        >
        <my-global-icon iconName="filter"></my-global-icon>

        <ng-container i18n>Filters</ng-container>

        @if (numberOfFilters() > 0) {
          <span class="pt-badge badge-secondary">{{ numberOfFilters() }}</span>
        }
      </button>
    </div>

    <div id="search-results-filter" class="results-filter" [ngbCollapse]="isSearchFilterCollapsed" [animation]="true">
      <my-search-filters [advancedSearch]="advancedSearch" (filtered)="onFiltered()"></my-search-filters>

      @if (error) {
        <my-alert type="danger">{{ error }}</my-alert>
      }
    </div>
  </div>

  @if (pagination.totalItems === 0 && results.length === 0) {
    <div i18n class="no-results">No results found</div>
  }

  @for (result of results; track result) {
    @if (isVideoChannel(result)) {
      <div class="entry video-channel">
        <my-actor-avatar
          [actor]="result" actorType="channel" responseSize="true"
          [internalHref]="getInternalChannelUrl(result)" [href]="getExternalChannelUrl(result)" size="120"
        ></my-actor-avatar>

        <div class="video-channel-info">
          @if (!isExternalChannelUrl()) {
            <a [routerLink]="getInternalChannelUrl(result)" class="video-channel-names">
              <ng-container *ngTemplateOutlet="aContent"></ng-container>
            </a>
          } @else {
            <a [href]="getExternalChannelUrl(result)" target="_blank" class="video-channel-names">
              <ng-container *ngTemplateOutlet="aContent"></ng-container>
            </a>
          }

          <ng-template #aContent>
            <div class="video-channel-display-name me-2">{{ result.displayName }}</div>
            <div class="video-channel-name">{{ result.nameWithHost }}</div>
          </ng-template>

          <div i18n class="video-channel-followers">{{ result.followersCount }} subscribers</div>
        </div>

        @if (!hideActions()) {
          <my-subscribe-button [videoChannels]="[result]"></my-subscribe-button>
        }
      </div>
    }
    @if (isVideo(result)) {
      <div class="entry video">
        <my-video-miniature
          [video]="result" [user]="userMiniature" [displayAsRow]="true" [displayVideoActions]="!hideActions()"
          [displayOptions]="videoDisplayOptions" [videoLinkType]="getLinkType()"
          (videoBlocked)="removeVideoFromArray(result)" (videoRemoved)="removeVideoFromArray(result)"
        ></my-video-miniature>
      </div>
    }
    @if (isPlaylist(result)) {
      <div class="entry video-playlist">
        <my-video-playlist-miniature
          [playlist]="result" displayAsRow="true" displayChannel="true" toManage="false"
          [linkType]="getLinkType()"
        ></my-video-playlist-miniature>
      </div>
    }
  }

</div>
