@page "/tracks"
@using DeepDrftModels.DTOs
@using DeepDrftModels.Entities

<h3>Track Gallery</h3>

<MudContainer>
    
@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>

    <MudPagination Count="@ViewModel.Page.TotalPages" Selected="@ViewModel.Page.Page" SelectedChanged="i => SetPage(i)" BoundaryCount="2" MiddleCount="3"/>
}
else
{
    <MudSkeleton Height="650px" Class="pa-2 ma-2"/>
    <MudSkeleton Height="80px"/>
    <MudSpacer />
}
</MudContainer>