@page "/layoutlayout"

@rendermode RenderMode.InteractiveServer

<FluentLabel Typo="Typography.H3">Layout</FluentLabel>
<FluentDivider class="mt-1 mb-3" Role="DividerRole.Separator" />
<FluentLabel Typo="Typography.Body">
    The <code>FluentLayout</code> component is a container for other components.
</FluentLabel>
<FluentCard Width="auto" Height="auto">
    <FluentStack Orientation="Orientation.Horizontal" Wrap="true">
        <FluentSwitch @bind-Value="@showHeader">Header</FluentSwitch>
        <FluentSwitch @bind-Value="@showNavMenu">NavMenu</FluentSwitch>
        <FluentSwitch @bind-Value="@showBodyContent">BodyContent</FluentSwitch>
        <FluentSwitch @bind-Value="@showFooter">Footer</FluentSwitch>
    </FluentStack>
    <FluentLayout Class="mt-3">
        @if (showHeader)
        {
            <FluentHeader>
                Header text
                <FluentSpacer/>
                Aligned to the end
            </FluentHeader>
        }

        <FluentStack Orientation="Orientation.Horizontal">
            @if (showNavMenu)
            {
                <FluentNavMenu Width="250">
                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Home())">Item 1</FluentNavLink>
                    <FluentNavLink Icon="@(new Icons.Regular.Size24.Cloud())">Item 2</FluentNavLink>
                    <FluentNavGroup Title="Item 3">
                        <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafOne())">Item 3.1</FluentNavLink>
                        <FluentNavLink Icon="@(new Icons.Regular.Size24.LeafTwo())">Item 3.2</FluentNavLink>
                    </FluentNavGroup>
                    <FluentNavLink Icon="@(new Icons.Regular.Size24.CalendarAgenda())" Disabled="true">Item 4</FluentNavLink>
                </FluentNavMenu>
            }

            @if (showBodyContent)
            {
                <FluentBodyContent Style="max-height:300px">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis lorem lacus.
                    Ut id leo non enim feugiat ultrices. Proin vulputate volutpat urna nec iaculis.
                    Integer dui lacus, fermentum sit amet aliquet in, scelerisque vitae dui.
                    Nulla fringilla sagittis orci eu consectetur. Fusce eget dolor non lectus placerat
                </FluentBodyContent>
            }
        </FluentStack>

        @if (showFooter)
        {
            <FluentFooter>
                Footer text
                <FluentSpacer/>
                Aligned to the end
            </FluentFooter>
        }
    </FluentLayout>
</FluentCard>

@code {
    bool showHeader = true;
    bool showNavMenu = true;
    bool showBodyContent = true;
    bool showFooter = true;
}