@page "/auto-complete"
@inject IStringLocalizer<AutoCompletes> Localizer

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

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

<DemoBlock Title="@Localizer["Block1Title"]" Introduction="@Localizer["Block1Intro"]" Name="Normal">
    <section ignore>@((MarkupString)Localizer["NormalDescription"].Value)</section>
    <div style="width: 200px;">
        <AutoComplete Value="@_value" Items="@StaticItems" IsSelectAllTextOnFocus="true" IsClearable></AutoComplete>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block2Title"]" Introduction="@Localizer["Block2Intro"]" Name="LikeMatch">
    <section ignore>@Localizer["LikeMatchDescription"]</section>
    <div style="width: 200px;">
        <AutoComplete Value="@_matchValue" Items="@StaticItems" IsLikeMatch="true" IgnoreCase="false" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block3Title"]" Introduction="@Localizer["Block3Intro"]" Name="NoDataTip">
    <section ignore>@((MarkupString)Localizer["NoDataTipDescription"].Value)</section>
    <div style="width: 200px;">
        <AutoComplete Value="@_tipValue" Items="@StaticItems" NoDataTip="@Localizer["NoDataTip"]" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block4Title"]" Introduction="@Localizer["Block4Intro"]" Name="OnCustomFilter">
    <section ignore>@Localizer["ValueChangedDescription"]</section>
    <div style="width: 200px;">
        <AutoComplete Value="@_filterValue" Items="@Items" OnCustomFilter="OnCustomFilter" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["Block5Title"]" Introduction="@Localizer["Block5Intro"]" Name="ShowLabel">
    <section ignore>@((MarkupString)Localizer["ShowLabelDescription"].Value)</section>
    <Divider Text="@Localizer["Divider1Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <ValidateForm Model="@Model">
        <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="true" IsClearable="true" />
    </ValidateForm>
    <Divider Text="@Localizer["Divider2Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;" />
    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" ShowLabel="false" />
    <Divider Text="@Localizer["Divider3Text"]" Alignment="Alignment.Left" style="margin: 2rem 0;"></Divider>
    <AutoComplete Items="@StaticItems" @bind-Value="@Model.Name" DisplayText="@Localizer["AutoText"]" ShowLabel="true" />
</DemoBlock>

<DemoBlock Title="@Localizer["DebounceTitle"]" Introduction="@Localizer["DebounceIntro"]" Name="Debounce">
    <section ignore>@Localizer["DebounceDescription"]</section>
    <div style="width: 200px;">
        <AutoComplete @bind-Value="@_debounceValue" Items="@Items" Debounce="500" />
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["OnSelectedItemChangedTitle"]" Introduction="@Localizer["OnSelectedItemChangedIntro"]" Name="OnSelectedItemChanged">
    <AutoComplete Items="@StaticItems" OnSelectedItemChanged="OnSelectedItemChanged"></AutoComplete>
    <section ignore>
        <ConsoleLogger @ref="Logger" />
    </section>
</DemoBlock>

<DemoBlock Title="@Localizer["ItemTemplateTitle"]" Introduction="@Localizer["ItemTemplateIntro"]" Name="ItemTemplate">
    <AutoComplete Items="@StaticItems">
        <ItemTemplate>
            <div class="d-flex align-items-center">
                <i class="fa-solid fa-bell"></i>
                <span class="flex-fill ms-2">@context</span>
            </div>
        </ItemTemplate>
    </AutoComplete>
</DemoBlock>

<DemoBlock Title="@Localizer["BlockGroupTitle"]" Introduction="@Localizer["BlockGroupIntro"]" Name="Group">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
                <AutoComplete Items="@StaticItems" OnSelectedItemChanged="GroupOnSelectedItemChanged"></AutoComplete>
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputGroup>
                <AutoComplete Items="@StaticItems" OnSelectedItemChanged="GroupOnSelectedItemChanged"></AutoComplete>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
            </BootstrapInputGroup>
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputGroup>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupPrevLabel"]" />
                <AutoComplete Items="@StaticItems" OnSelectedItemChanged="GroupOnSelectedItemChanged"></AutoComplete>
                <BootstrapInputGroupLabel DisplayText="@Localizer["BlockGroupSuffixLabel"]" />
            </BootstrapInputGroup>
        </div>
    </div>
    <ConsoleLogger @ref="GroupLogger" />
</DemoBlock>

<DemoBlock Title="@Localizer["PopoverTitle"]"
           Introduction="@Localizer["PopoverIntro"]"
           Name="Popover">
    <AutoComplete Items="@StaticItems" IsPopover="true"></AutoComplete>
</DemoBlock>

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