@page "/splits"
@inject IStringLocalizer<Splits> Localizer

<h3>Split</h3>

<DemoBlock Title="Basic usage" Introduction="Set the proportion of the initial position by setting the <code>Basis</code> attribute" Name="Normal">
    <div class="border split-demo split-demo-horizontal">
        <Split>
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100"></div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">I am the right panel</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="Set initialization percentage" Introduction="Set the proportion of the initial position by setting the <code>Basis</code> attribute" Name="Percent">
    <div class="border split-demo split-demo-horizontal">
        <Split Basis="40%">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">I am the left panel</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">I am the right panel</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="Vertical split" Introduction="Control the vertical split panel by setting the <code>IsVertical</code> property" Name="Vertical">
    <div class="border split-demo">
        <Split IsVertical="true">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">I am the upper panel</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">I am the bottom panel</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="Nested use" Introduction="Combine layout by nesting <code>Split</code> components" Name="Nested">
    <div class="border split-demo">
        <Split>
            <FirstPaneTemplate>
                <Split IsVertical="true">
                    <FirstPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">Upper</div>
                    </FirstPaneTemplate>
                    <SecondPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">Lower</div>
                    </SecondPaneTemplate>
                </Split>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">Right</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</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 Splits
{
    /// <summary>
    /// 获得属性方法
    /// </summary>
    /// <returns></returns>
    private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
    {
            // TODO: 移动到数据库中
            new AttributeItem() {
                Name = "IsVertical",
                Description = Localizer["Desc1"],
                Type = "bool",
                ValueList = "true|false",
                DefaultValue = "false"
            },
            new AttributeItem() {
                Name = "Basis",
                Description = Localizer["Desc2"],
                Type = "string",
                ValueList = " — ",
                DefaultValue = "50%"
            },
            new AttributeItem() {
                Name = "FirstPaneTemplate",
                Description = Localizer["Desc3"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            },
            new AttributeItem() {
                Name = "SecondPaneTemplate",
                Description = Localizer["Desc4"],
                Type = "RenderFragment",
                ValueList = " — ",
                DefaultValue = " — "
            }
    };
}