@let item = selectedItem();
@if (selectedVodInfo(); as info) {
    <app-content-hero
        [title]="info.name || item?.movie_data?.name"
        [description]="info.description || info.plot"
        [posterUrl]="info.movie_image || info.cover_big"
        [backdropUrl]="getBackdropUrl(info)"
        (backClicked)="goBack()"
    >
        <ng-container hero-tags>
            @if (info.releasedate) {
                <span class="details__tag">{{
                    info.releasedate | slice: 0 : 4
                }}</span>
            }
            @if (info.genre) {
                <span class="details__tag">{{ info.genre }}</span>
            }
            @if (info.duration) {
                <span class="details__tag">{{ info.duration }}</span>
            }
            @if (info.rating_imdb) {
                <span class="details__tag details__tag--rating">
                    ⭐ {{ info.rating_imdb }}
                </span>
            }
            @if (info.country) {
                <span class="details__tag">{{ info.country }}</span>
            }
        </ng-container>

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

        <ng-container hero-actions>
            @if (hasPlaybackPosition()) {
                <button
                    class="play-btn play-btn--resume"
                    (click)="onPrimaryAction(item)"
                    [disabled]="isExternalLaunchPending()"
                    [class.play-btn--state-launching]="
                        externalPrimaryButtonState() === 'launching'
                    "
                    [class.play-btn--state-stop]="
                        externalPrimaryButtonState() === 'stop'
                    "
                >
                    <span class="play-btn__icon-shell" aria-hidden="true">
                        <mat-icon class="play-btn__icon">{{
                            externalPrimaryIcon()
                        }}</mat-icon>
                    </span>
                    <span class="play-btn__label">
                        @if (externalPrimaryLabel(); as label) {
                            {{ label }}
                        } @else {
                            {{ 'XTREAM.RESUME' | translate }}
                            {{ formatPosition() }}
                        }
                    </span>
                </button>
                @if (!isExternalStopAction()) {
                    <button
                        class="play-btn play-btn--restart"
                        (click)="playVod(item)"
                    >
                        <mat-icon>replay</mat-icon>
                        {{ 'XTREAM.RESTART' | translate }}
                    </button>
                }
            } @else {
                <button
                    class="play-btn"
                    (click)="onPrimaryAction(item)"
                    [disabled]="isExternalLaunchPending()"
                    [class.play-btn--state-launching]="
                        externalPrimaryButtonState() === 'launching'
                    "
                    [class.play-btn--state-stop]="
                        externalPrimaryButtonState() === 'stop'
                    "
                >
                    <span class="play-btn__icon-shell" aria-hidden="true">
                        <mat-icon class="play-btn__icon">{{
                            externalPrimaryIcon()
                        }}</mat-icon>
                    </span>
                    <span class="play-btn__label">
                        @if (externalPrimaryLabel(); as label) {
                            {{ label }}
                        } @else {
                            {{ 'XTREAM.PLAY' | translate }}
                        }
                    </span>
                </button>
            }
            @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>
            }
            @if (isElectron()) {
                @if (isDownloaded()) {
                    <button
                        class="download-btn download-btn--completed"
                        (click)="playFromLocal()"
                    >
                        <mat-icon>play_circle</mat-icon>
                        {{ 'DOWNLOADS.PLAY_LOCAL' | translate }}
                    </button>
                } @else if (isDownloading()) {
                    <button
                        class="download-btn download-btn--downloading"
                        disabled
                    >
                        <mat-icon>downloading</mat-icon>
                        {{ 'DOWNLOADS.STATUS.DOWNLOADING' | translate }}
                    </button>
                } @else {
                    <button class="download-btn" (click)="downloadVod(item)">
                        <mat-icon>download</mat-icon>
                        {{ 'DOWNLOADS.DOWNLOAD' | translate }}
                    </button>
                }
            }
        </ng-container>

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

        @if (info.youtube_trailer) {
            <div class="youtube-trailer">
                <h3>{{ 'XTREAM.YOUTUBE_TRAILER' | translate }}</h3>
                <div class="trailer-wrapper">
                    <iframe
                        [src]="
                            'https://www.youtube.com/embed/' +
                                info.youtube_trailer | 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>
        }
    </app-content-hero>
} @else if (fallbackView(); as fallback) {
    <app-content-hero
        [title]="fallback.title"
        [posterUrl]="fallback.posterUrl"
        (backClicked)="goBack()"
    >
        <ng-container hero-tags>
            <span
                class="details__tag details__tag--status"
                data-testid="xtream-vod-fallback-status"
            >
                {{ 'XTREAM.DETAIL_FALLBACK.STATUS' | translate }}
            </span>
            @if (fallback.year) {
                <span class="details__tag">{{ fallback.year }}</span>
            }
            @if (fallback.rating) {
                <span class="details__tag details__tag--rating">
                    ⭐ {{ fallback.rating }}
                </span>
            }
            @if (fallback.added) {
                <span class="details__tag">{{ fallback.added }}</span>
            }
            @if (fallback.format) {
                <span class="details__tag">{{ fallback.format }}</span>
            }
        </ng-container>

        <ng-container hero-meta>
            <div
                class="details__fallback-note"
                data-testid="xtream-vod-fallback"
            >
                {{ 'XTREAM.DETAIL_FALLBACK.NOTE' | translate }}
            </div>

            @for (fact of fallback.facts; track fact.labelKey) {
                <div class="details__meta-item details__meta-item--fallback">
                    <span class="label">{{ fact.labelKey | translate }}</span>
                    <span class="value" [class.value--mono]="fact.monospace">
                        {{ fact.value }}
                    </span>
                </div>
            }
        </ng-container>
    </app-content-hero>
} @else if (detailsError()) {
    <app-content-hero
        [errorMessage]="detailsError() ?? undefined"
        (backClicked)="goBack()"
    />
} @else {
    <app-content-hero [isLoading]="true" (backClicked)="goBack()" />
}