@page "/input-number"
@inject IStringLocalizer<InputNumbers> Localizer

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

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

<DemoBlock Title="@Localizer["InputNumbersNormalTitle"]"
           Introduction="@Localizer["InputNumbersNormalIntro"]"
           Name="Normal">
    <div class="demo-input-number">
        <BootstrapInputNumber Value="@BindValue" IsSelectAllTextOnFocus="true" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersRangeTitle"]"
           Introduction="@Localizer["InputNumbersRangeIntro"]"
           Name="Range">
    <div class="demo-input-number">
        <BootstrapInputNumber Value="@BindValue" Max="10" Min="1" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersUseInputEventTitle"]"
           Introduction="@Localizer["InputNumbersUseInputEventIntro"]"
           Name="UseInputEvent">
    <div class="row g-2 form-inline">
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber @bind-Value="@BindInputNullableValue" ShowLabel="true" DisplayText="int?" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@BindInputNullableValue"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber @bind-Value="@BindInputValue" ShowLabel="true" DisplayText="int" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@BindInputValue"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber @bind-Value="@InputNullableValue" UseInputEvent="true" ShowLabel="true" DisplayText="double?" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@InputNullableValue"></Display>
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber @bind-Value="@InputValue" UseInputEvent="true" ShowLabel="true" DisplayText="double" />
        </div>
        <div class="col-12 col-sm-6">
            <Display Value="@InputValue"></Display>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersShowButtonTitle"]"
           Introduction="@Localizer["InputNumbersShowButtonIntro"]"
           Name="ShowButton">
    <p>@Localizer["InputNumbersShowButtonDescription"]</p>
    <div class="demo-input-number">
        <BootstrapInputNumber ShowButton="true" Value="@BindValue" Max="10" Min="0" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersNullableTitle"]"
           Introduction="@Localizer["InputNumbersNullableIntro"]"
           Name="NullableValue">
    <div class="demo-input-number">
        <BootstrapInputNumber Value="@NullableValue" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersStepTitle"]"
           Introduction="@Localizer["InputNumbersStepIntro"]"
           Name="Step">
    <div>
        <div class="demo-input-number">
            <p>@Localizer["InputNumbersStep1"]</p>
            <BootstrapInputNumber ShowButton="true" Value="5" Color="Color.Danger" />
        </div>
        <div class="demo-input-number mt-3">
            <p>@Localizer["InputNumbersStep10"]</p>
            <BootstrapInputNumber ShowButton="true" Value="10" Step="10" Color="Color.Success" />
        </div>
        <div class="demo-input-number mt-3">
            <p>@Localizer["InputNumbersStep0.1"]</p>
            <BootstrapInputNumber ShowButton="true" Value="0.5" Step="0.1" Formatter="@Formatter" Color="Color.Warning" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersColorTitle"]"
           Introduction="@Localizer["InputNumbersColorIntro"]"
           Name="Color">
    <p>@Localizer["InputNumbersColorDescription1"]</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.None" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Primary" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Success" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Info" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Warning" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Danger" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Dark" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber ShowButton="true" Value="10" Color="Color.Secondary" />
            </div>
        </div>
    </div>
    <p class="mt-3">@Localizer["InputNumbersColorDescription2"]</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="10" Color="Color.None" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="10" Color="Color.Primary" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="10" Color="Color.Success" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="10" Color="Color.Info" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="10" Color="Color.Warning" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindFloatValue" Color="Color.Danger" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindDoubleValue" Color="Color.Dark" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindDecimalValue" Color="Color.Secondary" FormatString="#.##" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersDateTypeTitle"]"
           Introduction="@Localizer["InputNumbersDateTypeIntro"]"
           Name="DataType">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindShortValue" DisplayText="Short" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindValue" DisplayText="Int" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindLongValue" DisplayText="Long" ShowLabel="true" ShowButton="true" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindFloatValue" DisplayText="Float" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindDoubleValue" DisplayText="Double" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
        <div class="col-12 col-sm-6">
            <div class="demo-input-number">
                <BootstrapInputNumber Value="@BindDecimalValue" DisplayText="Decimal" ShowLabel="true" ShowButton="true" FormatString="#.##" />
            </div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersDisabledTitle"]"
           Introduction="@Localizer["InputNumbersDisabledIntro"]"
           Name="IsDisabled">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber Value="10" IsDisabled="true" />
        </div>
        <div class="col-12 col-sm-6">
            <BootstrapInputNumber Value="20" IsDisabled="true" ShowButton="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["InputNumbersValidateFormTitle"]"
           Introduction="@Localizer["InputNumbersValidateFormIntro"]"
           Name="ValidateForm">
    <p>@((MarkupString)Localizer["InputNumbersValidateFormDescription"].Value)</p>
    <div>
        <Divider Text="@Localizer["InputNumbersValidateFormDivider1"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
        <ValidateForm Model="@Model">
            <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" />
        </ValidateForm>
        <Divider Text="@Localizer["InputNumbersValidateFormDivider2"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
        <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="false" />
        <Divider Text="@Localizer["InputNumbersValidateFormDivider3"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
        <BootstrapInputNumber @bind-Value="@Model.Count" ShowLabel="true" DisplayText="@Localizer["InputNumbersValidateFormInputText"]" />
    </div>
</DemoBlock>

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