@page "/floating-label"
@inject IStringLocalizer<FloatingLabels> Localizer

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

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

<DemoBlock Title="@Localizer["FloatingLabelNormalTitle"]"
           Introduction="@Localizer["FloatingLabelNormalIntro"]"
           Name="Normal">
    <FloatingLabel DisplayText="Text" TValue="string" IsSelectAllTextOnFocus="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelDisplayTextTitle"]"
           Introduction="@Localizer["FloatingLabelDisplayTextIntro"]"
           Name="DisplayText">
    <FloatingLabel DisplayText="Text" Value="@Model.Name" />
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelBindValueTitle"]"
           Introduction="@Localizer["FloatingLabelBindValueIntro"]"
           Name="BindValue">
    <ValidateForm Model="@Model">
        <FloatingLabel DisplayText="@Localizer["FloatingLabelBindValueDisplayText"]" maxlength="5" @bind-Value="@BindValueModel.Name" />
    </ValidateForm>
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelPasswordTitle"]"
           Introduction="@Localizer["FloatingLabelPasswordIntro"]"
           Name="Password">
    <p>@((MarkupString)Localizer["FloatingLabelPasswordDescription"].Value)</p>
    <FloatingLabel DisplayText="@Localizer["FloatingLabelPasswordDisplayText"]" TValue="string" type="password" maxlength="5" style="width: 200px;" />
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelFormatStringTitle"]"
           Introduction="@Localizer["FloatingLabelFormatStringIntro"]"
           Name="FormatString">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <FloatingLabel DisplayText="@Localizer["FloatingLabelFormatStringDisplayText"]" FormatString="000" step="1" @bind-Value="@Model.Count" />
        </div>
        <div class="col-12 col-sm-6 align-self-center">
            <div class="col-form-label">@Localizer["FloatingLabelFormatStringDiv1", FormatStringModel.Count.ToString("000")]</div>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelDisabledTitle"]"
           Introduction="@Localizer["FloatingLabelDisabledIntro"]"
           Name="Disabled">
    <FloatingLabel DisplayText="@Localizer["FloatingLabelDisabledDisplayText"]" TValue="string" IsDisabled="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelFormatterTitle"]"
           Introduction="@Localizer["FloatingLabelFormatterTitle"]"
           Name="Formatter">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-form-label align-self-center">@Localizer["FloatingLabelFormatterDiv2"] <code class="ms-1">FormatString</code></div>
        <div class="col-12 col-sm-6">
            <FloatingLabel DisplayText="FormatString" Value="DateTime.Now" FormatString="yyyy-MM-dd" IsDisabled="true" />
        </div>
        <div class="col-12 col-sm-6 col-form-label align-self-center">@Localizer["FloatingLabelFormatterDiv2"] <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <FloatingLabel DisplayText="Formatter" Value="DateTime.Now" Formatter="@DateTimeFormatter" IsDisabled="true" />
        </div>
    </div>
    <p class="mt-3">@((MarkupString)Localizer["FloatingLabelFormatterDescription"].Value)</p>
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-form-label align-self-center">@Localizer["FloatingLabelFormatterDiv2"] <code class="ms-1">Formatter</code></div>
        <div class="col-12 col-sm-6">
            <FloatingLabel DisplayText="@Localizer["FloatingLabelFormatterDisplayText"]" Value="@ByteArray" Formatter="@ByteArrayFormatter" IsDisabled="true" />
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["FloatingLabelGroupBoxTitle"]"
           Introduction="@Localizer["FloatingLabelGroupBoxTitle"]"
           Name="GroupBox">
    <FloatingLabel DisplayText="Email" TValue="string" IsSelectAllTextOnFocus="true" IsGroupBox="true" PlaceHolder="user@blazor.zone" />
</DemoBlock>

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