@if (activeSlide(); as active) {
    <section
        class="hero"
        data-test-id="dashboard-hero"
        aria-roledescription="carousel"
        [attr.aria-label]="'WORKSPACE.DASHBOARD.HERO_LABEL' | translate"
        [class.hero--paused]="paused()"
        [class.hero--rotating]="canRotate()"
        (mouseenter)="setHovered(true)"
        (mouseleave)="setHovered(false)"
        (focusin)="onFocusIn()"
        (focusout)="onFocusOut($event)"
    >
        <!-- Every slide's backdrop stays mounted so switching crossfades
             and the next image is already decoded. -->
        <div class="hero__stage" aria-hidden="true">
            @for (slide of slides(); track slide.id) {
                <div
                    class="hero__backdrop"
                    [class.hero__backdrop--active]="$index === activeIndex()"
                    [class.hero__backdrop--poster]="
                        slide.backdropSource === 'poster'
                    "
                    [class.hero__backdrop--live]="slide.contentType === 'live'"
                    [style.--hero-hue]="slide.accentHue"
                >
                    <span
                        class="hero__backdrop-fallback"
                        [style.background]="
                            slide.contentType === 'live'
                                ? null
                                : slide.fallbackBackdropBackground
                        "
                    ></span>
                    @if (slide.backdropUrl; as backdropUrl) {
                        <img
                            class="hero__backdrop-image"
                            [src]="backdropUrl"
                            alt=""
                            decoding="async"
                            [attr.loading]="
                                $index === activeIndex() ? 'eager' : 'lazy'
                            "
                            (error)="presenter.markImageFailed(backdropUrl)"
                        />
                        <!-- No 16:9 backdrop: the sharp poster (or channel
                             logo) becomes key art on the right. -->
                        @if (slide.backdropSource === 'poster') {
                            <img
                                class="hero__backdrop-keyart"
                                [src]="backdropUrl"
                                alt=""
                                decoding="async"
                            />
                        }
                    }
                </div>
            }
            <span class="hero__scrim"></span>
        </div>

        @for (slide of [active]; track slide.id) {
            <div
                class="hero__content"
                role="group"
                aria-roledescription="slide"
                data-test-id="dashboard-hero-slide"
                [attr.data-hero-kind]="slide.kind"
                [attr.aria-label]="
                    'WORKSPACE.DASHBOARD.HERO_SLIDE_POSITION'
                        | translate
                            : {
                                  index: activeIndex() + 1,
                                  count: slides().length,
                              }
                "
                [attr.aria-live]="canRotate() && !paused() ? 'off' : 'polite'"
            >
                <p class="hero__eyebrow">
                    <span
                        class="hero__type"
                        [class.hero__type--live]="slide.contentType === 'live'"
                        >{{ slide.typeLabelKey | translate }}</span
                    >
                    <span class="hero__eyebrow-sep" aria-hidden="true">·</span>
                    <span>{{ slide.reasonLabelKey | translate }}</span>
                </p>

                <h1 class="hero__title">{{ slide.title }}</h1>

                <p class="hero__meta" data-test-id="dashboard-hero-badges">
                    @if (slide.episodeBadge) {
                        <span class="hero__pill">{{ slide.episodeBadge }}</span>
                    }
                    @if (slide.rating) {
                        <span class="hero__pill hero__pill--rating"
                            >★ {{ slide.rating }}</span
                        >
                    }
                    @for (genre of slide.genres; track genre) {
                        <span class="hero__pill">{{ genre }}</span>
                    }
                    @if (slide.category) {
                        <span class="hero__pill">{{ slide.category }}</span>
                    }
                    @if (slide.timeRange) {
                        <span class="hero__pill hero__pill--time">{{
                            slide.timeRange
                        }}</span>
                    }
                    @if (slide.year) {
                        <span class="hero__pill">{{ slide.year }}</span>
                    }
                    @if (slide.source) {
                        <span class="hero__pill hero__pill--source">{{
                            slide.source
                        }}</span>
                    }
                </p>

                @if (slide.programmeTitle) {
                    <p
                        class="hero__programme"
                        data-test-id="dashboard-hero-live-epg"
                    >
                        {{ slide.programmeTitle }}
                    </p>
                }
                @if (slide.description) {
                    <p class="hero__description">{{ slide.description }}</p>
                }

                @if (slide.progress !== null) {
                    <span
                        class="hero__progress"
                        [class.hero__progress--live]="
                            slide.contentType === 'live'
                        "
                        role="progressbar"
                        aria-valuemin="0"
                        aria-valuemax="100"
                        [attr.aria-valuenow]="slide.progress"
                    >
                        <i [style.width.%]="slide.progress"></i>
                    </span>
                }

                <div class="hero__actions">
                    @let primary = slide.primaryAction;
                    <a
                        class="hero__button hero__button--primary"
                        [attr.data-test-id]="primary.testId"
                        [routerLink]="primary.link"
                        [state]="primary.state ?? {}"
                    >
                        <mat-icon aria-hidden="true">{{
                            primary.icon
                        }}</mat-icon>
                        <span>{{ primary.labelKey | translate }}</span>
                        @if (primary.remainingLabel; as remaining) {
                            <span class="hero__button-detail"
                                >·
                                {{
                                    remaining.key | translate: remaining.params
                                }}</span
                            >
                        }
                    </a>
                    @if (slide.secondaryAction; as secondary) {
                        <a
                            class="hero__button hero__button--secondary"
                            [attr.data-test-id]="secondary.testId"
                            [routerLink]="secondary.link"
                            [state]="secondary.state ?? {}"
                        >
                            <mat-icon aria-hidden="true">{{
                                secondary.icon
                            }}</mat-icon>
                            <span>{{ secondary.labelKey | translate }}</span>
                        </a>
                    }
                </div>
            </div>
        }

        @if (slides().length > 1) {
            <div class="hero__controls">
                @if (canRotate()) {
                    <button
                        type="button"
                        class="hero__pause"
                        data-test-id="dashboard-hero-pause"
                        [attr.aria-pressed]="userPaused()"
                        [attr.aria-label]="
                            (userPaused()
                                ? 'WORKSPACE.DASHBOARD.HERO_PLAY'
                                : 'WORKSPACE.DASHBOARD.HERO_PAUSE'
                            ) | translate
                        "
                        (click)="togglePaused()"
                    >
                        <mat-icon aria-hidden="true">{{
                            userPaused() ? 'play_arrow' : 'pause'
                        }}</mat-icon>
                    </button>
                }
                <div
                    class="hero__dots"
                    role="group"
                    [attr.aria-label]="
                        'WORKSPACE.DASHBOARD.HERO_LABEL' | translate
                    "
                >
                    @for (slide of slides(); track slide.id) {
                        <button
                            type="button"
                            class="hero__dot"
                            data-test-id="dashboard-hero-dot"
                            [class.hero__dot--active]="$index === activeIndex()"
                            [attr.aria-current]="
                                $index === activeIndex() ? 'true' : null
                            "
                            [attr.aria-label]="
                                'WORKSPACE.DASHBOARD.HERO_SHOW_SLIDE'
                                    | translate: { title: slide.title }
                            "
                            [attr.tabindex]="$index === activeIndex() ? 0 : -1"
                            (click)="show($index)"
                            (keydown)="onDotKeydown($event, $index)"
                        >
                            <span
                                class="hero__dot-fill"
                                (animationend)="onRotationTick()"
                            ></span>
                        </button>
                    }
                </div>
            </div>
        }
    </section>
} @else if (presenter.loading()) {
    <section
        class="hero hero--skeleton"
        aria-hidden="true"
        aria-busy="true"
        data-test-id="dashboard-hero-skeleton"
    >
        <div class="hero__content">
            <span class="hero__skeleton hero__skeleton--eyebrow"></span>
            <span class="hero__skeleton hero__skeleton--title"></span>
            <span class="hero__skeleton hero__skeleton--meta"></span>
            <span class="hero__skeleton hero__skeleton--button"></span>
        </div>
    </section>
}