@namespace DeepDrftPublic.Client.Controls

@* Invariant trio shared by every medium's detail page: a back link, a masthead (title + artist),
   a play/share affordance row wired to the streaming player, and slots for the medium-specific
   hero visual and metadata block. TrackDetail and the Session/Mix detail pages all compose this;
   per-medium variance rides the Hero and MetaContent render fragments. *@

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

    <MudLink Href="@BackHref" Typo="Typo.body2" Class="deepdrft-track-detail-back">
        &larr; @BackLabel
    </MudLink>

    <MudStack Row AlignItems="AlignItems.Start" Justify="Justify.SpaceBetween" Style="margin: 2rem 0 1.5rem;">
        <div class="deepdrft-track-detail-masthead">
            <MudText Typo="Typo.h3">@Title</MudText>
            <MudText Typo="Typo.h6" Color="Color.Primary">@Artist</MudText>
        </div>

        @* Play only makes sense once a playable track is resolved. *@
        @if (Track is not null)
        {
            <MudStack Row AlignItems="AlignItems.Center" Spacing="1">
                <PlayStateIcon Track="@Track" Size="Size.Large" Color="Color.Secondary" OnToggle="@PlayTrack" />
            </MudStack>
        }
    </MudStack>

    @Hero

    @if (MetaContent is not null && ShowMeta)
    {
        <MudDivider />
        <div class="deepdrft-track-detail-meta">
            @MetaContent
        </div>
    }

    @if (Track is not null)
    {
        <div class="deepdrft-share-row">
            <SharePopover EntryKey="@Track.EntryKey" />
        </div>
    }

</div>