<div class="section-header" style="z-index: 1;">{{title}}</div>
<div class="contain row">

  <div class="left-arrow" [attr.id]="elementId+'leftarrow'" style="cursor: pointer"> <div [ngClass]="{'controls' : carouselStyle=='horizontal','controls-v' : carouselStyle=='vertical'}" (click)="leftClick();"><em class="fa fa-chevron-left fa-2x" aria-hidden="true"></em></div> </div>

  <div class="row1" [attr.id]="elementId">
    <div class="row__inner">
      <ng-container *ngIf="data">
        <div class="tile" *ngFor="let item of data;let i = index">
          <div class="tile__media" (click)="loadVideo(item)">
            <img alt="title" class="tile__img" [attr.src]="item.img" />
          </div>
          <div class="{{item.selected}}">
            <em [ngStyle]="{'visibility':item.selected ? 'visible':'hidden'}" class="fa fa-caret-down" aria-hidden="false"></em>
          </div>
          <div [ngClass]="{'tile__details' : carouselStyle=='horizontal','tile__details_v' : carouselStyle=='vertical'}">
            <div class="textonly">

              <div class="playpanel">
                <div style="cursor: pointer" (click)="loadVideo(item)" class="playbutton"><em class="fa fa-play" aria-hidden="true"></em></div>
              </div>

              <span class="carousel-title" *ngIf="item.title">{{item.title}}</span><br>
              <span class="match">{{item.matchPercentage}} Match</span> {{item.releaseYear}} <span class="age mini">{{item.ageLimit}}</span> {{item.seasonNo}}<br>
              <div class="subtitle">{{item.desc}}</div>

            </div>
            <div class="actionpanel"   *ngIf="item.content">
              <div style="cursor: pointer;" (click)="openDetailsSection(item)"><em class="fa fa-chevron-down fa-2x" aria-hidden="true"></em></div>
            </div>


          </div>
        </div>
      </ng-container>
    </div>
  </div>

  <ng-container *ngIf="carouselStyle=='horizontal'">
    <div class="right-arrow" [attr.id]="elementId+'rightarrow'" style="cursor: pointer"> <div [ngClass]="{'controls' : carouselStyle=='horizontal','controls-v' : carouselStyle=='vertical'}" (click)="rightClick();"><em class="fa fa-chevron-right fa-2x" aria-hidden="true"></em></div></div>
  </ng-container>

  <ng-container *ngIf="carouselStyle=='vertical'">
    <div class="right-arrow-tall" [attr.id]="elementId+'rightarrow'" style="cursor: pointer"> <div [ngClass]="{'controls' : carouselStyle=='horizontal','controls-v' : carouselStyle=='vertical'}" (click)="rightClick();"><em class="fa fa-chevron-right fa-2x" aria-hidden="true"></em></div></div>
  </ng-container>

</div>

<div [attr.id]="elementId+'carousel-detail-content'" class="collapse" *ngIf="hasDetail && displayDetail">
  <amexio-ee-content [bg-image-url]="currentDetailsImagePath"
                     [title]="currentDetailsTitle" [description]="currentDetailsDesc"
                     [contents]="currentContent" [link]="videoUrl"
                     (onWatchClick)="playVideo(videoUrl)" (onCloseClick)="closeDetailPage()"
                     [rate]="rate" [watch]="true" [my-list]="true"
                     [close]="true" [season-no]="seasonNo" [release-year]="releaseYear" [age-limit]="ageLimit" [match-percentage]="matchPercentage"
  ></amexio-ee-content>
</div>
