@page "/onscreen-keyboard"
@inject IStringLocalizer<OnScreenKeyboards> Localizer

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

<PackageTips Name="BootstrapBlazor.OnScreenKeyboard" />

<p><b>@Localizer["OnScreenKeyboardsBasicTitle"]</b></p>
<div class="code-label">Razor</div>
<Pre class="no-highlight">1. &lt;OnScreenKeyboard /&gt;</Pre>
<Pre class="no-highlight">2. &lt;input class="virtualkeyboard" data-kioskboard-type="all" data-kioskboard-specialcharacters="true" /&gt;</Pre>

<DemoBlock Title="@Localizer["OnScreenKeyboardsNormalText"]"
           Introduction="@Localizer["OnScreenKeyboardsNormalIntro"]"
           Name="Normal">
    <input class="form-control virtualkeyboard"
           data-kioskboard-type="@KeyboardType.all.ToString()"
           data-kioskboard-specialcharacters="true"
           placeholder='@Localizer["OnScreenKeyboardsNormalIntro"]' />
    <OnScreenKeyboard ClassName="virtualkeyboard" KeyboardKeys="KeyboardKeysType.english" />
</DemoBlock>

<DemoBlock Title="@Localizer["OnScreenKeyboardsTypekeyboardTitle"]"
           Introduction=""
           Name="Typekeyboard">
    <input class="form-control virtualkeyboard"
           data-kioskboard-type="@KeyboardType.keyboard.ToString()"
           data-kioskboard-placement="@KeyboardPlacement.bottom.ToString()"
           placeholder='@Localizer["OnScreenKeyboardsTypekeyboardTitle"]' />
</DemoBlock>

<DemoBlock Title="@Localizer["OnScreenKeyboardsTypeNumpadTitle"]"
           Introduction=""
           Name="TypeNumpadTitle">
    <input class="form-control virtualkeyboard"
           data-kioskboard-type="@KeyboardType.numpad.ToString()"
           data-kioskboard-placement="@(KeyboardPlacement.bottom.ToString())"
           placeholder='@Localizer["OnScreenKeyboardsTypeNumpadTitle"]' />
</DemoBlock>

<DemoBlock Title="@Localizer["OnScreenKeyboardsThemeDarkTitle"]"
           Introduction=""
           Name="ThemeDarkTitle">
    <input class="form-control virtualkeyboard1"
           data-kioskboard-type="@KeyboardType.keyboard.ToString()"
           placeholder='@Localizer["OnScreenKeyboardsThemeDarkTitle"]' />
    <OnScreenKeyboard ClassName="virtualkeyboard1" Option="Option" />
</DemoBlock>

<DemoBlock Title="@Localizer["OnScreenKeyboardsSpecialcharactersTitle"]"
           Introduction=""
           Name="SpecialcharactersTitle">
    <input class="form-control virtualkeyboard3"
           data-kioskboard-specialcharacters="true"
           placeholder='@Localizer["OnScreenKeyboardsSpecialcharactersCustomerTitle"]' />
    <input class="form-control virtualkeyboard2"
           data-kioskboard-specialcharacters="true"
           placeholder='@Localizer["OnScreenKeyboardsSpecialcharactersTitle"]' />
    <OnScreenKeyboard ClassName="virtualkeyboard2" Option="CustomerOption" />
</DemoBlock>

<DemoBlock Title="@Localizer["OnScreenKeyboardsSpecialcharactersCustomerTitle"]"
           Introduction="[- + =]"
           Name="SpecialcharactersCustomerTitle">
    <OnScreenKeyboard ClassName="virtualkeyboard3" Option="SpecialcharactersOption" />
</DemoBlock>

<DemoBlock Title="@Localizer["OnScreenKeyboardsAppTitle"]"
           Introduction=""
           Name="App">
    <p>@Localizer["OnScreenKeyboardsAppDescription"]</p>
    <div class="form-control textarea-demo"> @BindValue</div>
    <p>BootstrapInput</p>
    <BootstrapInput class="virtualkeyboardbb" data-kioskboard-specialcharacters="true" placeholder="BootstrapInput" @bind-Value="@BindValue" />
    <p>BootstrapPassword</p>
    <BootstrapPassword class="virtualkeyboardbb" data-kioskboard-specialcharacters="true" placeholder="BootstrapPassword" @bind-Value="@BindValue" />
    <p>Textarea</p>
    <Textarea class="virtualkeyboardbb" data-kioskboard-specialcharacters="true" placeholder="Textarea" rows="4" @bind-Value="@BindValue" />
    <OnScreenKeyboard ClassName="virtualkeyboardbb" Option="AppOption" />
</DemoBlock>

<Tips class="mt-3">
    <p><b>@Localizer["OnScreenKeyboardsTips"] ：</b></p>
    <p>@((MarkupString)Localizer["OnScreenKeyboardsCss"].Value)</p>
</Tips>

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

<AttributeTable Items="@GetKeyboardOptionAttributes()" Title="KeyboardOption" />

<AttributeTable Items="@GetKeyboardEnumAttributes()" Title="KeyboardEnum" />
