@code {
    [Parameter, Required] public FeTrackSet TrackSet { get; set; }
    [Parameter] public EventCallback<FeTrack> OnAddToPlaylist { get; set; } = EventCallback<FeTrack>.Empty;
}

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr class="table-primary">
                <th scope="col" class="p-1 text-center">
                    <i class="bi bi-file-earmark-music"></i>
                </th>
                <th scope="col" class="p-1">
                    <a href="@TrackSet?.M3U8Path" target="@FnzConst.PlayPageTarget" onclick="return BlockDownloadAndOpenHtmlPage(this)">Play all</a>
                </th>
                <th scope="col" class="p-1 text-center">@TrackSet?.TotalDuration.SecondToDur()</th>
                <th scope="col" class="p-1 text-center">@TrackSet?.TotalBytes.BytesToFileSize()</th>
                <th scope="col" class="p-1 text-center">
                    <i class="bi bi-list-ul"></i>
                </th>
            </tr>
        </thead>
        <tbody>
            @foreach (var t in (TrackSet?.Tracks).KeepNoEmpty().WithIndex())
            {
                <tr class="@(t.index%2==0?"":"table-primary") mouse-hilight">
                    <td scope="col" class="p-1 text-center">
                        <FileIcon FileName="@t.item?.Key"></FileIcon>
                    </td>
                    <td scope="row" class="p-0 text-nowrap">
                        <a href="@t.item?.Path" target="@FnzConst.PlayPageTarget">@t.item?.GetTitleOrFilename()</a>
                    </td>
                    <td class="p-0 text-center">@(t.item?.Tag?.Duration.SecondToDur() ?? "?")</td>
                    <td class="p-0 text-center">@(t.item?.Tag?.Length.BytesToFileSize() ?? "?")</td>
                    <td class="p-0 text-center">
                        <button type="button" class="btn btn-link" style="padding:0.1rem" @onclick="()=>OnAddToPlaylist.InvokeAsync(t.item)">
                            <i class="bi bi-folder-plus"></i>
                        </button>
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>