<mat-card class="mat-elevation-z8  spacing-below">
    <mat-card-header>{{'MediaDetails.Crews.CrewTitle' | translate}}</mat-card-header>
    <mat-card-content>
        <p-carousel [value]="crew" 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 [routerLink]="'/discover/actor/' + item.id" class="bottom-space link">
                        <a *ngIf="item.image">
                            <img class="crew-profile-img" src="https://image.tmdb.org/t/p/w300{{item.image}}">
                        </a>
                        <a *ngIf="item.profile_path">
                            <img class="crew-profile-img" src="https://image.tmdb.org/t/p/w300{{item.profile_path}}">
                        </a>
                        <i *ngIf="!item.image && !item.profile_path"  class="fa-solid fa-user-large  fa-2xl crew-profile-img" aria-hidden="true"></i>

                    </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.job"><small>{{item.job}}</small></span>
                        <span *ngIf="item.department"><small>{{item.position}}</small></span>
                        <span *ngIf="item.title"><small>{{item.title}}</small></span>
                        <span *ngIf="item.overview"><small>{{item.overview}}</small></span>
                    </div>

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