@page "/tracks"
@using DeepDrftModels.DTOs
@using DeepDrftModels.Entities
@using DeepDrftWeb.Client.Controls

<h3>Track Gallery</h3>
    
@if (ViewModel.Page != null)
{
    @* <MudTable T="TrackEntity" Items="@ViewModel.Page.Items" Hover="true" Breakpoint="Breakpoint.Sm"> *@
    @*     <HeaderContent> *@
    @*         <MudTh>Name</MudTh> *@
    @*         <MudTh>Artist</MudTh> *@
    @*         <MudTh>Album</MudTh> *@
    @*         <MudTh>Genre</MudTh> *@
    @*         <MudTh>Released</MudTh> *@
    @*         <MudTh>Actions</MudTh> *@
    @*     </HeaderContent> *@
    @*     <RowTemplate> *@
    @*         <MudTd DataLabel="Name">@context.TrackName</MudTd> *@
    @*         <MudTd DataLabel="Artist">@context.Artist</MudTd> *@
    @*         <MudTd DataLabel="Album">@context.Album</MudTd> *@
    @*         <MudTd DataLabel="Genre">@context.Genre</MudTd> *@
    @*         <MudTd DataLabel="Released">@context.ReleaseDate</MudTd> *@
    @*         <MudTd DataLabel="Actions"> *@
    @*             <MudButton Variant="Variant.Text" Color="Color.Primary">View</MudButton> *@
    @*         </MudTd> *@
    @*     </RowTemplate> *@
    @* </MudTable> *@
    
    <TracksGallery Tracks="@ViewModel.Page.Items" />
    
    <MudContainer Class="d-flex justify-center my-4 py-4">
        <MudPagination Count="@ViewModel.Page.TotalPages" 
                       Selected="@ViewModel.Page.Page" 
                       SelectedChanged="i => SetPage(i)" 
                       BoundaryCount="2" 
                       MiddleCount="3"/>
    </MudContainer>
}
else
{
    <MudSkeleton Height="650px" Class="pa-2 ma-2"/>
    <MudSkeleton Height="80px"/>
    <MudSpacer />
}