<section
  [ngClass]="{
    fullVh: !isWideScreen
  }"
>
  <div
    class="movie-banner"
    [ngClass]="{
      fullVhBanner: !isWideScreen
    }"
  >
    <!-- Fallback image is displayed before the video is loaded -->
    <img *ngIf="!isVideoLoaded" [src]="thumbnailUrl" class="fallback-image" />
    <video
      #videoElement
      *ngIf="currentMovie[0].id"
      [src]="videoUrl"
      poster="{{ thumbnailUrl }}"
      autoplay
      muted
      loop
      playsinline
      class="video-banner"
      (canplay)="onVideoLoad()"
      (error)="onVideoError()"
    ></video>
  </div>

  @if (currentMovie.length > 0) {
  <div
    class="content"
    [ngClass]="{
      fullVhContent: !isWideScreen
    }"
  >
    <div class="title">{{ currentMovie[0].title }}</div>
    <div
      class="description hide-scrollbar"
      [ngClass]="{
        fullVhDescription: !isWideScreen
      }"
    >
      {{ currentMovie[0].description }}
    </div>
    <div class="buttons">
      <app-btn-small
        *ngIf="!isWideScreen"
        [imgPath]="'back'"
        [imgRadius]="'24px'"
        (click)="backToCategory([])"
      ></app-btn-small>
      <app-btn-large
        [value]="'Play'"
        [imgPath]="'play'"
        [imgReverse]="true"
        [disabled]="!isAnyResolutionUploaded()"
        (click)="playMovieId(playUrl, currentMovie[0].id)"
      ></app-btn-large>
      <div class="favorite-img" (click)="toggleLikeMovie(currentMovie[0].id)">
        @if(checkLikeMovies(currentMovie[0].id)) {
        <img
          class="filled"
          src="./../../../../assets/img/favorite-filled.svg"
          alt=""
        />
        } @else {
        <img
          class="outlined"
          src="./../../../../assets/img/favorite-outlined.svg"
          alt=""
        />
        }
      </div>
      <p *ngIf="!isAnyResolutionUploaded()">
        (The video is being converted)
        <a (click)="refreshPage(currentMovie)">Refresh</a>
      </p>
    </div>
  </div>
  }
</section>
