<div class="collection-viewport">
    <as-split gutterSize="4" unit="percent" direction="horizontal" (dragEnd)="splitDragEnd($event)">
        <as-split-area [size]="leftPaneSize" minSize="5" maxSize="95"
            ><app-album-browser
                class="p-3 fill"
                [albums]="this.albums | albumsFilter: this.searchService.delayedSearchText"
                [(albumsPersister)]="this.albumsPersister"
            ></app-album-browser
        ></as-split-area>
        <as-split-area [size]="rightPaneSize" minSize="5" maxSize="95"
            ><div class="right-side-pane">
                <app-track-browser
                    class="p-3 fill"
                    [tracks]="this.tracks | tracksFilter: this.searchService.delayedSearchText"
                    [(tracksPersister)]="this.tracksPersister"
                ></app-track-browser></div
        ></as-split-area>
    </as-split>
</div>
