<mat-card class="mat-elevation-z8  spacing-below">
    <mat-card-header>{{'MediaDetails.Casts.CastTitle' | translate}}</mat-card-header>
    <mat-card-content>
        <p-carousel [value]="cast" easing="easeOutStrong" [responsiveOptions]="responsiveOptions"  [numVisible]="5" >
            <ng-template let-item pTemplate="item">
                <div class="row justify-content-md-center mat-card mat-card-flat carousel-item">
                    <div class="bottom-space">
                        <a *ngIf="item.image" [routerLink]="'/discover/actor/' + item.id">
                            <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.image}}">
                        </a>
                        <a *ngIf="item.profile_path" [routerLink]="'/discover/actor/' + item.id">
                            <img class="cast-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}">
                        </a>
                        <!-- TODO get profile image default -->

                    </div>
                    <div class="col-12">
                        <span *ngIf="item.name"><strong>{{item.name}}</strong></span>
                        <span *ngIf="item.person"><strong>{{item.person}}</strong></span>
                    </div>
                    <div class="col-12">
                        <span *ngIf="item.character"><small>{{item.character}}</small></span>
                    </div>

                </div>
            </ng-template>
        </p-carousel>
    </mat-card-content>
</mat-card>