@page "/tracks"

@using DeepDrftWeb.Client.Controls

<PageTitle>DeepDrft Track Gallery</PageTitle>

<div class="tracks-page-wrapper">
    <div class="tracks-view-container">
        @if (ViewModel.Page != null)
        {
            <div class="tracks-content">
                <TracksGallery Tracks="@ViewModel.Page.Items"/>
            </div>

            <div class="tracks-pagination">
                <MudContainer Class="d-flex justify-center py-2">
                    <MudPagination Count="@ViewModel.Page.TotalPages"
                                   Selected="@ViewModel.Page.Page"
                                   SelectedChanged="i => SetPage(i)"
                                   BoundaryCount="2"
                                   MiddleCount="3"/>
                </MudContainer>
            </div>
        }
        else
        {
            <div class="tracks-content">
                <MudSkeleton Height="100%" Class="pa-2 ma-2"/>
            </div>
            <div class="tracks-pagination">
                <MudSkeleton Height="60px"/>
            </div>
        }
    </div>

    <AudioPlayerBar AudioUrl=""></AudioPlayerBar>
</div>