@namespace LumexUI.Docs.Client.Components
@inherits LayoutComponentBase
@layout DocsLayout

<PageTitle>@_title - LumexUI</PageTitle>

<CascadingValue TValue="DocsContentLayout" Value="@this" IsFixed="@true">
    <div class="pt-10 xl:mr-[11.5rem] lg:px-10">
        <DocsHeader Title="@_title"
                    Category="@_category"
                    Description="@_description"
                    LinksProps="@_linksProps" />

        <main class="mt-8 prose prose-zinc dark:prose-invert">
            <LumexDivider />

            @Body
        </main>

        <DocsFooter />
        <div class="scrollbar hidden fixed z-20 overflow-y-auto top-[4.0625rem] right-[max(0px,calc(50%-40rem))] bottom-0 w-[13rem] pb-10 xl:block">
            @TableOfContents
        </div>
    </div>
</CascadingValue>

@code {
    private RenderFragment TableOfContents => __builder =>
    {
        <div class="px-6">
            <div class="sticky top-0 pointer-events-none">
                <div class="h-10 bg-gradient-to-b from-background"></div>
            </div>
            <h5 class="text-foreground font-semibold mb-4 text-sm leading-6">
                On this page
            </h5>
            <nav>
                <ul class="text-sm leading-6">
                    @foreach( var item in _tableOfContents )
                    {
                        <li @key="@(item.Title)">
                            <LumexLink Href="@($"{RelativePath}#{item.Title.ToKebabCase()}")"
                                       Color="@ThemeColor.None"
                                       Match="@NavLinkMatch.Prefix"
                                       Class="py-1 w-full">
                                @(item.Title)
                            </LumexLink>
                        </li>

                        if( item.Children is not null )
                        {
                            foreach( var subItem in item.Children )
                            {
                                <li @key="@(subItem.Title)">
                                    <LumexLink Href="@($"{RelativePath}#{subItem.Title.ToKebabCase()}")"
                                               Color="@ThemeColor.None"
                                               Match="@NavLinkMatch.Prefix"
                                               Class="py-1 w-full ml-4">
                                        @(subItem.Title)
                                    </LumexLink>
                                </li>
                            }
                        }
                    }
                </ul>
            </nav>
        </div>
    };
}
