CloudMusic/FNZCM/FNZCM.BlazorWasm/UI/Views/Default/Browse/DiscCard.razor

@code {
    [Parameter, Required] public FeDisc Disc { get; set; }

    private DiscDialog dlgDisc;
}

<DiscDialog @ref="dlgDisc"></DiscDialog>

<div class="col-md-3 d-flex align-items-stretch">
    <div class="card mb-3 shadow-sm" @onclick="()=>{ if (Disc!=null) dlgDisc.Show(Disc); }">
        <div class="card-img-top disc-card-cover" style="background-image:url('@Disc?.CoverPath.UrlEscape()'),url('blazor-192.png')">
        </div>
        <div class="card-body d-flex align-content-between flex-wrap p-2">
            <p class="card-text w-100 position-relative">
                @Disc?.Name
                @if (Disc?.Bks != null)
                {
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary border border-primary">PIC</span>
                }
            </p>
            <div class="w-100">
                <div class="w-100 text-center">
                    <small class="font-monospace text-muted">Track @Disc?.TrackSets.First().Tracks.Length</small>
                </div>
                @foreach (var tSet in (Disc?.TrackSets).KeepNoEmpty())
                {
                    <div class="d-flex justify-content-between w-100">
                        <span class="align-self-center">@(tSet?.Name.StartsWith("AAC_Q1.00") == true ? "Q1" + tSet?.Name.Substring(9) : tSet?.Name)</span>
                        <small class="text-nowrap font-monospace text-muted align-self-center">@tSet?.TotalDuration.SecondToDur() @tSet?.TotalBytes.BytesToFileSize()</small>
                    </div>
                }
            </div>
        </div>
    </div>
</div>