@if (!isWorkspaceLayout) {
    <div
        class="sidebar"
        appResizable
        [minWidth]="250"
        [maxWidth]="600"
        [defaultWidth]="400"
        storageKey="sidebar-width"
    >
        <div
            class="sidebar-header"
            [class.sidebar-header--workspace]="isWorkspaceLayout"
        >
            @if (!isWorkspaceLayout) {
                <app-playlist-switcher
                    class="switcher"
                    [currentTitle]="currentPlaylist()?.name || currentPlaylist()?.title || 'Playlist'"
                    [subtitle]="'Xtream Code'"
                />
            }
            <button
                mat-icon-button
                class="manage-categories-btn"
                (click)="openCategoryManagement()"
                [matTooltip]="'XTREAM.CATEGORY_MANAGEMENT.TITLE' | translate"
            >
                <mat-icon>tune</mat-icon>
            </button>
        </div>
        <app-category-view
            [items]="categories()"
            [selectedCategoryId]="selectedCategoryId()"
            [itemCounts]="categoryItemCounts()"
            (categoryClicked)="categoryClicked($event)"
            [showCounts]="true"
        />
    </div>
}

<div class="main-content">
    @if (
        !isWorkspaceLayout &&
        !xtreamStore.selectedItem() &&
        !xtreamStore.isLoadingDetails()
    ) {
        <div class="content-header">
            <div class="header-left">
                <h2>
                    <button mat-icon-button disabled>
                        <mat-icon>category</mat-icon>
                    </button>
                    {{ getContentLabel() }}
                </h2>
            </div>
            @if (canShowSortMenu()) {
                <div class="header-actions">
                    <mat-form-field
                        class="category-search"
                        appearance="outline"
                        subscriptSizing="dynamic"
                    >
                        <mat-icon matPrefix>search</mat-icon>
                        <input
                            matInput
                            type="search"
                            spellcheck="false"
                            [ngModel]="categorySearchTerm()"
                            (ngModelChange)="onCategorySearchChange($event)"
                            placeholder="Search in category"
                        />
                        @if (categorySearchTerm()) {
                            <button
                                mat-icon-button
                                matSuffix
                                aria-label="Clear search"
                                (click)="clearCategorySearch()"
                            >
                                <mat-icon>close</mat-icon>
                            </button>
                        }
                    </mat-form-field>
                    <button
                        mat-icon-button
                        [matMenuTriggerFor]="xtreamSortMenu"
                        [matTooltip]="'Sort: ' + contentSortLabel()"
                        aria-label="Sort content"
                    >
                        <mat-icon>sort</mat-icon>
                    </button>
                </div>
                <mat-menu #xtreamSortMenu="matMenu">
                    <button mat-menu-item (click)="setContentSortMode('date-desc')">
                        <span>Date Added (Latest First)</span>
                        @if (contentSortMode() === 'date-desc') {
                            <mat-icon>check</mat-icon>
                        }
                    </button>
                    <button mat-menu-item (click)="setContentSortMode('date-asc')">
                        <span>Date Added (Oldest First)</span>
                        @if (contentSortMode() === 'date-asc') {
                            <mat-icon>check</mat-icon>
                        }
                    </button>
                    <button mat-menu-item (click)="setContentSortMode('name-asc')">
                        <span>Name A-Z</span>
                        @if (contentSortMode() === 'name-asc') {
                            <mat-icon>check</mat-icon>
                        }
                    </button>
                    <button mat-menu-item (click)="setContentSortMode('name-desc')">
                        <span>Name Z-A</span>
                        @if (contentSortMode() === 'name-desc') {
                            <mat-icon>check</mat-icon>
                        }
                    </button>
                </mat-menu>
            }
        </div>
    }
    <div
        class="scrollable-content"
        [class.no-header]="
            isWorkspaceLayout ||
            xtreamStore.selectedItem() ||
            xtreamStore.isLoadingDetails()
        "
    >
        <router-outlet />
    </div>
    <!-- <app-mpv-player-bar /> -->
</div>