@page "/track/{EntryKey}"

<PageTitle>@(ViewModel.Track?.TrackName ?? "Track") - DeepDrft</PageTitle>

@if (ViewModel.IsLoading)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-cover">
            <MudSkeleton SkeletonType="SkeletonType.Rectangle" Width="100%" Height="320px" />
        </div>
        <div class="deepdrft-track-detail-masthead">
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="70%" Height="56px" />
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="40%" Height="32px" />
        </div>
        <div class="deepdrft-track-detail-meta">
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="30%" Height="24px" />
            <MudSkeleton SkeletonType="SkeletonType.Text" Width="25%" Height="24px" />
        </div>
    </div>
}
else if (ViewModel.NotFound)
{
    <div class="deepdrft-track-detail-container">
        <div class="deepdrft-track-detail-masthead">
            <MudText Typo="Typo.h4" Align="Align.Center">Track not found.</MudText>
            <MudText Typo="Typo.body2" Align="Align.Center" Color="Color.Secondary">
                This track may have been moved or removed.
            </MudText>
            <div class="d-flex justify-center mt-4">
                <MudButton Href="/tracks"
                           Variant="Variant.Text"
                           StartIcon="@Icons.Material.Filled.ArrowBack">
                    All tracks
                </MudButton>
            </div>
        </div>
    </div>
}
else if (ViewModel.Track is not null)
{
    var track = ViewModel.Track;
    var isThisTrackPlaying = PlayerService.CurrentTrack?.Id == track.Id
                             && PlayerService.IsPlaying
                             && !PlayerService.IsPaused;
    var hasMeta = track.Album is not null || track.Genre is not null || track.ReleaseDate is not null;

    <div class="deepdrft-track-detail-container">

        <MudLink Href="/tracks" Typo="Typo.body2" Class="deepdrft-track-detail-back">
            &larr; All tracks
        </MudLink>

        <div class="deepdrft-track-detail-cover">
            <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
                <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
            </MudPaper>
        </div>

        <div class="deepdrft-track-detail-masthead">
            <MudText Typo="Typo.h3">@track.TrackName</MudText>
            <MudText Typo="Typo.h6" Color="Color.Primary">@track.Artist</MudText>
        </div>

        <div>
            <MudIconButton Icon="@(isThisTrackPlaying ? Icons.Material.Filled.Pause : Icons.Material.Filled.PlayArrow)"
                           Color="Color.Tertiary"
                           Size="Size.Large"
                           OnClick="PlayTrack" />
        </div>

        @if (hasMeta)
        {
            <MudDivider />

            <div class="deepdrft-track-detail-meta">
                @if (track.Album is not null)
                {
                    <div>
                        <MudText Typo="Typo.overline">Album</MudText>
                        <MudText Typo="Typo.body1">@track.Album</MudText>
                    </div>
                }

                @if (track.Genre is not null)
                {
                    <MudChip T="string"
                             Variant="Variant.Outlined"
                             Color="Color.Tertiary"
                             Class="deepdrft-genre-chip">
                        @track.Genre
                    </MudChip>
                }

                @if (track.ReleaseDate is not null)
                {
                    <div>
                        <MudText Typo="Typo.overline">Released</MudText>
                        <MudText Typo="Typo.body1">@track.ReleaseDate.Value.ToString("MMMM yyyy")</MudText>
                    </div>
                }
            </div>
        }

    </div>
}