@inherits FnzComponentBase
@implements IDisposable

@code {
    private FeDisc currentDisc;
    private FnzBootstrapModal modalDisc;

    private bool IsShown { get; set; } = false;

    public void Show(FeDisc disc)
    {
        currentDisc = disc;
        IsShown = true;
        StateHasChanged();
        modalDisc.Show();
    }

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
        App.Instance.BottomBarHeightChanged += UpdateMarginBottom;
    }

    private void UpdateMarginBottom() => StateHasChanged();

    public void Dispose() => App.Instance.BottomBarHeightChanged -= UpdateMarginBottom;

    private string StyleString => $"margin-bottom: {App.Instance.BottomBarHeight}px";
}

<FnzBootstrapModal @ref="modalDisc" CssClass="modal-xl" style="@StyleString">
    <Title><span class="badge bg-light">@currentDisc?.Lib.Name</span> @currentDisc?.Name </Title>
    <Body>
        @if (IsShown)
        {
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-4 mb-1"><img class="card-img-top" src="@currentDisc?.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-@ElementId" role="tablist">
                            @foreach (var subSet in (currentDisc?.TrackSets).KeepNoEmpty().WithIndex())
                            {
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link @(subSet.index==0?"active":"")" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-@subSet.index-@ElementId" type="button">
                                        @subSet.item?.Name
                                    </button>
                                </li>
                            }
                            @if (currentDisc?.Bks != null)
                            {
                                <li class="nav-item" role="presentation">
                                    <button class="nav-link" id="main-tab" data-bs-toggle="tab" data-bs-target="#tracks-BK-@ElementId" type="button">
                                        PIC
                                    </button>
                                </li>
                            }
                        </ul>
                        <div class="tab-content" id="ModalDiscTabContent-@ElementId">
                            @foreach (var subSet in (currentDisc?.TrackSets).KeepNoEmpty().WithIndex())
                            {
                                <div class="tab-pane fade @(subSet.index==0?"active show":"")" id="tracks-@subSet.index-@ElementId" role="tabpanel">
                                    <DiscDialogTrackSetTable TrackSet="subSet.item"></DiscDialogTrackSetTable>
                                </div>
                            }
                            @if (currentDisc?.Bks != null)
                            {
                                <div class="tab-pane fade p-2" id="tracks-BK-@ElementId" role="tabpanel">
                                    <DiscDialogBkSilder Bks="currentDisc.Bks"></DiscDialogBkSilder>
                                </div>
                            }
                        </div>
                    </div>
                </div>
            </div>
        }
    </Body>
</FnzBootstrapModal>
