@page "/layout-page"
@layout PageLayout
@attribute [TabItemOption(Text = "后台模拟器", Icon = "fa-fw fa-solid fa-desktop")]
@inject IStringLocalizer<LayoutPages> Localizer

<div style="@StyleString">

    <h4>@Localizer["H1"]</h4>

    <Tips class="mt-3">
        <p>@Localizer["P1"] <code>Layout</code> @Localizer["P2"] <code>dotnet new bbapp</code> @Localizer["P3"] <code>Visual Studio</code> @Localizer["P4"] <code>@Localizer["P5"]</code> @Localizer["P6"] <a href="template" target="_blank">[@Localizer["P7"]]</a></p>
        <div>
            <b class="mb-3">@Localizer["P8"]：</b>
            <code>Layout</code> @Localizer["P9"] <code>@Localizer["P10"]</code> @Localizer["P11"] <code>@Localizer["P12"]</code> @Localizer["P13"] <code>AdditionalAssemblies</code> @Localizer["P14"] <a href="https://docs.microsoft.com/en-us/aspnet/core/blazor/fundamentals/routing?#route-to-components-from-multiple-assemblies" target="_blank">[@Localizer["P15"]]</a>
        </div>
    </Tips>

    <div class="page-layout-demo-option">
        <p>@Localizer["P16"]</p>
        <div class="row">
            <div class="col-12">
                <RadioList Value="ActiveItem" Items="@SideBarItems" OnSelectedChanged="@OnSideChanged" />
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <Checkbox Value="ShowFooter" OnValueChanged="OnFooterChanged" ShowAfterLabel="true" DisplayText="@Localizer["P17"]" />
            </div>
        </div>
        <div class="row mt-3">
            <div class="col-12">
                <Switch Value="@UseTabSet" OnText="@Localizer["P18"]" OffText="@Localizer["P19"]" OnColor="@Color.Success" OffColor="@Color.Secondary" style="width: 120px;" OnValueChanged="OnUseTabSetChanged"></Switch>
            </div>
        </div>
    </div>

    <div class="page-layout-demo-option">
        <p>@Localizer["P20"]</p>
        <Checkbox Value="@IsFixedTabHeader" OnStateChanged="@OnTabStateChanged" ShowAfterLabel="true" DisplayText="@Localizer["P21"]" />
        <Checkbox Value="@IsFixedHeader" OnStateChanged="@OnHeaderStateChanged" IsDisabled="IsFixedTabHeader" ShowAfterLabel="true" DisplayText="@Localizer["P22"]" class="mx-3" />
        <Checkbox Value="@IsFixedFooter" OnStateChanged="@OnFooterStateChanged" IsDisabled="IsFixedTabHeader" ShowAfterLabel="true" DisplayText="@Localizer["P23"]" />
    </div>

    <div class="page-layout-demo-option">
        <p>@Localizer["P24"]</p>
        <div>@Localizer["P25"] <code>Header</code> @((MarkupString)Localizer["P26"].Value)</div>
    </div>

    <div class="page-layout-demo-option">
        <p>@Localizer["P27"]</p>
        <div class="page-layout-demo-option-height">
            <span>@Localizer["P28"]</span>
            <Slider @bind-Value="@Height" style="margin: 0 1rem; flex: 1;" />
            <BootstrapInput Value="@(Height * 100)" readonly style="width: 80px;" />
        </div>
    </div>

    @if (UseTabSet)
    {
        <div class="page-layout-demo-option">
            <p>@Localizer["P29"]</p>
            <div>@Localizer["P30"] <b><TabLink Text="@Localizer["P31"]" Url="layout-page1" Icon="fa-solid fa-font-awesome">@Localizer["P32"]</TabLink></b> @Localizer["P33"]</div>
            <div class="mt-2">@Localizer["P34"] <Button Text="@Localizer["P35"]" Icon="fa-solid fa-font-awesome" OnClickWithoutRender="OnNavigation" TooltipText="Tooltip" TooltipTrigger="hover" /></div>
        </div>
    }
</div>
