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

<table class="table">
    <thead>
        <tr>
            <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.PlaylistPageTarget" 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())
        {
            <tr>
                <td scope="col" class="p-1 text-center">
                    <FileIcon FileName="@t?.Key"></FileIcon>
                </td>
                <td scope="row" class="p-0">
                    <a href="@t?.Path" target="@FnzConst.PlaylistPageTarget">@((t?.Tag?.Title).NullOrEmptyEscape(t?.Name))</a>
                </td>
                <td class="p-0 text-center">@(t?.Tag?.Duration.SecondToDur() ?? "?")</td>
                <td class="p-0 text-center">@(t?.Tag?.Length.BytesToFileSize() ?? "?")</td>
                <td class="p-0 text-center">
                    <button type="button" class="btn btn-link" style="padding:0.1rem" @onclick="()=>OnClickAddTrackToList.InvokeAsync(t)">
                        <i class="bi bi-folder-plus"></i>
                    </button>
                </td>
            </tr>
        }
    </tbody>
</table>

