deepdrft/DeepDrftPublic.Client/Controls/TrackCard.razor

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

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

    @* 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?.ImagePath))
            {
                <div class="deepdrft-track-card-bg" style="background-image: url('api/image/@Uri.EscapeDataString(TrackModel.ImagePath)');">
                </div>
            }
            else
            {
                <div class="deepdrft-track-card-fallback"></div>
            }
        </a>
    }
    else if (!string.IsNullOrEmpty(TrackModel?.ImagePath))
    {
        <div class="deepdrft-track-card-bg" style="background-image: url('api/image/@Uri.EscapeDataString(TrackModel.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?.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?.Artist
                </MudText>
            </div>
        }

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

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

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

            <MudFab Color="Color.Tertiary"
                    Size="Size.Medium"
                    StartIcon="@PlayPauseIcon"
                    OnClick="@PlayClick"/>
        </div>

    </div>

</div>