@if (items().length > 0) {
    <div
        class="activity-items"
        [class.activity-items--grid]="viewMode() === 'grid'"
        (scroll)="onItemsScroll($event)"
    >
        @for (item of items(); track item.id) {
            <a
                class="activity-item"
                [routerLink]="item.link"
                [state]="item.navigationState"
            >
                <span
                    class="activity-item__media"
                    [class.activity-item__media--live]="item.type === 'live'"
                    [class.activity-item__media--movie]="item.type === 'movie'"
                    [class.activity-item__media--series]="
                        item.type === 'series'
                    "
                    [class.activity-item__media--poster]="item.type !== 'live'"
                    [class.is-placeholder]="!hasImage(item)"
                    [class.is-placeholder-live]="
                        !hasImage(item) && item.type === 'live'
                    "
                    [class.is-placeholder-movie]="
                        !hasImage(item) && item.type === 'movie'
                    "
                    [class.is-placeholder-series]="
                        !hasImage(item) && item.type === 'series'
                    "
                >
                    @if (hasImage(item)) {
                        <img
                            [src]="item.imageUrl"
                            [alt]="item.title"
                            loading="lazy"
                            (error)="markImageAsFailed(item.id)"
                        />
                    } @else {
                        <mat-icon>{{ getFallbackIcon(item) }}</mat-icon>
                    }
                </span>

                <span class="activity-item__content">
                    <span
                        class="activity-item__title"
                        [attr.title]="item.title"
                    >
                        {{ item.title }}
                    </span>
                    <span
                        class="activity-item__subtitle"
                        [attr.title]="item.subtitle"
                    >
                        {{ item.subtitle }}
                    </span>
                </span>

                @if (showRemoveAction()) {
                    <button
                        type="button"
                        class="activity-item__action-btn"
                        (click)="onActionClick($event, item)"
                        [attr.aria-label]="removeActionLabel()"
                        [title]="removeActionLabel()"
                    >
                        <mat-icon>close</mat-icon>
                    </button>
                }
            </a>
        }
    </div>
} @else {
    <div class="empty-state" [class.empty-state--grid]="viewMode() === 'grid'">
        @if (emptyIcon()) {
            <mat-icon class="empty-state__icon">{{ emptyIcon() }}</mat-icon>
        }
        <p class="empty-state__title">{{ emptyLabel() }}</p>
        @if (emptyHint()) {
            <p class="empty-state__hint">{{ emptyHint() }}</p>
        }
        @if (emptyActionLink() && emptyActionLabel()) {
            <a
                mat-stroked-button
                class="empty-state__action"
                [routerLink]="emptyActionLink()"
            >
                <mat-icon>add</mat-icon>
                {{ emptyActionLabel() }}
            </a>
        }
    </div>
}