<section
    class="sources-page"
    [class.sources-page--empty]="visibleSourcesCount() === 0"
>
    @if (visibleSourcesCount() > 0) {
        <header class="sources-header">
            <div class="sources-header__text">
                <h2 class="sources-title">{{ title() }}</h2>
                <p class="sources-subtitle">{{ subtitle() }}</p>
            </div>
            <button
                type="button"
                mat-stroked-button
                class="sort-trigger"
                [matMenuTriggerFor]="sortMenu"
            >
                <mat-icon>sort</mat-icon>
                <span class="sort-trigger__label">{{ activeSortLabel() }}</span>
                <mat-icon class="sort-trigger__caret">arrow_drop_down</mat-icon>
            </button>
            <mat-menu #sortMenu="matMenu" xPosition="before">
                @for (option of sortOptions; track option.translationKey) {
                    <button
                        mat-menu-item
                        type="button"
                        [class.active-option]="isSortActive(option)"
                        (click)="setSortOption(option)"
                    >
                        <mat-icon>{{ option.icon }}</mat-icon>
                        <span>{{ option.translationKey | translate }}</span>
                        @if (isSortActive(option)) {
                            <mat-icon class="sort-menu__check">check</mat-icon>
                        }
                    </button>
                }
            </mat-menu>
        </header>
    }
    <div class="sources-content">
        <app-recent-playlists
            [searchQueryInput]="searchQuery()"
            (addPlaylistClicked)="onAddPlaylist($event)"
        />
    </div>
</section>
