@page "/stack"
@inject IStringLocalizer<Stacks> Localizer

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

<DemoBlock Title="@Localizer["BasicTitle"]" Introduction="@Localizer["BasicIntro"]" Name="Normal">
    <section ignore class="row g-3">
        <div class="col-12">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["Mode"]" />
                <RadioList @bind-Value="@ShowModeString" Items="@ShowMode" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["Justify"]" />
                <RadioList @bind-Value="Justify" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["AlignItems"]" />
                <RadioList @bind-Value="AlignItems" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["IsWrap"]" />
                <Switch @bind-Value="IsWrap" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["IsReverse"]" />
                <Switch @bind-Value="IsReverse" />
            </BootstrapInputGroup>
        </div>
    </section>

    <div class="stack-demo">
        <Stack IsRow="@IsRow" Justify="@Justify" AlignItems="@AlignItems" IsWrap="@IsWrap" IsReverse="@IsReverse">
            <StackItem>
                <div class="stack-item-demo">Item 1</div>
            </StackItem>
            <StackItem AlignSelf="@AlignSelf">
                <div class="stack-item-demo">Item 2</div>
            </StackItem>
            <StackItem>
                <div class="stack-item-demo">Item 3</div>
            </StackItem>
        </Stack>
    </div>

    <section ignore class="row g-3">
        <div class="col-12">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["AlignSelf"]" />
                <RadioList @bind-Value="@AlignSelf" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12">
            <p>@((MarkupString)Localizer["StackItemGrowShrinkDesc"].Value)</p>
            <ul class="ul-demo">
                @((MarkupString)Localizer["StackItemGrowShrinkLi"].Value)
            </ul>
        </div>
    </section>

    <section ignore>
        <Pre>&lt;StackItem class="flex-grow-1" &gt;
    &lt;div class="stack-item-demo">Item 3&lt;/div&gt;
&lt;/StackItem&gt;</Pre>
    </section>
</DemoBlock>

<AttributeTable Items="GetAttributeItems()" />
