@let item = selectedItem();
@if (item?.info) {
    <app-content-hero
        [title]="item.info?.name"
        [description]="item.info?.plot"
        [posterUrl]="item.info?.cover"
        [backdropUrl]="item.info?.backdrop_path?.[0]"
        (backClicked)="goBack()"
    >
        <ng-container hero-tags>
            @if (item.info?.releaseDate) {
                <span class="details__tag">{{
                    item.info.releaseDate | slice: 0 : 4
                }}</span>
            }
            @if (item.info?.genre) {
                <span class="details__tag">{{ item.info.genre }}</span>
            }
            @if (item.info?.episode_run_time) {
                <span class="details__tag"
                    >{{ item.info.episode_run_time }} min/ep</span
                >
            }
            @if (item.info?.rating) {
                <span class="details__tag details__tag--rating">
                    ⭐ {{ item.info.rating }}
                </span>
            }
        </ng-container>

        <ng-container hero-meta>
            @if (item.info?.cast) {
                <div class="details__meta-item">
                    <span class="label">{{ 'XTREAM.CAST' | translate }}</span>
                    <span class="value">{{ item.info.cast }}</span>
                </div>
            }
            @if (item.info?.director) {
                <div class="details__meta-item">
                    <span class="label">{{
                        'XTREAM.DIRECTOR' | translate
                    }}</span>
                    <span class="value">{{ item.info.director }}</span>
                </div>
            }
        </ng-container>

        <ng-container hero-actions>
            @if (!isFavorite()) {
                <button class="favorite-btn" (click)="toggleFavorite()">
                    <mat-icon>add</mat-icon>
                    {{ 'PORTALS.ADD_TO_FAVORITES' | translate }}
                </button>
            } @else {
                <button
                    class="favorite-btn favorite-btn--active"
                    (click)="toggleFavorite()"
                >
                    <mat-icon>check</mat-icon>
                    {{ 'PORTALS.REMOVE_FROM_FAVORITES' | translate }}
                </button>
            }
        </ng-container>

        @if (inlinePlayback(); as playback) {
            <app-portal-inline-player
                [playback]="playback"
                (timeUpdate)="handleInlineTimeUpdate($event)"
                (closed)="closeInlinePlayer()"
                (streamUrlCopied)="showCopyNotification()"
            />
        }

        <app-season-container
            [seasons]="item.episodes"
            [seriesId]="item.series_id"
            [playlistId]="currentPlaylistId()"
            [seriesTitle]="item.info?.name"
            [playbackPositions]="episodePlaybackPositions()"
            [xtreamDownloadContext]="xtreamDownloadContext()"
            [openingEpisodeId]="openingEpisodeId()"
            [activeEpisodeId]="activeEpisodeId()"
            (episodeClicked)="playEpisode($event)"
            (playbackToggleRequested)="handlePlaybackToggleRequested($event)"
        />
    </app-content-hero>
} @else if (detailsError()) {
    <app-content-hero
        [errorMessage]="detailsError()"
        (backClicked)="goBack()"
    />
} @else {
    <app-content-hero [isLoading]="true" (backClicked)="goBack()" />
}