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

<h3>@Localizer["SplitsTitle"]</h3>

<DemoBlock Title="@Localizer["SplitsNormalTitle"]"
           Introduction="@Localizer["SplitsNormalIntro"]"
           Name="Normal">
    <section ignore class="row">
        <div class="col-12 col-sm-6">
            <div class="d-flex align-items-center">
                <Switch Value="_showBarHandle" OnValueChanged="OnShowBarHandle" class="w-auto"></Switch>
                <div class="ms-3">@_barHandleText</div>
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="d-flex align-items-center">
                <Switch Value="_isCollapsible" OnValueChanged="OnCollapsible" class="w-auto"></Switch>
                <div class="ms-3">@_collapsibleText</div>
            </div>
        </div>
    </section>
    <div class="border split-demo split-demo-horizontal">
        <Split ShowBarHandle="_showBarHandle" OnResizedAsync="OnResizedAsync" IsCollapsible="_isCollapsible">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
    <ConsoleLogger @ref="_logger"></ConsoleLogger>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitsPercentTitle"]"
           Introduction="@Localizer["SplitsPercentIntro"]"
           Name="Basis">
    <div class="border split-demo split-demo-horizontal">
        <Split Basis="40%">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitsVerticalTitle"]"
           Introduction="@Localizer["SplitsVerticalIntro"]"
           Name="IsVertical">
    <div class="border split-demo">
        <Split IsVertical="true">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel3"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel4"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitsNestedTitle"]"
           Introduction="@Localizer["SplitsNestedIntro"]"
           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">@Localizer["SplitsPanel5"]</div>
                    </FirstPaneTemplate>
                    <SecondPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel6"]</div>
                    </SecondPaneTemplate>
                </Split>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel7"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitsCollapsibleTitle"]"
           Introduction="@Localizer["SplitsCollapsibleIntro"]"
           Name="Collapsible">
    <div class="border split-demo">
        <Split IsCollapsible="true">
            <FirstPaneTemplate>
                <Split IsVertical="true" IsCollapsible="true">
                    <FirstPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel8"]</div>
                    </FirstPaneTemplate>
                    <SecondPaneTemplate>
                        <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel9"]</div>
                    </SecondPaneTemplate>
                </Split>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel10"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitsMinimumTitle"]"
           Introduction="@Localizer["SplitsMinimumIntro"]"
           Name="Minimum">
    <div class="border split-demo split-demo-horizontal">
        <Split Basis="40%" FirstPaneMinimumSize="48px" SecondPaneMinimumSize="48px" IsCollapsible="true">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitSetLeftTitle"]"
           Introduction="@Localizer["SplitSetLeftIntro"]"
           Name="SetLeft">
    <section ignore>
        <Button Text="25%" OnClickWithoutRender="@(async () => await OnSetLeft("25%"))"></Button>
        <Button Text="50%" OnClickWithoutRender="@(async () => await OnSetLeft("50%"))"></Button>
        <Button Text="100%" OnClickWithoutRender="@(async () => await OnSetLeft("100%"))"></Button>
    </section>
    <div class="border split-demo split-demo-horizontal">
        <Split Basis="40%" IsCollapsible="true" @ref="Split1">
            <FirstPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel1"]</div>
            </FirstPaneTemplate>
            <SecondPaneTemplate>
                <div class="d-flex justify-content-center align-items-center h-100">@Localizer["SplitsPanel2"]</div>
            </SecondPaneTemplate>
        </Split>
    </div>
</DemoBlock>

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