<section *ngIf="movies.length > 0" class="hide-scrollbar">
  <!-- Column for films of the last 7 days -->
  <div *ngIf="recentMovies().length > 0" class="category">
    <p>Added in the last 7 days</p>
    <div class="movies">
      @for (movie of recentMovies(); track movie) {
      <div class="movie" (click)="openCurrentMovie(movie.id)">
        <img
          [ngClass]="{ selected: movie.id === currentMovie }"
          src="{{
            environmentBaseUrl +
              '/media/thumbnails/' +
              movie.id +
              '/' +
              movie.file_name +
              '_480p.jpg'
          }}"
          alt=""
        />
      </div>
      }
    </div>
  </div>
  <!-- Genre columns -->
  @for (filmGenre of filmGenres; track filmGenre) {
  <!-- Movie available in genre -->
  @if (allMovies(filmGenre).length > 0) {
  <div class="category">
    <p>{{ filmGenre }}</p>
    <div class="movies">
      @for (movie of allMovies(filmGenre); track movie) {
      <div class="movie" (click)="openCurrentMovie(movie.id)">
        <img
          [ngClass]="{ selected: movie.id === currentMovie }"
          src="{{
            environmentBaseUrl +
              '/media/thumbnails/' +
              movie.id +
              '/' +
              movie.file_name +
              '_480p.jpg'
          }}"
          alt=""
        />
      </div>
      }
    </div>
  </div>
  } }
</section>
