@page "/table/selection"
@inherits WebSiteModuleComponentBase
@inject IStringLocalizer<NavMenu> NavMenuLocalizer
@inject IStringLocalizer<TablesSelection> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo

<h3>@Localizer["TablesSelectionTitle"] - @NavMenuLocalizer["TableSelection"]</h3>
<h4>@((MarkupString)Localizer["TablesSelectionDescription"].Value)</h4>

<DemoBlock Title="@Localizer["TablesSelectionNormalTitle"]"
           Introduction="@Localizer["TablesSelectionNormalIntro"]"
           Name="Normal">
    <Table TItem="Foo" @bind-SelectedRows="SelectedItems" IsKeepSelectedRows="_isKeepSelectedRows"
           IsPagination="true" PageItemsSource="@PageItemsSource"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true"
           ShowToolbar="true" ShowDefaultButtons="false" OnQueryAsync="@OnQueryAsync">
        <TableToolbarBeforeTemplate>
            <div class="table-selection-info">
                <div class="me-2">@Localizer["TablesSelectionKeepInfo"]</div>
                <Switch @bind-Value="_isKeepSelectedRows" OnText="@Localizer["TablesSelectionKeepOnText"]" OffText="@Localizer["TablesSelectionKeepOffText"]" />
                <div class="ms-5">@Localizer["TablesSelectionCountText", SelectedItems.Count]</div>
            </div>
        </TableToolbarBeforeTemplate>
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>

    <section ignore>
        <Tips class="mt-3">
            <div>@((MarkupString)Localizer["TablesSelectionNormalTips"].Value)</div>
        </Tips>

        <p class="mt-3">@Localizer["TablesSelectionNormalSelectRow"]：</p>
        <ul class="ul-demo mb-3">
            @foreach (var item in SelectedItems)
            {
                <li>@item.Name</li>
            }
        </ul>

        <Button OnClick="OnClick" Color="Color.Primary">@Localizer["TablesSelectionNormalButtonText"]</Button>
    </section>
</DemoBlock>

<DemoBlock Title="@Localizer["TablesSelectionScrollTitle"]"
           Introduction="@Localizer["TablesSelectionScrollIntro"]"
           Name="Normal">
    <section ignore>
        <p>@((MarkupString)Localizer["TablesSelectionScrollDescription"].Value)</p>
        <Button OnClick="OnTriggerScroll" Color="Color.Primary">@Localizer["TablesSelectionScrollButtonText"]</Button>
    </section>
    <Table TItem="Foo" @bind-SelectedRows="_selectedScrollItems" Id="table-scroll-demo" Items="_scrollItems" Height="260"
           OnAfterRenderCallback="OnAfterRenderCallback"
           IsStriped="true" IsBordered="true" IsMultipleSelect="true" IsFixedHeader="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" Width="100" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>
