iptvnator/libs/ui/components/src/lib/content-hero/content-hero.component.html

<!-- Hero Section with Backdrop -->
<section class="hero">
    <!-- Back Button -->
    <button
        class="hero__back-button"
        type="button"
        [attr.aria-label]="backLabel() || ('BACK' | translate)"
        (click)="onBack()"
    >
        <mat-icon aria-hidden="true">arrow_back</mat-icon>
    </button>
    @if (errorMessage()) {
        <div class="hero__content hero__error">
            <mat-icon class="error-icon">cloud_off</mat-icon>
            <h2 class="error-title">{{ errorMessage() }}</h2>
            <ng-content select="[hero-error-actions]"></ng-content>
        </div>
    } @else if (isLoading()) {
        <div class="hero__content">
            <!-- Skeleton Poster -->
            <div class="poster">
                <ngx-skeleton-loader
                    count="1"
                    [theme]="{
                        height: '100%',
                        width: '100%',
                        'border-radius': '8px',
                        'aspect-ratio': '2/3',
                        display: 'block',
                    }"
                />
            </div>

            <!-- Skeleton Details -->
            <div class="details">
                <!-- Title -->
                <ngx-skeleton-loader
                    count="1"
                    [theme]="{
                        height: '40px',
                        width: '60%',
                        'margin-bottom': '16px',
                        display: 'block',
                    }"
                />

                <!-- Tags -->
                <div style="display: flex; gap: 8px; margin-bottom: 16px">
                    <ngx-skeleton-loader
                        count="3"
                        [theme]="{
                            height: '24px',
                            width: '60px',
                            display: 'block',
                        }"
                    />
                </div>

                <!-- Description -->
                <ngx-skeleton-loader
                    count="3"
                    [theme]="{
                        height: '16px',
                        'margin-bottom': '8px',
                        width: '100%',
                        display: 'block',
                    }"
                />

                <!-- Meta -->
                <div style="margin-top: 20px; display: flex; gap: 32px">
                    <ngx-skeleton-loader
                        count="2"
                        [theme]="{
                            height: '40px',
                            width: '100px',
                            display: 'block',
                        }"
                    />
                </div>

                <!-- Buttons -->
                <div style="margin-top: 24px; display: flex; gap: 12px">
                    <ngx-skeleton-loader
                        count="2"
                        [theme]="{
                            height: '48px',
                            width: '140px',
                            display: 'block',
                        }"
                    />
                </div>
            </div>
        </div>
    } @else {
        <!-- Backdrop Image -->
        <div
            class="hero__backdrop"
            [class.hero__backdrop--blurred]="usesPosterBackdrop()"
            [style.backgroundImage]="
                backdropImageUrl() ? null : fallbackBackdropBackground()
            "
        >
            @if (backdropImageUrl(); as backdropImage) {
                <img
                    class="hero__backdrop-image"
                    [src]="backdropImage"
                    (error)="onBackdropError()"
                    alt=""
                    aria-hidden="true"
                />
            }
        </div>

        <!-- Gradient Vignette Overlay -->
        <div class="hero__vignette"></div>

        <!-- Hero Content -->
        <div class="hero__content">
            <!-- Poster Card -->
            <div class="poster">
                @if (posterUrl() && !posterError()) {
                    <img
                        class="poster__image"
                        [src]="posterUrl()"
                        (error)="onPosterError()"
                        alt="Poster"
                    />
                } @else {
                    <div
                        class="poster__placeholder"
                        [style.backgroundImage]="fallbackPosterBackground()"
                    >
                        <mat-icon class="poster__placeholder-icon"
                            >movie</mat-icon
                        >
                        <span class="poster__placeholder-text">{{
                            formattedTitle()
                        }}</span>
                    </div>
                }
            </div>

            <div class="details">
                <h1 class="details__title">{{ formattedTitle() }}</h1>

                <!-- Tags Slot -->
                <div class="details__tags">
                    <ng-content select="[hero-tags]"></ng-content>
                </div>

                <!-- Description -->
                @if (description()) {
                    <p
                        #descriptionEl
                        class="details__description"
                        [class.details__description--expanded]="
                            isDescriptionExpanded()
                        "
                    >
                        {{ description() }}
                    </p>
                    @if (hasDescriptionOverflow() || isDescriptionExpanded()) {
                        <button
                            type="button"
                            class="details__description-toggle"
                            (click)="toggleDescription()"
                            [attr.aria-expanded]="isDescriptionExpanded()"
                        >
                            <span>{{
                                (isDescriptionExpanded()
                                    ? 'SHOW_LESS'
                                    : 'SHOW_MORE'
                                ) | translate
                            }}</span>
                            <mat-icon aria-hidden="true">
                                {{
                                    isDescriptionExpanded()
                                        ? 'expand_less'
                                        : 'expand_more'
                                }}
                            </mat-icon>
                        </button>
                    }
                }

                <!-- Metadata Grid Slot -->
                <div class="details__meta">
                    <ng-content select="[hero-meta]"></ng-content>
                </div>

                <!-- Action Buttons Slot -->
                <div class="action-buttons">
                    <ng-content select="[hero-actions]"></ng-content>
                </div>
            </div>
        </div>
    }
</section>