@page "/table"
@inject IStringLocalizer<NavMenu> NavMenuLocalizer
@inject IStringLocalizer<Tables> Localizer
@inject IStringLocalizer<Foo> FooLocalizer

<h3>@Localizer["TableBaseTitle"] - @NavMenuLocalizer["TableBase"]</h3>
<h4>@Localizer["TableBaseDescription"]</h4>

<Tips Color="Color.Success">
    <p>表格功能比较多，参数也非常多，示例更多，各个功能详细用法建议查看下方视频讲解 <b>鞠佬</b> 有专门的视频讲解</p>
    <ul class="ul-demo">
        <li>鞠佬 BootstrapBlazor Table 系列 <a href="https://space.bilibili.com/2060594/lists/4298264?type=season">[传送门]</a></li>
        <li>官网 组件讲解合集 <a href="https://space.bilibili.com/660853738/lists">[传送门]</a></li>
    </ul>
</Tips>

<Tips>
    <p>@((MarkupString)Localizer["TableBaseExplain1"].Value)</p>
    <p>@((MarkupString)Localizer["TableBaseExplain2"].Value)</p>
    <ul class="ul-demo">
        <li>@((MarkupString)Localizer["TableBaseTips1"].Value)</li>
        <li>@((MarkupString)Localizer["TableBaseTips2"].Value)</li>
        <li>@((MarkupString)Localizer["TableBaseTips3"].Value)</li>
    </ul>
    <p>@((MarkupString)Localizer["TableBaseTips4"].Value)</p>
</Tips>

<DemoBlock Title="@Localizer["TableBaseNormalTitle"]"
           Introduction="@Localizer["TableBaseNormalIntro"]"
           Name="Normal">
    <section ignore>
        <p>@((MarkupString)Localizer["TableBaseNormalDescription"].Value)</p>
        <Button Icon="fa-solid fa-arrows-rotate" Text="@RefreshText" OnClick="OnClick" />
    </section>
    <Table TItem="Foo" Items="@Items.Take(3)">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TableBaseStripedTitle"]"
           Introduction="@Localizer["TableBaseStripedIntro"]"
           Name="IsStriped">
    <Table TItem="Foo" Items="@Items.Take(3)" IsStriped="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TableBaseBorderedTitle"]"
           Introduction="@Localizer["TableBaseBorderedIntro"]"
           Name="IsBordered">
    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TableBaseSizeTitle"]"
           Introduction="@Localizer["TableBaseSizeIntro"]"
           Name="TableSize">
    <section ignore>
        <p>@((MarkupString)Localizer["TableBaseSizeDescription"].Value)</p>
        <div class="row g-3">
            <div class="col-12 col-sm-6">
                <Switch @bind-Value="@_isCompact" DisplayText="TableSize" />
            </div>
        </div>
    </section>
    <Table TItem="Foo" Items="@Items.Take(3)" IsBordered="true" IsStriped="true"
           TableSize="@(_isCompact ? TableSize.Compact : TableSize.Normal)" IsMultipleSelect="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" Filterable="true" Sortable="true" />
            <TableColumn @bind-Field="@context.Name" Filterable="true" />
            <TableColumn @bind-Field="@context.Address" Sortable="true" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TableBaseHeaderStyleTitle"]"
           Introduction="@Localizer["TableBaseHeaderStyleIntro"]"
           Name="HeaderStyle">
    <section ignore>
        <p>@((MarkupString)Localizer["TableBaseHeaderStyleDescription"].Value)</p>
        <div class="code-label mb-3"><code>Light</code> @Localizer["TableBaseHeaderStyleMode"]</div>
    </section>
    <Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Light" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>

    <section ignore class="code-label my-3"><code>Dark</code> @Localizer["TableBaseHeaderStyleMode"]</section>
    <Table TItem="Foo" Items="@Items.Take(3)" HeaderStyle="TableHeaderStyle.Dark" IsBordered="true">
        <TableColumns>
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Name" />
            <TableColumn @bind-Field="@context.Address" />
        </TableColumns>
    </Table>
</DemoBlock>

<AttributeTable Items="GetAttributes()" />

<MethodTable Items="GetMethods()" />

<AttributeTable Items="GetTableColumnAttributes()" Title="@Localizer["AttributeTitle"]" />
