<div class="left-panel-details">
    <div>
        <div class="rating medium-font">
            <span *ngIf="tv.rating">
                <img class="rating-small" src="{{baseUrl}}/images/tmdb-logo.svg"> {{tv.rating * 10}}%
            </span>
            <span *ngIf="ratings?.score && ratings?.class">
                <img class="rating-small" src="{{baseUrl}}/images/{{ratings.class === 'rotten' ? 'rotten-rotten.svg' : 'rotten-fresh.svg'}}"> {{ratings.score}}%
            </span>
        </div>
        <div *ngIf="streams?.length > 0" id="streamingContainer" class="streaming-on-container">
            <hr>
            <div class="streaming-on-content">
                <span class="label">{{'MediaDetails.StreamingOn' | translate }}:</span>
                <div>
                    <span *ngFor="let stream of sortBy('order')">
                        <img class="stream-small" id="stream{{stream.streamingProvider}}" [matTooltip]="stream.streamingProvider" src="https://image.tmdb.org/t/p/original{{stream.logo}}">
                    </span>
                </div>
            </div>
        </div>
        <hr>
        <div *ngIf="tv.status">
            <span  class="label">{{'MediaDetails.Status' | translate }}:</span>
                <span id="status"> {{tv.status}}</span>
        </div>
        <span class="label">First Aired:</span>
            {{tv.firstAired | date: 'mediumDate'}}
    </div>

    <div *ngIf="seasonCount">
        <span class="label">Seasons:</span>
            {{seasonCount}}
    </div>
    <div *ngIf="totalEpisodes">
        <span class="label">Episodes:</span>
            {{totalEpisodes}}
    </div>

    <div *ngIf="advancedOptions && request?.rootPathOverrideTitle">
        <span class="label">{{'MediaDetails.RootFolderOverride' | translate }}:</span>
        <div>{{request.rootPathOverrideTitle}}</div>
    </div>
    <div *ngIf="advancedOptions && request?.qualityOverrideTitle">
        <span class="label">{{'MediaDetails.QualityOverride' | translate }}:</span>
        <div>{{request.qualityOverrideTitle}}</div>
    </div>

    <div>
        <span class="label">{{'MediaDetails.Runtime' | translate }}:</span>
            {{'MediaDetails.Minutes' | translate:{ runtime: tv.runtime} }}
    </div>

    <div *ngIf="tv.network">
        <span class="label">Network:</span>
            {{tv.network.name}}
    </div>


    <div class="genre-button-container" *ngIf="tv.genres">
        <span class="label">{{'MediaDetails.Genres' | translate }}:</span>
        <div>
            <mat-chip-list>
                <mat-chip selected *ngFor="let genre of tv.genres">
                    {{genre.name}}
                </mat-chip>
            </mat-chip-list>
        </div>
    </div>

    <hr />
    <div class="keyword-button-container" *ngIf="tv?.keywords?.keywordsValue?.length > 0">
        <span class="label">{{'MediaDetails.Keywords' | translate }}:</span>
        <mat-chip-list>
            <mat-chip selected *ngFor="let keyword of tv.keywords.keywordsValue">
                {{keyword.name}}
            </mat-chip>
        </mat-chip-list>
    </div>

</div>

