@page "/dropdown"
@inject IStringLocalizer<Dropdowns> Localizer

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

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

<DemoBlock Title="@Localizer["NormalTitle"]" Introduction="@Localizer["NormalIntro"]" Name="Normal">
    <Dropdown TValue="string" Items="Items" OnSelectedItemChanged="@ShowMessage" Color="Color.Secondary"></Dropdown>
    <ConsoleLogger @ref="Logger" />
</DemoBlock>

<DemoBlock Title="@Localizer["NullTitle"]" Introduction="@Localizer["NullIntro"]" Name="Null">
    <Dropdown TValue="string" Items="EmptyList" Color="Color.Secondary"></Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["ColorTitle"]" Introduction='@Localizer["ColorIntro"]' Name="Color">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Color="Color.Primary"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Color="Color.Info"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Color="Color.Warning"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Color="Color.Danger"></Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["DropdownItemTemplateTitle"]" Introduction="@Localizer["DropdownItemTemplateIntro"]"
           Name="ItemTemplate">
    <Dropdown TValue="string" Items="ItemTemplateList">
        <ItemTemplate>
            <Tooltip Title="just a tooltip text demo" Trigger="hover">
                <span class="fa-solid fa-flag"></span>
                <div class="ms-2 flex-fill">@context.Text</div>
            </Tooltip>
        </ItemTemplate>
    </Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["DropdownItemsTemplateTitle"]" Introduction="@Localizer["DropdownItemsTemplateIntro"]"
           Name="ItemsTemplate">
    <Dropdown TValue="string" IsFixedButtonText="true" FixedButtonText="More" Icon="fa solid fa-ellipsis">
        <ItemsTemplate>
            <DropdownItem Text="Copy" Icon="fa-solid fa-copy" OnClick="@(() => OnClickAction("Copy"))"></DropdownItem>
            <DropdownItem Text="Paste" Icon="fa-solid fa-paste" OnClick="@(() => OnClickAction("Paste"))"></DropdownItem>
            <Divider></Divider>
            <DropdownItem Text="Action1" Icon="fa-solid fa-flag" OnClick="@(() => OnClickAction("Action1"))"></DropdownItem>
            <DropdownItem>
                <Tooltip Title="just a tooltip text demo" Trigger="hover">
                    <span class="fa-solid fa-flag"></span>
                    <div class="ms-2 flex-fill" @onclick="@(() => OnClickAction("Action2"))">Action2</div>
                </Tooltip>
            </DropdownItem>
        </ItemsTemplate>
    </Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["SplitTitle"]" Introduction='@Localizer["SplitIntro"]' Name="Split">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Primary"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Info"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Warning"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" ShowSplit="true" Color="Color.Danger"></Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["IsAsyncTitle"]" Introduction='@Localizer["IsAsyncIntro"]' Name="IsAsync">
    <Dropdown TValue="string" Items="Items" ShowSplit="true" IsAsync="true" OnClickWithoutRender="OnIsAsyncClick"></Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size">
    <div class="row g-3">
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" Size="Size.ExtraSmall"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" Size="Size.Small"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" Size="Size.Medium"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" Size="Size.Large"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" Size="Size.ExtraLarge"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3 col-xl-auto">
            <Dropdown TValue="string" Items="Items" Size="Size.ExtraExtraLarge"></Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["DirectionTitle"]" Introduction='@Localizer["DirectionIntro"]' Name="Direction">
    <div class="row form-inline form-inline-end g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropleft" ShowLabel="true" DisplayText="Start"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropright" ShowLabel="true" DisplayText="End"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropup" ShowLabel="true" DisplayText="Up"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string" Items="Items" Direction="Direction.Dropdown" ShowLabel="true" DisplayText="Down"></Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["AlignmentTitle"]" Introduction='@Localizer["AlignmentIntro"]' Name="Alignment">
    <div class="row form-inline form-inline-end g-3">
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string"
                      Items="Items"
                      Color="Color.Secondary"
                      MenuAlignment="Alignment.Left"
                      Direction="Direction.Dropdown"
                      ShowLabel="true" DisplayText="Start"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string"
                      Items="Items"
                      Color="Color.Secondary"
                      MenuAlignment="Alignment.Right"
                      Direction="Direction.Dropdown"
                      ShowLabel="true" DisplayText="End"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string"
                      Items="Items"
                      Color="Color.Secondary"
                      MenuAlignment="Alignment.Center"
                      Direction="Direction.Dropdown"
                      ShowLabel="true" DisplayText="Center"></Dropdown>
        </div>
        <div class="col-6 col-sm-4 col-md-3">
            <Dropdown TValue="string"
                      Items="Items"
                      Color="Color.Secondary"
                      MenuAlignment="Alignment.Center"
                      Direction="Direction.Dropup"
                      ShowLabel="true"
                      DisplayText="Center"></Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["ItemsTitle"]" Introduction='@Localizer["ItemsIntro"]' Name="Items">
    <div class="row">
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="@Foos"></Dropdown>
        </div>
        <div class="col-12 col-sm-6">
            <Button @onclick="@AddItem">@Localizer["AddItem"]</Button>
            <Button @onclick="@RemoveItem" Color="Color.Danger">@Localizer["RemoveItem"]</Button>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["RadioTitle"]" Introduction="@Localizer["RadioIntro"]" Name="Radio">
    <div class="row g-3">
        <div class="col-12">
            <RadioList TValue="SelectedItem" Items="@RadioItems" OnSelectedChanged="@OnRadioItemChanged">
            </RadioList>
        </div>
        <div class="col-12">
            <Dropdown TValue="string" Items="@RadioDropDownItems">
            </Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["CascadeTitle"]" Introduction="@Localizer["CascadeIntro"]" Name="Cascade">
    <div class="row g-3">
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="Items3" OnSelectedItemChanged="OnCascadeBindSelectClick"></Dropdown>
        </div>
        <div class="col-12 col-sm-6">
            <Dropdown TValue="string" Items="Items2"></Dropdown>
        </div>
    </div>
</DemoBlock>

<DemoBlock Title="@Localizer["IsFixedButtonTextTitle"]" Introduction="@Localizer["IsFixedButtonTextIntro"]" Name="IsFixedButtonText">
    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true"></Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["FixedButtonTextTitle"]" Introduction="@Localizer["FixedButtonTextIntro"]" Name="FixedButtonText">
    <Dropdown TValue="string" Items="RadioItems" IsFixedButtonText="true" FixedButtonText="@Localizer["City"]"></Dropdown>
</DemoBlock>

<DemoBlock Title="@Localizer["ButtonTemplateTitle"]" Introduction="@Localizer["ButtonTemplateIntro"]" Name="ButtonTemplate">
    <Dropdown TValue="string" Items="RadioItems">
        <ButtonTemplate>
            <i class="fa-solid fa-home"></i>
            <span>@context.Text</span>
        </ButtonTemplate>
    </Dropdown>
</DemoBlock>

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

<EventTable Items="@GetEvents()" />
