@if (videos.length > 0) {
<section class="hide-scrollbar">
  <!--  New videos this week -->
  @if (recentVideos().length > 0) {
  <div class="category">
    <p>New videos added this week</p>
    <app-video-list
      [videos]="recentVideos()"
      [currentVideo]="currentVideo"
      [watchedVideos]="watchedVideos"
      (currentVideoId)="openCurrentVideo($event)"
    ></app-video-list>
  </div>
  }

  <!-- Favorites -->
  @if (favoriteVideos.length > 0) {
  <div class="category">
    <p>Favorites</p>
    <app-video-list
      [videos]="getFavoriteVideos()"
      [currentVideo]="currentVideo"
      [watchedVideos]="watchedVideos"
      (currentVideoId)="openCurrentVideo($event)"
    ></app-video-list>
  </div>
  }

  <!-- Genre columns -->
  @if (genres$ | async; as genres) {

  <!-- Loop through genres -->
  @for (genre of genres; track genre) {

  <!-- If genre has videos -->
  @if (getAllVideos(genre.code).length > 0) {
  <div class="category">
    <p>{{ genre.name }}</p>
    <app-video-list
      [videos]="getAllVideos(genre.code)"
      [currentVideo]="currentVideo"
      [watchedVideos]="watchedVideos"
      (currentVideoId)="openCurrentVideo($event)"
    ></app-video-list>
  </div>
  } } } @else {
  <div class="category"><p>Loading...</p></div>
  }
</section>
}