@namespace Oqtane.Themes.Controls
@inherits ThemeControlBase

<CascadingValue Value="this">
    <div>
        @foreach (TabPanel tabPanel in Pages)
        {
            <button type="button"
                    class="btn @GetButtonClass(tabPanel)"
                    @onclick=@( () => ActivatePage(tabPanel) )>
                @tabPanel.Text
            </button>
        }
    </div>
    @ChildContent
</CascadingValue>

@code {
    // Next line is needed so we are able to add <TabPanel> components inside
    [Parameter]
    public RenderFragment ChildContent { get; set; }

    public TabPanel ActivePage { get; set; }
    List<TabPanel> Pages = new List<TabPanel>();

    internal void AddPage(TabPanel tabPanel)
    {
        Pages.Add(tabPanel);
        if (Pages.Count == 1)
            ActivePage = tabPanel;
        StateHasChanged();
    }

    string GetButtonClass(TabPanel page)
    {
        return page == ActivePage ? "btn-primary" : "btn-secondary";
    }

    void ActivatePage(TabPanel page)
    {
        ActivePage = page;
    }
}