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

  <!-- <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>

    @if (!seeAllQuickLinks && quickAccessOverflow) {
      <button 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">
            @if (object.channel) {
              <my-actor-avatar size="40px" actorType="channel" [actor]="object.channel"></my-actor-avatar>
            }

            <span class="ellipsis 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>
            <div class="text-center">
              <my-button class="mt-3 mb-3" theme="secondary" [routerLink]="object.routerLink" [queryParams]="object.queryParams">See More</my-button>
            </div>
          </h1>
        </div>

        @for (video of object.videos; track video) {
          <div class="video-wrapper">
            <my-video-miniature [video]="video" [user]="userMiniature" [displayVideoActions]="true"></my-video-miniature>
          </div>
        }
      </div>
    }
  </div> -->

  <!-- ===== EDA SESSIONS UI (STATIC) ===== -->
<div class="eda-sessions">
  <h1 class="eda-heading">Explore Tracks</h1>

  <h2 class="eda-subheading">
    Check out some of our most popular past sessions, featuring original insights from some of the world’s leading subject matter experts.
  </h2>

  <!-- Tabs -->
  <div class="eda-tabs">
    <button class="eda-tab"
            [class.active]="activeTab === 'architects'"
            (click)="setTab('architects')">
      ARCHITECTS
    </button>
  
    <button class="eda-tab"
            [class.active]="activeTab === 'developers'"
            (click)="setTab('developers')">
      DEVELOPERS
    </button>
  
    <button class="eda-tab"
            [class.active]="activeTab === 'case_studies'"
            (click)="setTab('case_studies')">
      CASE STUDIES
    </button>
  </div>
<!--cards-->
  <div class="eda-cards">
    <div
      class="eda-card"
      *ngFor="let card of cardsData[activeTab]"
      (click)="openLink(card.route)"
    >
      <div class="eda-card-top" [ngClass]="card.gradient">
        <img class="eda-card-image" *ngIf="card.image" [src]="card.image" [alt]="card.title" />
      </div>
  
      <div class="eda-card-bottom">
        {{ card.title }}
      </div>
    </div>
  </div>
  

  <button class="eda-view-btn" (click)="goToActiveTabPage()">
    VIEW ALL SESSIONS
  </button>
  
  

</div>