@page "/tracks"
@rendermode @(new InteractiveAutoRenderMode(prerender: false))

@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"
                               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 class="interactivity-test mt-4">
                    <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="TestInteractivity">
                        Test Interactivity (@_clickCount)
                    </MudButton>
                    <MudText Typo="Typo.body2" Class="mt-2">
                        Lifecycle Status: @_lifecycleStatus
                    </MudText>
                </div>
                
                <AudioPlayerBar AudioPlaybackEngine="AudioPlaybackEngine" />
            </div>
        }
        else
        {
            <div class="tracks-content">
                <MudSkeleton Height="95%" Class="pa-2 ma-6"/>
            </div>
            <div class="tracks-footer">
                <MudSkeleton Height="60px" Width="240px" Class="justify-center"/>
                <MudSkeleton Height="120px" Width="460px"/>
            </div>
        }
    </div>
</div>