@if (displayItem(); as serial) {
    <app-portal-detail-shell
        [title]="serial.info.name"
        [description]="serial.info.description"
        [posterUrl]="serial.info.movie_image"
        [backdropUrl]="serial.info.tmdb_backdrop"
        [playbackActive]="!!inlinePlayback()"
        (backClicked)="goBack()"
        (closePlayerRequested)="closeInlinePlayer()"
    >
        <!-- Tags: Year, Genre, Rating -->
        <ng-template appDetailTags>
            @if (serial.info.tmdb_status; as status) {
                <span class="details__tag details__tag--status">{{
                    seriesStatusLabelKey(status) | translate
                }}</span>
            }
            @if (serial.info.releasedate) {
                @if (discover.canOpenYear(serial.info.releasedate)) {
                    <button
                        type="button"
                        class="details__tag details__tag--clickable"
                        (click)="discover.openYear(serial.info.releasedate)"
                    >
                        {{ discover.yearLabel(serial.info.releasedate) }}
                    </button>
                } @else {
                    <span class="details__tag">{{
                        discover.yearLabel(serial.info.releasedate) ??
                            serial.info.releasedate
                    }}</span>
                }
            }
            @if (serial.info.tmdb_genres?.length) {
                @for (genre of serial.info.tmdb_genres; track genre.id) {
                    <button
                        type="button"
                        class="details__tag details__tag--clickable"
                        (click)="discover.openGenre(genre)"
                    >
                        {{ genre.name }}
                    </button>
                }
            } @else if (serial.info.genre) {
                <span class="details__tag">{{ serial.info.genre }}</span>
            }
            @if (serial.info.rating_imdb) {
                <span class="details__tag details__tag--rating">
                    ⭐ {{ serial.info.rating_imdb }}
                </span>
            }
            @if (serial.info.rating_kinopoisk) {
                <span class="details__tag">
                    KP {{ serial.info.rating_kinopoisk }}
                </span>
            }
            @if (serial.info.tmdb_countries?.length) {
                @for (
                    country of serial.info.tmdb_countries;
                    track country.code
                ) {
                    <button
                        type="button"
                        class="details__tag details__tag--clickable"
                        (click)="discover.openCountry(country)"
                    >
                        {{ country.name }}
                    </button>
                }
            }
        </ng-template>

        <!-- Metadata Grid -->
        <ng-template appDetailMeta>
            @if (serial.info.actors || serial.info.tmdb_cast?.length) {
                <div class="details__meta-item">
                    <span class="label">{{ 'XTREAM.ACTORS' | translate }}</span>
                    @if (serial.info.tmdb_cast?.length) {
                        <div class="details__cast-strip">
                            @for (
                                member of serial.info.tmdb_cast;
                                track member.tmdbPersonId
                                    ? 'p' + member.tmdbPersonId
                                    : 'i' + $index
                            ) {
                                <span
                                    class="details__cast-chip"
                                    [class.details__cast-chip--clickable]="
                                        !!member.tmdbPersonId
                                    "
                                    (click)="openActor(member)"
                                    [title]="
                                        member.character
                                            ? member.name +
                                              ' — ' +
                                              member.character
                                            : member.name
                                    "
                                >
                                    @if (member.profileUrl) {
                                        <img
                                            class="details__cast-avatar"
                                            [src]="member.profileUrl"
                                            [alt]="member.name"
                                            loading="lazy"
                                        />
                                    } @else {
                                        <span
                                            class="details__cast-avatar details__cast-avatar--fallback"
                                        >
                                            {{ member.name.charAt(0) }}
                                        </span>
                                    }
                                    <span class="details__cast-name">{{
                                        member.name
                                    }}</span>
                                </span>
                            }
                        </div>
                    } @else {
                        <span class="value">{{ serial.info.actors }}</span>
                    }
                </div>
            }
            @if (serial.info.director || serial.info.tmdb_directors?.length) {
                <div class="details__meta-item">
                    <span class="label">{{
                        'XTREAM.DIRECTOR' | translate
                    }}</span>
                    @if (serial.info.tmdb_directors?.length) {
                        <div class="details__cast-strip">
                            @for (
                                member of serial.info.tmdb_directors;
                                track member.tmdbPersonId
                                    ? 'p' + member.tmdbPersonId
                                    : 'i' + $index
                            ) {
                                <span
                                    class="details__cast-chip"
                                    [class.details__cast-chip--clickable]="
                                        !!member.tmdbPersonId
                                    "
                                    (click)="openActor(member)"
                                    [title]="member.name"
                                >
                                    @if (member.profileUrl) {
                                        <img
                                            class="details__cast-avatar"
                                            [src]="member.profileUrl"
                                            [alt]="member.name"
                                            loading="lazy"
                                        />
                                    } @else {
                                        <span
                                            class="details__cast-avatar details__cast-avatar--fallback"
                                        >
                                            {{ member.name.charAt(0) }}
                                        </span>
                                    }
                                    <span class="details__cast-name">{{
                                        member.name
                                    }}</span>
                                </span>
                            }
                        </div>
                    } @else {
                        <span class="value">{{ serial.info.director }}</span>
                    }
                </div>
            }
        </ng-template>

        <!-- Action Buttons -->
        <ng-template appDetailActions>
            @if (quickStartAction(); as action) {
                <button
                    class="play-btn"
                    data-testid="series-quick-start"
                    (click)="playQuickStartEpisode()"
                    [disabled]="action.disabled"
                >
                    <span class="play-btn__icon-shell" aria-hidden="true">
                        <mat-icon class="play-btn__icon">{{
                            action.icon
                        }}</mat-icon>
                    </span>
                    <span class="play-btn__copy">
                        <span class="play-btn__label">
                            {{
                                action.labelKey | translate: action.labelParams
                            }}
                        </span>
                        @if (action.episodeLabel) {
                            <span class="play-btn__meta">
                                {{ action.episodeLabel }}
                            </span>
                        }
                    </span>
                </button>
            }
            <app-favorites-button [itemId]="serial.id" [item]="serial" />
            <app-view-in-portal-action />
        </ng-template>

        @if (inlinePlayback(); as playback) {
            <app-portal-inline-player
                detail-player
                [playbackSessionKey]="playbackSessionKey()"
                [playback]="playback"
                [episodeMetadata]="inlineEpisodeMetadata()"
                [seriesTitle]="serial.info.name"
                [seriesNavigation]="inlineSeriesNavigation()"
                [upNextEpisodes]="upNextEpisodes()"
                [seriesEpisodes]="mappedSeasons()"
                [seasonPosters]="seasonPosters()"
                [episodePlaybackPositions]="episodePlaybackPositions()"
                [seasonLoadStates]="vodSeasonLoadStates()"
                (timeUpdate)="handleInlineTimeUpdate($event)"
                (closed)="closeInlinePlayer()"
                (streamUrlCopied)="showCopyNotification()"
                (playbackEnded)="handleInlinePlaybackEnded()"
                (previousEpisodeRequested)="playPreviousEpisode()"
                (nextEpisodeRequested)="playNextEpisode()"
                (upNextEpisodeSelected)="playUpNextEpisode($event)"
                (episodePanelSeasonSelected)="onSeasonSelected($event)"
                (externalFallbackRequested)="
                    handleExternalFallbackRequest($event)
                "
            />
        }

        <!-- Seasons & Episodes -->
        @if (mappedSeasons()) {
            <app-season-container
                detail-episodes
                [seasons]="mappedSeasons()"
                [seriesId]="toSeriesId(serial.id)"
                [playlistId]="stalkerStore.currentPlaylist()?._id ?? ''"
                [seriesTitle]="serial.info.name"
                [playbackPositions]="episodePlaybackPositions()"
                [openingEpisodeId]="openingEpisodeId()"
                [activeEpisodeId]="activeEpisodeId()"
                [playingEpisodeId]="
                    inlinePlayback()?.contentInfo?.contentXtreamId ?? null
                "
                [seasonDescriptions]="seasonDescriptions()"
                [seasonPosters]="seasonPosters()"
                [downloadsEnabled]="!providerOnly()"
                [downloadAdapter]="episodeDownloadAdapter()"
                [isLoading]="
                    isVodSeriesSeasonsLoading() ||
                    isCurrentSeasonLoading(
                        $safeNavigationMigration(
                            seasonContainer?.selectedSeason()
                        )
                    )
                "
                [seasonWatchBatchRunning]="seasonWatchBatchRunning()"
                [hasUnloadedSeasons]="hasUnloadedVodSeasons()"
                (seasonSelected)="onSeasonSelected($event)"
                (episodeClicked)="onEpisodeClicked($event)"
                (playbackToggleRequested)="
                    handlePlaybackToggleRequestedFromUi($event)
                "
                (seasonPlaybackToggleRequested)="
                    handleSeasonPlaybackToggleRequestedFromUi($event)
                "
                (seriesPlaybackToggleRequested)="
                    handleSeriesPlaybackToggleRequestedFromUi($event)
                "
                #seasonContainer
            />
        }

        <div detail-extras>
            @if (similarInPortals().length) {
                <section class="details__similar" data-test-id="tmdb-similar">
                    <h3>{{ 'XTREAM.SIMILAR' | translate }}</h3>
                    <div class="details__similar-strip">
                        @for (
                            item of similarInPortals();
                            track item.match.xtreamId
                        ) {
                            <button
                                type="button"
                                class="details__similar-card"
                                [title]="
                                    item.title + ' — ' + item.match.playlistName
                                "
                                (click)="openSimilarInPortals(item)"
                            >
                                @if (item.posterUrl) {
                                    <img
                                        class="details__similar-poster"
                                        [src]="item.posterUrl"
                                        [alt]="item.title"
                                        loading="lazy"
                                    />
                                } @else {
                                    <span
                                        class="details__similar-poster details__similar-poster--fallback"
                                    >
                                        {{ item.title.charAt(0) }}
                                    </span>
                                }
                                <span class="details__similar-title">
                                    {{ item.title }}
                                </span>
                                <span class="details__similar-source">
                                    {{ item.match.playlistName }}
                                </span>
                            </button>
                        }
                    </div>
                </section>
            }

            <!-- YouTube Trailer (TMDB enrichment; Stalker provides none) -->
            @if (trailerEmbedUrl(); as trailerUrl) {
                <div class="youtube-trailer">
                    <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
                    <div class="trailer-wrapper">
                        <iframe
                            [src]="trailerUrl | safe"
                            title="YouTube video player"
                            allow="
                                accelerometer;
                                autoplay;
                                clipboard-write;
                                encrypted-media;
                                gyroscope;
                                picture-in-picture;
                                web-share;
                            "
                            referrerpolicy="strict-origin-when-cross-origin"
                            allowfullscreen
                        ></iframe>
                    </div>
                </div>
            }
        </div>
    </app-portal-detail-shell>
}