@let item = selectedItem();
@if (item && item.info) {
    @let info = item.info;
    @let hero = heroPresenter.hero;
    <app-portal-detail-shell
        [title]="hero.title()"
        [kindLabel]="hero.kindLabel()"
        [description]="info.plot"
        [posterUrl]="info.cover"
        [backdropUrl]="getBackdropUrl(info)"
        [trailerBackdropUrl]="heroPresenter.trailerBackdropUrl()"
        [contentKey]="
            'xtream-series:' + currentPlaylistId() + ':' + item.series_id
        "
        [playbackActive]="!!inlinePlayback()"
        (backClicked)="goBack()"
        (closePlayerRequested)="closeInlinePlayer()"
    >
        <ng-template appDetailTags>
            @if (hero.seasonChip(); as season) {
                <app-meta-chip data-test-id="series-season-chip">
                    {{ 'PORTALS.SEASON_TAB' | translate: { number: season } }}
                </app-meta-chip>
            }
            @if (hero.statusLabel(); as status) {
                <app-meta-chip
                    variant="status"
                    data-test-id="series-status-chip"
                >
                    {{ status }}
                </app-meta-chip>
            }
            @if (hero.year(); as year) {
                <app-meta-chip>
                    @if (
                        info.releaseDate &&
                        discover.canOpenYear(info.releaseDate)
                    ) {
                        <button
                            type="button"
                            class="meta-chip__facet"
                            (click)="discover.openYear(info.releaseDate)"
                        >
                            {{ year }}
                        </button>
                    } @else {
                        {{ year }}
                    }
                </app-meta-chip>
            }
            @if (hero.genreChips().length) {
                <app-meta-chip>
                    @for (genre of hero.genreChips(); track genre.label) {
                        @if (!$first) {
                            <span class="meta-chip__sep" aria-hidden="true"
                                >·</span
                            >
                        }
                        @if (genre.facet; as facet) {
                            <button
                                type="button"
                                class="meta-chip__facet"
                                (click)="discover.openGenre(facet)"
                            >
                                {{ genre.label }}
                            </button>
                        } @else {
                            {{ genre.label }}
                        }
                    }
                </app-meta-chip>
            }
            @if (info.episode_run_time) {
                <app-meta-chip
                    >{{ info.episode_run_time }} min/ep</app-meta-chip
                >
            }
            @for (country of hero.countryChips(); track country.label) {
                <app-meta-chip>
                    @if (country.facet; as facet) {
                        <button
                            type="button"
                            class="meta-chip__facet"
                            (click)="discover.openCountry(facet)"
                        >
                            {{ country.label }}
                        </button>
                    } @else {
                        {{ country.label }}
                    }
                </app-meta-chip>
            }
            @if (info.rating) {
                <app-meta-chip variant="rating"
                    >★ {{ info.rating }}</app-meta-chip
                >
            }
        </ng-template>

        <ng-template appDetailMeta>
            <app-detail-credits
                [cast]="hero.castNames()"
                [directors]="hero.directorNames()"
                (moreRequested)="scrollToCast()"
            />
        </ng-template>

        <ng-template appDetailActions>
            @if (hero.primaryAction(); as primary) {
                <app-detail-action-button
                    [label]="primary.label"
                    [meta]="primary.meta"
                    [icon]="primary.icon"
                    [disabled]="primary.disabled"
                    testId="series-quick-start"
                    (pressed)="playQuickStartEpisode()"
                />
            }
            @if (heroPresenter.trailerEmbedUrl()) {
                <app-detail-action-button
                    variant="secondary"
                    icon="smart_display"
                    [label]="'PORTALS.DETAIL.TRAILER' | translate"
                    testId="series-trailer"
                    (pressed)="heroPresenter.openTrailer()"
                />
            }
            <app-detail-icon-button
                [label]="
                    (isFavorite()
                        ? 'PORTALS.REMOVE_FROM_FAVORITES'
                        : 'PORTALS.ADD_TO_FAVORITES'
                    ) | translate
                "
                [icon]="isFavorite() ? 'favorite' : 'favorite_border'"
                tone="favorite"
                [active]="isFavorite()"
                [pressedState]="isFavorite()"
                testId="series-favorite-toggle"
                (pressed)="toggleFavorite()"
            />
            <app-vod-more-menu
                [sections]="menu.sections()"
                [label]="'PORTALS.DETAIL.MORE_ACTIONS' | translate"
                testId="series-more-menu"
                (selected)="menu.run($event)"
            />
            <app-view-in-portal-action />
        </ng-template>

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

        <app-season-container
            #seasonContainer
            detail-episodes
            [seasons]="item.episodes"
            [seriesId]="item.series_id"
            [playlistId]="currentPlaylistId()"
            [seriesTitle]="info.name"
            [playbackPositions]="episodePlaybackPositions()"
            [downloadAdapter]="episodeDownloadAdapter()"
            [downloadsEnabled]="!providerOnly()"
            [openingEpisodeId]="openingEpisodeId()"
            [activeEpisodeId]="activeEpisodeId()"
            [playingEpisodeId]="
                inlinePlayback()?.contentInfo?.contentXtreamId ?? null
            "
            [seasonDescriptions]="seasonDescriptions()"
            [seasonPosters]="seasonPosters()"
            [seasonWatchBatchRunning]="seasonWatchBatchRunning()"
            (episodeClicked)="playEpisode($event)"
            (playbackToggleRequested)="handlePlaybackToggleRequested($event)"
            (seasonPlaybackToggleRequested)="
                handleSeasonPlaybackToggleRequested($event)
            "
            (seriesPlaybackToggleRequested)="
                handleSeriesPlaybackToggleRequested($event)
            "
            (seasonSelected)="onSeasonSelected($event)"
        />

        <div detail-extras>
            <app-cast-crew-row
                [cast]="hero.castMembers()"
                [directors]="hero.directorMembers()"
                (personSelected)="openActor($event)"
            />
            <app-similar-rail
                [title]="'XTREAM.SIMILAR' | translate"
                [items]="heroPresenter.similarRailItems()"
                (selected)="heroPresenter.openSimilarRailItem($event)"
            />
        </div>
    </app-portal-detail-shell>
} @else if (detailsError()) {
    <app-portal-detail-shell
        [errorMessage]="detailsError() ?? undefined"
        (backClicked)="goBack()"
    />
} @else {
    <app-portal-detail-shell [isLoading]="true" (backClicked)="goBack()" />
}