@page "/track/{EntryKey}"
@using DeepDrftPublic.Client.Controls

<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 release = track.Release;
    var hasMeta = release is not null
                  && (release.Title is not null || release.Genre is not null || release.ReleaseDate is not null);

    <ReleaseDetailScaffold Title="@track.TrackName"
                           Artist="@release?.Artist"
                           Track="@track"
                           BackHref="/tracks"
                           BackLabel="All tracks"
                           ShowMeta="@hasMeta">
        <Hero>
            <div class="deepdrft-track-detail-cover">
                @if (!string.IsNullOrEmpty(release?.ImagePath))
                {
                    <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-art"
                              Style="@($"background-image: url('api/image/{Uri.EscapeDataString(release.ImagePath)}');")" />
                }
                else
                {
                    <MudPaper Elevation="2" Class="deepdrft-track-detail-cover-placeholder deepdrft-gradient-soft-secondary">
                        <MudIcon Icon="@Icons.Material.Filled.Album" Color="Color.Primary" />
                    </MudPaper>
                }
            </div>
        </Hero>
        <MetaContent>
            @if (hasMeta)
            {
                @if (release?.Title is not null)
                {
                    <div>
                        <MudText Typo="Typo.overline">Album</MudText>
                        <MudText Typo="Typo.body1">@release.Title</MudText>
                    </div>
                }

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

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