@inherits FnzComponentBase

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

    [Parameter] public EventCallback<FeTrack> OnAddToPlaylist { get; set; } = EventCallback<FeTrack>.Empty;

    private FnzBoostrapModal modalDisc { get; set; }
}

@code {
    public void Show()
    {
        JSRuntime.InvokeVoidAsync("ResetModalDisc");
        modalDisc.Show();
    }
}

<FnzBoostrapModal @ref="modalDisc" CssClass="modal-xl">
    <Title>@Disc?.Name</Title>
    <Body>
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-4 mb-1"><img class="card-img-top" src="@Disc?.CoverPath" onerror="this.src='blazor-192.png'"></div>
                <div class="col-md-8">
                    <ul class="nav nav-tabs justify-content-center nav-fill" id="ModalDiscTab" role="tablist">
                        @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
                        {
                            <li class="nav-item " role="presentation">
                                <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index" type="button">
                                    @subSet.item?.Name
                                </button>
                            </li>
                        }
                        @if (Disc?.Bks != null)
                        {
                            <li class="nav-item " role="presentation">
                                <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK" type="button">
                                    PIC
                                </button>
                            </li>
                        }
                    </ul>
                    <div class="tab-content" id="ModalDiscTabContent">
                        @foreach (var subSet in (Disc?.TrackSets).KeepNoEmpty().WithIndex())
                        {
                            <div class="tab-pane fade" id="tracks-@subSet.index" role="tabpanel">
                                <DiscDialogTrackSetTable TrackSet="subSet.item" OnClickAddTrackToList="OnAddToPlaylist"></DiscDialogTrackSetTable>
                            </div>
                        }
                        @if (Disc?.Bks != null)
                        {
                            <div class="tab-pane fade p-2" id="tracks-BK" role="tabpanel">
                                <DiscDialogBkSilder Bks="Disc.Bks"></DiscDialogBkSilder>
                            </div>
                        }
                    </div>
                </div>
            </div>
        </div>
    </Body>
</FnzBoostrapModal>
