@page "/layouts"

<h3>Layout</h3>

<h4>The container component used for layout, which is convenient to quickly build the basic structure of the page:</h4>

<p>
    <code>Container</code>：Outer container. When the child element contains <code>Header</code> or <code>Footer</code>, all child elements will be arranged vertically up and down, otherwise they will be arranged horizontally.<br />
    <code>Header</code>：Top bar container<br />
    <code>Side</code>：Sidebar container<br />
    <code>Main</code>：Main area container<br />
    <code>Footer</code>：Bottom bar container
</p>

<h4>Component overview</h4>
<p>
    <code>Layout</code>：Layout container, <code>Header</code> <code>Sider</code> <code>Main</code> <code>Footer</code> or <code>Layout</code> itself can be nested under it , Can be placed in any parent container<br />
    <code>Header</code>：Top layout, with default style, any elements can be nested under it<br />
    <code>Sider</code>：Sidebar, with default style and basic functions, any elements can be nested under it<br />
    <code>Main</code>：The content part, with its own default style, any element can be nested under it<br />
    <code>Footer</code>：Bottom layout, with default style, any element can be nested under it
</p>

<Tips>
    <p>
        The above components adopt flex layout, please make sure the target browser is compatible before using. In addition, the child element of <code>Layout</code> can only be the latter four, and the parent element of the latter four can only be <code>Layout</code>
    </p>

    <b>Matters needing attention</b>

    <p>In order to make it easy for everyone to use this set of components to quickly build projects, the author has created <b>Project Templates</code></b>, using the <code>dotnet new</code> command line, and < code>Bootstrap Blazor App Extension extension plug-in</code> Create a new project through <code>Visual Studio 2019</code>. For specific usage and steps, please click <a href='template' target='_blank'>Portal</a></p>
</Tips>

<h4>Common page layout</h4>

<DemoBlock Title="Top, middle and bottom layout" Introduction="Commonly found in Internet website layout" Name="UpAndDown">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</DemoBlock>

<DemoBlock Title="Left and right structural layout in the middle" Introduction="The middle part adopts the left and right structure, which is mostly used for back-end management website layout. When the <code>Side</code> component is added to the layout template, the upper middle and lower parts are used by default, and the middle part adopts the left and right structure layout." Name="MiddleLeftRight">
    <Layout ShowFooter="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</DemoBlock>

<DemoBlock Title="Left and right structure" Introduction="The right side adopts an upper, middle and lower structure, which is mostly used for back-end management of the website layout, and the layout is controlled to the left and right structure by setting the <code>IsFullSide</code> attribute value" Name="LeftRight">
    <Layout ShowFooter="true" IsFullSide="true">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</DemoBlock>

<DemoBlock Title="Customize sidebar width support percentage" Introduction="The width of the sidebar is controlled by setting the <code>SideWidth</code> property, which supports percentage writing. When setting <code>0</code>, the width setting function is turned off, and the internal sub-controls are used to fill the width feature" Name="CuntomPercent">
    <Layout ShowFooter="true" SideWidth="200">
        <Header>
            <div class="text-center header">Header</div>
        </Header>
        <Side>
            <div class="text-center side">Side</div>
        </Side>
        <Main>
            <div class="text-center main">Main</div>
        </Main>
        <Footer>
            <div class="text-center footer">Footer</div>
        </Footer>
    </Layout>
</DemoBlock>

<DemoBlock Title="Practical application" Name="app">
    <div>In actual use, the sidebar generally has two uses</div>
    <ul class="mt-2">
        <li>
            <div>The sidebar fills the entire screen, and scroll bars appear when the overall height of the menu exceeds the screen</div>
        </li>
        <li>
            <div>The sidebar is not processed and the height is automatically opened by the content</div>
        </li>
    </ul>
    <div>Because there are many ways to use it, this component is not packaged, and it is up to you to decide how to carry out the layout. The following is a practical example in actual use</div>
    <p>
        In order to facilitate your study and comparison, try to use the <code>style</code> inline style in the following practical examples
    </p>
    <p>
        In this example, a scroll bar appears after clicking the menu on the left to expand
    </p>
    <Tips>
        The available area in the right panel is all by default, which is suitable for layouts with <code>Tab</code> components. In this example, for the sake of beauty, the <code>Main</code> template has a built-in <code>div</code > And set the style to <code>style='padding: 1rem;'</code>
    </Tips>
    <div style="width: 100%; height: 300px; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="position: absolute; top: 0; left:0; right: 0; bottom: 0; overflow: auto; border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        In this example, if the scroll bar does not appear after clicking the left menu to expand, the height of the parent container will be expanded
    </p>
    <div style="width: 100%; border: 1px solid rgba(0,0,0,.125);">
        <Layout ShowFooter="true" SideWidth="160px">
            <Header>
                <div class="d-flex justify-content-center align-items-center" style="height: 50px; color: #fff; margin: 0 -1px;">Header</div>
            </Header>
            <Side>
                <div style="border-right: 1px solid rgba(0,0,0,.125); padding: 6px 0;">
                    <Menu Items="@IconSideMenuItems" DisableNavigation="true" IsVertical="true"></Menu>
                </div>
            </Side>
            <Main>
                <div style="padding: 1rem;">Main</div>
            </Main>
            <Footer>
                <div class="d-flex justify-content-center align-items-center" style="height: 30px; color: #fff; background-color: #5b6e84; margin: 0 -1px;">Footer</div>
            </Footer>
        </Layout>
    </div>
    <p class="mt-3">
        Please refer to <a href='/tabs'>Tab component</a> for practical examples of using <code>Layout</code> component and <code>Tab</code> component together
    </p>
</DemoBlock>

<DemoBlock Title="Full page level components" Name="Page">
    <Tips>By setting the <code>IsPage</code> property to set whether the <code>Layout</code> component controls the layout of the front page level, after setting it to <code>true</code>, the component adopts the full-screen layout</Tips>

    <ul class="page-layout-demo-list">
        <li><a href="layout-page" target="_blank">Whole page component generator</a></li>
    </ul>
</DemoBlock>

<AttributeTable Items="@GetAttributes()" />

// Copyright (c) Argo Zhang (argo@163.com). All rights reserved.
// Licensed under the Apache License, Version 2.0. See License.txt in the project root for license information.
// Website: https://www.blazor.zone or https://argozhang.github.io/

namespace BootstrapBlazor.Shared.Samples;

/// <summary>
/// 
/// </summary>
public sealed partial class Layouts
{
    [Inject]
    [NotNull]
    private IStringLocalizer<Menus>? LocalizerMenu { get; set; }

    [Inject]
    [NotNull]
    private IStringLocalizer<Layouts>? Localizer { get; set; }

    private IEnumerable<MenuItem>? IconSideMenuItems { get; set; }

    /// <summary>
    /// OnInitializedAsync 方法
    /// </summary>
    /// <returns></returns>
    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();

        IconSideMenuItems = await MenusDataGerator.GetIconSideMenuItemsAsync(LocalizerMenu);
    }

    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "Header",
                Description = Localizer["Desc1"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Side",
                Description = Localizer["Desc2"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "SideWidth",
                Description = Localizer["Desc3"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = "300px"
            },
            new AttributeItem() {
                Name = "Main",
                Description = Localizer["Desc4"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Footer",
                Description = Localizer["Desc5"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "Menus",
                Description = Localizer["Desc6"],
                Type = "IEnumerable<MenuItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "IsFullSide",
                Description = Localizer["Desc7"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsPage",
                Description = Localizer["Desc8"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsFixedFooter",
                Description = Localizer["Desc9"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsFixedHeader",
                Description = Localizer["Desc10"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "IsAccordion",
                Description = Localizer["IsAccordion"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowCollapseBar",
                Description =  Localizer["Desc11"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowFooter",
                Description =  Localizer["Desc12"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "ShowGotoTop",
                Description =  Localizer["Desc13"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "UseTabSet",
                Description =  Localizer["Desc14"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "AdditionalAssemblies",
                Description =  Localizer["Desc15"],
                Type = "IEnumerable<Assembly>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnCollapsed",
                Description =  Localizer["Desc16"],
                Type = "Func<bool, Task>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "OnClickMenu",
                Description =  Localizer["Desc17"],
                Type = "Func<bool, MenuItem>",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "TabDefaultUrl",
                Description =  Localizer["TabDefaultUrl"],
                Type = "string?",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}