@namespace Oqtane.Themes.Controls
@inherits ThemeControlBase

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

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

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

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

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

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