@page "/"
@rendermode InteractiveServer

<FluentButton OnClick="AddSession">Add session</FluentButton>
<FluentButton OnClick="ShowResults">Show results</FluentButton>

@if (_sessions.Count > 0)
{
    <FluentTabs @bind-ActiveTabId="_activeTabId">
        @foreach (var session in _sessions)
        {
            <FluentTab Id="@($"tab-{session.Id}")" Header="@($"Session {session.Id}")">
                <FluentTabs @bind-ActiveTabId="session.ActiveInnerTabId">
                    <FluentTab Id="@($"setup-{session.Id}")" Header="Setup">Setup content</FluentTab>
                    <FluentTab Id="@($"results-{session.Id}")" Header="Results" Visible="@session.HasResults">
                        <FluentTabs>
                            <FluentTab Header="Canonicals">Canonicals content</FluentTab>
                            <FluentTab Header="Greeks">Greeks content</FluentTab>
                        </FluentTabs>
                    </FluentTab>
                </FluentTabs>
            </FluentTab>
        }
    </FluentTabs>
}

@code {
    private readonly List<Session> _sessions = [];
    private string? _activeTabId;

    private void AddSession()
    {
        var session = new Session(_sessions.Count + 1);
        _sessions.Add(session);
        _activeTabId = $"tab-{session.Id}";
    }

    private async Task ShowResults()
    {
        var session = _sessions[^1];
        await Task.Run(() => Thread.Sleep(500)).ConfigureAwait(false);
        session.HasResults = true;
        await InvokeAsync(StateHasChanged).ConfigureAwait(false);
        session.ActiveInnerTabId = $"results-{session.Id}";
        await InvokeAsync(StateHasChanged).ConfigureAwait(false);
    }

    private sealed class Session(int id)
    {
        public int Id { get; } = id;

        public bool HasResults { get; set; }

        public string ActiveInnerTabId { get; set; } = $"setup-{id}";
    }
}