@{
    var hasLink = !string.IsNullOrEmpty(TrackModel?.EntryKey);
    var trackHref = hasLink ? $"/track/{TrackModel!.EntryKey}" : null;
    var hasArt = !string.IsNullOrEmpty(TrackModel?.Release?.ImagePath);
}

@if (ViewMode == GalleryViewMode.Grid)
{
<div class="deepdrft-track-card-container @(hasArt ? "deepdrft-track-card-container--art" : "")">

    @* Cover and title/artist link to the detail page; the play button (below, outside any
       anchor) stays the sole playback entry point. display:contents keeps the grid intact. *@
    @if (hasLink)
    {
        <a href="@trackHref" class="deepdrft-track-card-link">
            @if (!string.IsNullOrEmpty(TrackModel?.Release?.ImagePath))
            {
                <div class="deepdrft-track-card-bg" style="background-image: url('api/image/@Uri.EscapeDataString(TrackModel.Release!.ImagePath)');">
                </div>
            }
            else
            {
                <div class="deepdrft-track-card-fallback"></div>
            }
        </a>
    }
    else if (!string.IsNullOrEmpty(TrackModel?.Release?.ImagePath))
    {
        <div class="deepdrft-track-card-bg" style="background-image: url('api/image/@Uri.EscapeDataString(TrackModel.Release!.ImagePath)');">
        </div>
    }
    else
    {
        <div class="deepdrft-track-card-fallback"></div>
    }

    <div class="deepdrft-track-card-content">

        @if (hasLink)
        {
            <a href="@trackHref" class="deepdrft-track-card-link">
                <div class="deepdrft-track-info-top">
                    <MudText Typo="Typo.subtitle1"
                             Class="deepdrft-track-title text-truncate mb-1">
                        @TrackModel?.TrackName
                    </MudText>

                    <MudText Typo="Typo.caption"
                             Class="deepdrft-track-artist text-truncate mb-2">
                        @TrackModel?.Release?.Artist
                    </MudText>
                </div>
            </a>
        }
        else
        {
            <div class="deepdrft-track-info-top">
                <MudText Typo="Typo.subtitle1"
                         Class="deepdrft-track-title text-truncate mb-1">
                    @TrackModel?.TrackName
                </MudText>

                <MudText Typo="Typo.caption"
                         Class="deepdrft-track-artist text-truncate mb-2">
                    @TrackModel?.Release?.Artist
                </MudText>
            </div>
        }

        <div class="deepdrft-track-info-middle">
            @if (!string.IsNullOrEmpty(TrackModel?.Release?.Title))
            {
                <MudText Typo="Typo.caption"
                         Class="deepdrft-track-meta text-truncate">
                    @TrackModel.Release!.Title
                </MudText>
            }

            @if (!string.IsNullOrEmpty(TrackModel?.Release?.Genre))
            {
                <MudChip T="string"
                         Size="Size.Small"
                         Variant="Variant.Outlined"
                         Color="Color.Tertiary"
                         Class="deepdrft-genre-chip">
                    @TrackModel.Release!.Genre
                </MudChip>
            }
        </div>

        <div class="deepdrft-track-info-bottom">
            @if (TrackModel?.Release?.ReleaseDate.HasValue == true)
            {
                <MudText Typo="Typo.caption"
                         Class="deepdrft-track-meta">
                    @TrackModel.Release!.ReleaseDate!.Value.Year
                </MudText>
            }
            else
            {
                <div></div>
            }

            <MudFab Color="Color.Tertiary"
                    Size="Size.Medium"
                    StartIcon="@PlayPauseIcon"
                    Disabled="@(!RendererInfo.IsInteractive)"
                    OnClick="@PlayClick"/>
        </div>

    </div>

</div>
}
else
{
<div class="deepdrft-track-row @(IsPlaying ? "deepdrft-track-row--playing" : "")">

    <MudFab Color="Color.Tertiary"
            Size="Size.Medium"
            StartIcon="@PlayPauseIcon"
            Disabled="@(!RendererInfo.IsInteractive)"
            OnClick="@PlayClick"
            Class="deepdrft-track-row-fab"/>

    @if (hasLink)
    {
        <a href="@trackHref" class="deepdrft-track-row-link">
            @* art thumb *@
            @if (!string.IsNullOrEmpty(TrackModel?.Release?.ImagePath))
            {
                <div class="deepdrft-track-row-thumb"
                     style="background-image: url('api/image/@Uri.EscapeDataString(TrackModel.Release!.ImagePath)');">
                </div>
            }
            else
            {
                <div class="deepdrft-track-row-thumb deepdrft-track-row-thumb--fallback"></div>
            }

            @* text block *@
            <div class="deepdrft-track-row-text">
                <MudText Typo="Typo.subtitle2" Class="deepdrft-track-title text-truncate">
                    @TrackModel?.Release?.Artist
                </MudText>
                <MudText Typo="Typo.caption" Class="deepdrft-track-meta text-truncate">
                    @TrackModel?.TrackName
                </MudText>
            </div>

            @* right metadata *@
            <div class="deepdrft-track-row-meta">
                @if (!string.IsNullOrEmpty(TrackModel?.Release?.Genre))
                {
                    <MudChip T="string"
                             Size="Size.Small"
                             Variant="Variant.Outlined"
                             Color="Color.Tertiary"
                             Class="deepdrft-genre-chip">
                        @TrackModel.Release!.Genre
                    </MudChip>
                }
                @if (TrackModel?.Release?.ReleaseDate.HasValue == true)
                {
                    <MudText Typo="Typo.caption" Class="deepdrft-track-meta">
                        @TrackModel.Release!.ReleaseDate!.Value.Year
                    </MudText>
                }
            </div>
        </a>
    }
    else
    {
        @* same structure without anchor *@
        @if (!string.IsNullOrEmpty(TrackModel?.Release?.ImagePath))
        {
            <div class="deepdrft-track-row-thumb"
                 style="background-image: url('api/image/@Uri.EscapeDataString(TrackModel.Release!.ImagePath)');">
            </div>
        }
        else
        {
            <div class="deepdrft-track-row-thumb deepdrft-track-row-thumb--fallback"></div>
        }
        <div class="deepdrft-track-row-text">
            <MudText Typo="Typo.subtitle2" Class="deepdrft-track-title text-truncate">
                @TrackModel?.Release?.Artist
            </MudText>
            <MudText Typo="Typo.caption" Class="deepdrft-track-meta text-truncate">
                @TrackModel?.TrackName
            </MudText>
        </div>
        <div class="deepdrft-track-row-meta">
            @if (!string.IsNullOrEmpty(TrackModel?.Release?.Genre))
            {
                <MudChip T="string"
                         Size="Size.Small"
                         Variant="Variant.Outlined"
                         Color="Color.Tertiary"
                         Class="deepdrft-genre-chip">
                    @TrackModel.Release!.Genre
                </MudChip>
            }
            @if (TrackModel?.Release?.ReleaseDate.HasValue == true)
            {
                <MudText Typo="Typo.caption" Class="deepdrft-track-meta">
                    @TrackModel.Release!.ReleaseDate!.Value.Year
                </MudText>
            }
        </div>
    }
</div>
}