@if (movies.length > 0) {
<section class="hide-scrollbar">
  <!--  New movies this week -->
  @if (recentMovies().length > 0) {
  <div class="category">
    <p>New movies added this week</p>
    <app-movie-list
      [movies]="recentMovies()"
      [currentMovie]="currentMovie"
      [watchedMovies]="watchedMovies"
      (currentMovieId)="openCurrentMovie($event)"
    ></app-movie-list>
  </div>
  }

  <!-- Favorites -->
  @if (favoriteMovies.length > 0) {
  <div class="category">
    <p>Favorites</p>
    <app-movie-list
      [movies]="getFavoriteMovies()"
      [currentMovie]="currentMovie"
      [watchedMovies]="watchedMovies"
      (currentMovieId)="openCurrentMovie($event)"
    ></app-movie-list>
  </div>
  }

  <!-- Genre columns -->
  @for (filmGenre of filmGenres; track filmGenre) {
  <!-- Movies by genre -->
  @if (getAllMovies(filmGenre.code).length > 0) {
  <div class="category">
    <p>{{ filmGenre.name }}</p>
    <app-movie-list
      [movies]="getAllMovies(filmGenre.code)"
      [currentMovie]="currentMovie"
      [watchedMovies]="watchedMovies"
      (currentMovieId)="openCurrentMovie($event)"
    ></app-movie-list>
  </div>
  } }
</section>
}