@if (!isWorkspaceLayout) {
    <div
        class="sidebar"
        appResizable
        [minWidth]="250"
        [maxWidth]="600"
        [defaultWidth]="400"
        storageKey="sidebar-width"
    >
        <div class="sidebar-header">
            <app-playlist-switcher
                class="switcher"
                [currentTitle]="playlistTitle()"
                [subtitle]="playlistSubtitle()"
            />
        </div>
        <app-category-view
            [items]="categories()"
            [selectedCategoryId]="$any(selectedCategoryId())"
            (categoryClicked)="setCategoryId($event.category_id)"
        />
    </div>
}

<div class="main-content">
    <div class="content-header">
        <div class="category-meta">
            <h2 class="category-title">
                {{ titleTranslationString() | translate }}
            </h2>
            @if (selectedCategoryId()) {
                <div class="category-subtitle">{{ selectedCategoryId() }}</div>
            }
        </div>
        @if (showHeaderAction() && !isWorkspaceLayout) {
            <button
                type="button"
                mat-icon-button
                [matTooltip]="headerActionTooltip()"
                (click)="onHeaderActionClick()"
            >
                <mat-icon>{{ headerActionIcon() }}</mat-icon>
            </button>
        }
    </div>
    <div class="scrollable-content">
        @if (favorites().length) {
            <div class="items-grid">
                @for (item of favorites(); track $index) {
                    <app-content-card
                        [posterUrl]="item.poster_url || item.cover"
                        [title]="
                            item?.title ||
                            item?.details?.info?.name ||
                            'Unknown'
                        "
                        [type]="item.type"
                        [showTypeBadge]="false"
                        [date]="item.added_at"
                        [showRemoveButton]="true"
                        [removeTooltip]="
                            removeTooltip() ||
                            ('CHANNELS.REMOVE_FAVORITE' | translate)
                        "
                        (cardClick)="openFavorite(item)"
                        (remove)="removeFromFavorites(item)"
                    />
                }
            </div>
        } @else {
            <div class="no-items">
                <mat-icon>{{ emptyIcon() }}</mat-icon>
                <p>No items in the selected category</p>
            </div>
        }
    </div>
</div>