<section
  [ngClass]="{
    fullVh: !screenWidth
  }"
>
  <div
    class="movie-banner"
    [ngStyle]="{
      'background-image':
        'url(' +
        environmentBaseUrl +
        '/media/thumbnails/' +
        currentMovie[0]?.id +
        '/' +
        currentMovie[0]?.file_name +
        '_1080p.jpg' +
        ')',
    }"
    [ngClass]="{
      fullVhBanner: !screenWidth
    }"
  ></div>
  @if (currentMovie.length > 0) {
  <div
    class="content"
    [ngClass]="{
      fullVhContent: !screenWidth
    }"
  >
    <div class="title">{{ currentMovie[0].title }}</div>
    <div
      class="description hide-scrollbar"
      [ngClass]="{
        fullVhDescription: !screenWidth
      }"
    >
      {{ currentMovie[0].description }}
    </div>
    <div class="buttons">
      <app-btn-small
        *ngIf="!screenWidth"
        [imgPath]="'back'"
        [imgRadius]="'24px'"
        (click)="backToCategory([])"
      ></app-btn-small>
      <app-btn-large
        [value]="'Play'"
        [imgPath]="'play'"
        [imgReverse]="true"
        [disabled]="!isAnyResolutionUploaded()"
        (click)="
          playMovieId(
            environmentBaseUrl +
              '/media/videos/' +
              currentMovie[0]?.id +
              '/' +
              currentMovie[0]?.file_name
          )
        "
      ></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>
