@page "/tracks"
@rendermode InteractiveAuto

<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"
                               SelectedTrack="_selectedTrack"
                               SelectedTrackChanged="@PlayTrack"/>
            </div>
            <div class="tracks-footer py-4">
                <MudPagination Count="@ViewModel.Page.TotalPages"
                                Selected="@ViewModel.Page.Page"
                                SelectedChanged="@SetPage"
                                BoundaryCount="2"
                                MiddleCount="3"/>
            </div>
        }
        else
        {
            <div class="tracks-content">
                <MudGrid Spacing="3">
                    @foreach (var i in Enumerable.Range(0, 12))
                    {
                        <MudItem xs="12" sm="6" md="4" lg="3" xl="3">
                            <div class="deepdrft-track-gallery-item-center">
                                <MudSkeleton Width="240px" Height="240px" SkeletonType="SkeletonType.Rectangle"/>
                            </div>
                        </MudItem>
                    }
                </MudGrid>
            </div>
            <div class="tracks-footer">
                <MudSkeleton Height="60px" Width="240px" Class="justify-center"/>
            </div>
        }
    </div>
</div>