@if (detail(); as offlineDetail) {
    <app-portal-detail-shell
        [contentKey]="heroKey()"
        [title]="title()"
        [description]="description()"
        [posterUrl]="posterUrl()"
        [backdropUrl]="backdropUrl()"
        [backLabel]="'DOWNLOADS.OFFLINE_DETAIL.BACK' | translate"
        (backClicked)="goBack()"
    >
        <ng-template appDetailTags>
            <app-meta-chip class="offline-detail__available">
                <mat-icon aria-hidden="true">download_done</mat-icon>
                {{ 'DOWNLOADS.OFFLINE_DETAIL.AVAILABLE' | translate }}
            </app-meta-chip>
            @if (metadata()?.year; as year) {
                @if (positiveFinite(year)) {
                    <app-meta-chip>{{ year }}</app-meta-chip>
                }
            }
            @if (durationLabel(); as duration) {
                <app-meta-chip>{{ duration }}</app-meta-chip>
            }
            @for (genre of genres(); track genre) {
                <app-meta-chip>{{ genre }}</app-meta-chip>
            }
            @if (metadata()?.rating; as rating) {
                @if (positiveFinite(rating)) {
                    <app-meta-chip variant="rating">
                        <span aria-hidden="true">★</span> {{ rating }}
                    </app-meta-chip>
                }
            }
            @if (metadata()?.status; as status) {
                @if (status.trim()) {
                    <app-meta-chip variant="status">{{ status }}</app-meta-chip>
                }
            }
        </ng-template>

        <ng-template appDetailMeta>
            <app-detail-credits
                [cast]="castNames()"
                [directors]="creatorNames()"
                (moreRequested)="scrollToCast()"
            />
            @if (movieFileSize(); as size) {
                <div class="details__meta-item">
                    <span class="value">
                        {{
                            'DOWNLOADS.OFFLINE_DETAIL.FILE_SIZE'
                                | translate: { size }
                        }}
                    </span>
                </div>
            }
        </ng-template>

        <ng-template appDetailActions>
            @if (offlineDetail.kind === 'movie') {
                <button
                    mat-flat-button
                    type="button"
                    class="offline-detail__primary-action"
                    data-testid="offline-play"
                    [disabled]="isPending(offlineDetail.item)"
                    (click)="runFileAction('play', offlineDetail.item)"
                >
                    <mat-icon aria-hidden="true">play_arrow</mat-icon>
                    {{ 'DOWNLOADS.OFFLINE_DETAIL.PLAY' | translate }}
                </button>
            }

            <span
                class="offline-detail__portal-action"
                [attr.tabindex]="providerUnavailable() ? 0 : null"
                [attr.aria-describedby]="
                    providerUnavailable()
                        ? 'offline-view-in-portal-unavailable'
                        : null
                "
                [matTooltip]="
                    providerUnavailable()
                        ? ('DOWNLOADS.OFFLINE_DETAIL.VIEW_IN_PORTAL_UNAVAILABLE'
                          | translate)
                        : ''
                "
            >
                <button
                    mat-stroked-button
                    type="button"
                    data-testid="view-in-portal"
                    [disabled]="!canOpenInPortal() || providerPending()"
                    [attr.aria-busy]="
                        providerLoading() || providerPending() ? true : null
                    "
                    [attr.aria-describedby]="
                        providerUnavailable()
                            ? 'offline-view-in-portal-unavailable'
                            : null
                    "
                    (click)="viewInPortal()"
                >
                    <mat-icon aria-hidden="true">open_in_new</mat-icon>
                    {{ 'DOWNLOADS.OFFLINE_DETAIL.VIEW_IN_PORTAL' | translate }}
                </button>
            </span>
            @if (providerUnavailable()) {
                <span
                    id="offline-view-in-portal-unavailable"
                    class="offline-detail__visually-hidden"
                >
                    {{
                        'DOWNLOADS.OFFLINE_DETAIL.VIEW_IN_PORTAL_UNAVAILABLE'
                            | translate
                    }}
                </span>
            }

            @if (offlineDetail.kind === 'movie') {
                <button
                    mat-icon-button
                    type="button"
                    data-testid="movie-overflow"
                    [matMenuTriggerFor]="movieMenu"
                    [disabled]="isPending(offlineDetail.item)"
                    [attr.aria-label]="
                        ('DOWNLOADS.MORE_ACTIONS' | translate) + ': ' + title()
                    "
                >
                    <mat-icon aria-hidden="true">more_vert</mat-icon>
                </button>
                <mat-menu #movieMenu="matMenu">
                    <button
                        mat-menu-item
                        type="button"
                        data-testid="movie-reveal"
                        [disabled]="isPending(offlineDetail.item)"
                        (click)="runFileAction('reveal', offlineDetail.item)"
                    >
                        <mat-icon aria-hidden="true">folder_open</mat-icon>
                        <span>{{ 'DOWNLOADS.REVEAL' | translate }}</span>
                    </button>
                </mat-menu>
            }
        </ng-template>

        @if (offlineDetail.kind === 'series') {
            <section
                detail-episodes
                class="offline-detail__episodes"
                [attr.aria-label]="
                    'DOWNLOADS.OFFLINE_DETAIL.DOWNLOADED_EPISODES'
                        | translate
                            : {
                                  count: count(),
                              }
                "
            >
                <div
                    class="offline-detail__season-tabs"
                    role="tablist"
                    [attr.aria-label]="
                        'DOWNLOADS.OFFLINE_DETAIL.DOWNLOADED_EPISODES'
                            | translate: { count: count() }
                    "
                >
                    @for (
                        season of offlineDetail.seasons;
                        track seasonTestId(season);
                        let seasonIndex = $index
                    ) {
                        <button
                            type="button"
                            role="tab"
                            class="offline-detail__season-tab"
                            [class.offline-detail__season-tab--selected]="
                                isSelectedSeason(season)
                            "
                            [attr.aria-selected]="isSelectedSeason(season)"
                            [attr.tabindex]="seasonTabIndex(season)"
                            [id]="seasonTabId(season)"
                            [attr.aria-controls]="
                                seasonTestId(season) + '-panel'
                            "
                            [attr.data-testid]="seasonTestId(season)"
                            (click)="selectSeason(season)"
                            (keydown)="onSeasonKeydown($event, seasonIndex)"
                        >
                            <span>
                                @if (season.seasonNumberState === 'known') {
                                    {{
                                        'DOWNLOADS.SEASON'
                                            | translate
                                                : {
                                                      season: season.seasonNumber,
                                                  }
                                    }}
                                } @else {
                                    S??
                                }
                            </span>
                            <span class="offline-detail__season-count">
                                {{
                                    'DOWNLOADS.OFFLINE_DETAIL.DOWNLOADED_EPISODES'
                                        | translate
                                            : { count: season.episodes.length }
                                }}
                            </span>
                        </button>
                    }
                </div>

                @if (selectedSeason(); as season) {
                    <div
                        role="tabpanel"
                        class="offline-detail__episode-list"
                        [id]="seasonTestId(season) + '-panel'"
                        [attr.aria-labelledby]="seasonTabId(season)"
                    >
                        @for (
                            episode of season.episodes;
                            track episode.item.id
                        ) {
                            <article
                                class="offline-detail__episode"
                                [attr.data-testid]="
                                    'offline-episode-' + episode.item.id
                                "
                            >
                                <div class="offline-detail__episode-copy">
                                    <span class="offline-detail__coordinate">
                                        {{
                                            episodeCoordinate(
                                                episode.seasonNumber,
                                                episode.episodeNumber
                                            )
                                        }}
                                    </span>
                                    <strong
                                        class="offline-detail__episode-title"
                                    >
                                        {{
                                            episodeTitle(
                                                episode.item,
                                                $safeNavigationMigration(
                                                    episode.episodeMetadata
                                                        ?.title
                                                )
                                            )
                                        }}
                                    </strong>
                                    <div class="offline-detail__episode-facts">
                                        @if (
                                            formatItemBytes(episode.item);
                                            as size
                                        ) {
                                            <span>
                                                {{
                                                    'DOWNLOADS.OFFLINE_DETAIL.FILE_SIZE'
                                                        | translate: { size }
                                                }}
                                            </span>
                                        }
                                        <span
                                            class="offline-detail__episode-available"
                                        >
                                            <mat-icon aria-hidden="true"
                                                >download_done</mat-icon
                                            >
                                            {{
                                                'DOWNLOADS.OFFLINE_DETAIL.AVAILABLE'
                                                    | translate
                                            }}
                                        </span>
                                    </div>
                                </div>
                                <div class="offline-detail__episode-actions">
                                    <button
                                        mat-flat-button
                                        type="button"
                                        [attr.data-testid]="
                                            'episode-play-' + episode.item.id
                                        "
                                        [disabled]="isPending(episode.item)"
                                        [attr.aria-label]="
                                            ('DOWNLOADS.OFFLINE_DETAIL.PLAY'
                                                | translate) +
                                            ': ' +
                                            episodeCoordinate(
                                                episode.seasonNumber,
                                                episode.episodeNumber
                                            ) +
                                            ' ' +
                                            episodeTitle(
                                                episode.item,
                                                $safeNavigationMigration(
                                                    episode.episodeMetadata
                                                        ?.title
                                                )
                                            )
                                        "
                                        (click)="
                                            runFileAction('play', episode.item)
                                        "
                                    >
                                        <mat-icon aria-hidden="true"
                                            >play_arrow</mat-icon
                                        >
                                        {{
                                            'DOWNLOADS.OFFLINE_DETAIL.PLAY'
                                                | translate
                                        }}
                                    </button>
                                    <button
                                        mat-icon-button
                                        type="button"
                                        [matMenuTriggerFor]="episodeMenu"
                                        [disabled]="isPending(episode.item)"
                                        [attr.data-testid]="
                                            'episode-overflow-' +
                                            episode.item.id
                                        "
                                        [attr.aria-label]="
                                            ('DOWNLOADS.MORE_ACTIONS'
                                                | translate) +
                                            ': ' +
                                            episodeTitle(
                                                episode.item,
                                                $safeNavigationMigration(
                                                    episode.episodeMetadata
                                                        ?.title
                                                )
                                            )
                                        "
                                    >
                                        <mat-icon aria-hidden="true"
                                            >more_vert</mat-icon
                                        >
                                    </button>
                                    <mat-menu #episodeMenu="matMenu">
                                        <button
                                            mat-menu-item
                                            type="button"
                                            [attr.data-testid]="
                                                'episode-reveal-' +
                                                episode.item.id
                                            "
                                            [disabled]="isPending(episode.item)"
                                            [attr.aria-label]="
                                                ('DOWNLOADS.REVEAL'
                                                    | translate) +
                                                ': ' +
                                                episodeCoordinate(
                                                    episode.seasonNumber,
                                                    episode.episodeNumber
                                                ) +
                                                ' ' +
                                                episodeTitle(
                                                    episode.item,
                                                    $safeNavigationMigration(
                                                        episode.episodeMetadata
                                                            ?.title
                                                    )
                                                )
                                            "
                                            (click)="
                                                runFileAction(
                                                    'reveal',
                                                    episode.item
                                                )
                                            "
                                        >
                                            <mat-icon aria-hidden="true">
                                                folder_open
                                            </mat-icon>
                                            <span>{{
                                                'DOWNLOADS.REVEAL' | translate
                                            }}</span>
                                        </button>
                                    </mat-menu>
                                </div>
                            </article>
                        }
                    </div>
                }
            </section>
        }
        <div detail-extras>
            <!-- No actor page offline: the people stay plain entries -->
            <app-cast-crew-row
                [cast]="castMembers()"
                [directors]="creatorMembers()"
                [interactive]="false"
            />
        </div>
    </app-portal-detail-shell>
} @else {
    <app-portal-detail-shell
        [isLoading]="showLoading()"
        [backLabel]="'DOWNLOADS.OFFLINE_DETAIL.BACK' | translate"
        [errorMessage]="
            redirectFailed()
                ? ('DOWNLOADS.FILE_NOT_FOUND' | translate)
                : showNotFound()
                  ? ('DOWNLOADS.OFFLINE_DETAIL.NOT_FOUND_TITLE' | translate)
                  : undefined
        "
        (backClicked)="goBack()"
    >
        @if (redirectFailed()) {
            <div hero-error-actions class="offline-detail__not-found-actions">
                <button
                    mat-stroked-button
                    type="button"
                    data-testid="redirect-back"
                    (click)="goBack()"
                >
                    <mat-icon aria-hidden="true">arrow_back</mat-icon>
                    {{ 'DOWNLOADS.OFFLINE_DETAIL.BACK' | translate }}
                </button>
                <button
                    mat-flat-button
                    type="button"
                    data-testid="redirect-retry"
                    (click)="retryRedirect()"
                >
                    <mat-icon aria-hidden="true">refresh</mat-icon>
                    {{ 'DOWNLOADS.RETRY' | translate }}
                </button>
            </div>
        } @else if (showNotFound()) {
            <div hero-error-actions class="offline-detail__not-found-actions">
                <p>
                    {{ 'DOWNLOADS.OFFLINE_DETAIL.NOT_FOUND_BODY' | translate }}
                </p>
                <button
                    mat-stroked-button
                    type="button"
                    data-testid="not-found-back"
                    (click)="goBack()"
                >
                    <mat-icon aria-hidden="true">arrow_back</mat-icon>
                    {{ 'DOWNLOADS.OFFLINE_DETAIL.BACK' | translate }}
                </button>
            </div>
        }
    </app-portal-detail-shell>
}