<h1 class="visually-hidden" i18n>Discover</h1>

@if (notResults) {
  <div class="margin-content no-results" i18n>No results.</div>
} @else {
  <div class="margin-content quick-access mt-3">
    <div #quickAccessContent class="quick-access-links" [ngClass]="{ 'see-all-quick-links': seeAllQuickLinks }">
      <span i18n class="me-2 fg-100">Quick access:</span>

      @for (quickAccess of quickAccessLinks; track quickAccess.label) {
        <a class="me-2" [routerLink]="quickAccess.routerLink" [queryParams]="quickAccess.queryParams">{{ quickAccess.label }}</a>
      }
    </div>

    <button *ngIf="!seeAllQuickLinks && quickAccessOverflow" type="button" class="peertube-button tertiary-button" (click)="seeAllQuickLinks = true" i18n>More</button>
  </div>

  <div
    class="margin-content videos-margin-content"
    myInfiniteScroller (nearOfBottom)="onNearOfBottom()"
    [dataObservable]="onDataSubject.asObservable()"
  >
    @for (object of objects; track object) {
      <div class="section videos">
        <div class="section-header d-flex flex-wrap justify-content-between align-items-start mb-3">
          <h1 class="section-title">
            <my-actor-avatar *ngIf="object.channel" size="40px" actorType="channel" [actor]="object.channel"></my-actor-avatar>

            <span class="text-fg border-highlight text-decoration-none">{{ object.label }}</span>

            <span class="fg-100 fs-7 mx-2">·</span>
            <span i18n class="fg-100 fs-7">{{ object.type }}</span>
          </h1>
        </div>

        <div class="video-wrapper" *ngFor="let video of object.videos">
          <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true"></my-video-miniature>
        </div>
      </div>

      <div class="text-center">
        <my-button class="mt-3 mb-3" theme="secondary" [routerLink]="object.routerLink" [queryParams]="object.queryParams">{{ object.buttonLabel }}</my-button>
      </div>
    }
  </div>
}
