<div *ngIf='videoList && videoList.length > 0' class="content-screen row">

    <div class="headerTitle">
        <span class="playListHeading">Playlist</span>
        <span style="float: right;" *ngIf='videoList.length > 6;'>
            <span class="see-all-section" *ngIf='showAll' (click)="showAll = false; displayLength = videoList.length;">
                <span class="sea-all-href">See all ({{videoList.length}})</span>
            </span>

            <span class="see-all-section" *ngIf='!showAll' (click)="showAll = true; displayLength = 6;">
                <span class="sea-all-href">See Less</span>
            </span>
        </span>
    </div>

    <div class="content-container">
        <div class="small-12 medium-4 large-2 column card-containers" *ngFor="let item of videoList |slice:0:displayLength  ; let $index = index ">
            <div class="example-card" (click)="onSelectVideo(item, $index)" [class.selected]="item === currentItem">
                <div class="content-img-container">
                    <img class="doc-type-icon" [src]="hostUrl+item.imagePath" (error)="brokenImage($event, $index)">
                    <div class="mediaPlayButton" *ngIf="item.attachment === currentItem?.attachment">
                        <span>
                            <i class="material-icons playLargeButtn">play_circle_filled</i>
                        </span>
                    </div>
                    <div *ngIf="item.time.total" class="time">
                        <span class="totalTIme">{{item.time.total | date:'mm:ss':'+0000'}}</span>
                    </div>
                </div>
                <div class="course-content-card-footer">
                    <div class="course-content-details">
                        <span class="course-content-shDescr" matTooltip="{{item.contentName}}" matTooltipPosition="below">
                            {{ item.contentName }}
                        </span>
                    </div>
                    <div class="content-doc-detail">
                        <span class="content-doc-access" matTooltip="{{item.contentDescr}}" matTooltipPosition="below">
                            {{item.contentDescr}}
                        </span>
                    </div>
                    <div class="showLine">
                        <span class="videoStatusLine" [ngStyle]="{'background-color': item.accessPos >= 100 ? 'lightgreen' : 'rgba(255, 0, 0, 0.52)' , 'width.%' : item.accessPos}"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>