@using Microsoft.AspNetCore.Components

@using Radzen.Blazor
@inherits LayoutComponentBase
@inject ThemeService ThemeService
@inject QueryStringThemeService QueryStringThemeService
@inject ExampleService ExampleService
@inject NavigationManager UriHelper
@inject IJSRuntime JSRuntime
@inject TooltipService TooltipService
@inject DialogService DialogService

<Canonical />

<RadzenComponents />

<RadzenLayout>
<RadzenHeader class="rz-p-0">
    <ChildContent>
        <MainTopNav />
        <RadzenRow AlignItems="AlignItems.Center" JustifyContent="JustifyContent.Start" Gap="0px" class="demos-nav">
            <RadzenColumn Size="5">
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center">
                    <RadzenSidebarToggle Click="@(() => sidebarExpanded = !sidebarExpanded)" />
                    <RadzenLink Path="/docs/api" Text="Radzen Blazor API Reference" Title="Radzen Blazor Components API Reference" Style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;" />
                </RadzenStack>
            </RadzenColumn>
            <RadzenColumn Size="7">
                <RadzenStack Orientation="Orientation.Horizontal" AlignItems="AlignItems.Center" JustifyContent="JustifyContent.End">
                    <div class="rz-display-none rz-display-sm-inline-flex align-items-center">
                        <RadzenLink Path="/" Text="Demos" Title="Radzen Blazor Components Demos" class="rz-mx-2 rz-mx-lg-4" />
                        <GitHubStarLink />
                    </div>
                </RadzenStack>
            </RadzenColumn>
        </RadzenRow>
    </ChildContent>
</RadzenHeader>
<RadzenBody>
    <ChildContent>
        <RadzenContentContainer Name="main">
            <RadzenRow Gap="2rem" class="rz-pt-6 rz-px-0 rz-px-sm-8 rz-px-xl-12">
                <RadzenColumn Size="12">
                    <RadzenRow class="rz-mx-auto" Style="max-width: 1600px;">
                        <RadzenColumn Size="12">
                            @Body
                        </RadzenColumn>
                    </RadzenRow>
                </RadzenColumn>
            </RadzenRow>
        </RadzenContentContainer>
    </ChildContent>
</RadzenBody>
<RadzenSidebar @bind-Expanded="@sidebarExpanded" class="demos-sidebar" Style="display: flex; flex-direction: column">
    <ApiNavPanel />
</RadzenSidebar>
</RadzenLayout>

@if (!rendered)
{
<div class="rz-app-loading">
    <div class="logo-loading"></div>
</div>
}

@code {
    bool sidebarExpanded = true;
    bool rendered;

    protected override void OnAfterRender(bool firstRender)
    {
        if (firstRender)
        {
            rendered = true;
            StateHasChanged();
        }
    }
}
