@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. The Cut/Session/Mix detail pages all compose this;
   per-medium variance rides the Hero and MetaContent render fragments. *@

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

    @* Three-zone top row: back link (left) | optional center affordance | optional action (right), on
       one SpaceBetween row. Both the center and action slots stay null for media that don't supply them
       (Track/Cut/Session), so SpaceBetween collapses to the back link alone at the left edge. The Mix
       detail page fills the center with its in-flow visualizer-controls container (§7b). The native
       wrapper lets the row flex-wrap the center zone to its own line on narrow widths, keeping the
       controls in-flow rather than clipping. *@
    <div class="deepdrft-track-detail-top-row">
        <MudStack Row AlignItems="AlignItems.Center" Justify="Justify.SpaceBetween" Class="deepdrft-track-detail-top-row-stack">
            <MudLink Href="@BackHref" Typo="Typo.body2" Class="deepdrft-track-detail-back">
                &larr; @BackLabel
            </MudLink>

            @TopRowCenter

            @TopRightAction
        </MudStack>
    </div>

    @TopContent

    @* The header region. A composer that wants the default masthead+play row supplies nothing; one
       that needs a different arrangement (e.g. the Cut album's left-meta / right-cover split) supplies
       its own Header fragment. Layout variance rides this slot, never a boolean flag (Phase 9 §5.3). *@
    @if (Header is not null)
    {
        @Header
    }
    else
    {
        <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>
    }

    @* Multi-track body region (the Cut album's track list). Single-track media leave it null. *@
    @BodyContent

    @* The default share row is bound to the single resolved track. A composer that owns its own share
       affordance (the Cut header carries Play + Share inline) suppresses it via ShowShareRow. *@
    @if (Track is not null && ShowShareRow)
    {
        <div class="deepdrft-share-row">
            <SharePopover EntryKey="@Track.EntryKey" />
        </div>
    }

</div>