@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.releasedate) {
                <span class="details__tag">{{ serial.info.releasedate }}</span>
            }
            @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>
            }
        </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.name
                            ) {
                                <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) {
                <div class="details__meta-item">
                    <span class="label">{{
                        'XTREAM.DIRECTOR' | translate
                    }}</span>
                    <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 }}
                        </span>
                        @if (action.episodeLabel) {
                            <span class="play-btn__meta">
                                {{ action.episodeLabel }}
                            </span>
                        }
                    </span>
                </button>
            }
            <app-favorites-button [itemId]="serial.id" [item]="serial" />
        </ng-template>

        @if (inlinePlayback(); as playback) {
            <app-portal-inline-player
                detail-player
                [playback]="playback"
                [episodeMetadata]="inlineEpisodeMetadata()"
                [seriesNavigation]="inlineSeriesNavigation()"
                (timeUpdate)="handleInlineTimeUpdate($event)"
                (closed)="closeInlinePlayer()"
                (backClicked)="goBack()"
                (streamUrlCopied)="showCopyNotification()"
                (playbackEnded)="handleInlinePlaybackEnded()"
                (previousEpisodeRequested)="playPreviousEpisode()"
                (nextEpisodeRequested)="playNextEpisode()"
                (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()"
                [isLoading]="
                    isVodSeriesSeasonsLoading() ||
                    isCurrentSeasonLoading(seasonContainer?.selectedSeason())
                "
                (seasonSelected)="onSeasonSelected($event)"
                (episodeClicked)="onEpisodeClicked($event)"
                (episodeDownloadRequested)="downloadEpisode($event)"
                (playbackToggleRequested)="
                    handlePlaybackToggleRequested($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>
}