@page "/table/tree"
@inherits BootstrapComponentBase
@inject IStringLocalizer<NavMenu> NavMenuLocalizer
@inject IStringLocalizer<Tables> BaseLocalizer
@inject IStringLocalizer<TablesTree> Localizer
@inject IStringLocalizer<Foo> LocalizerFoo
@inject ICacheManager CacheManager

<h3>@BaseLocalizer["TableBaseTitle"] - @NavMenuLocalizer["TableTree"]</h3>
<h4>@Localizer["TablesTreeDescription"]</h4>

<Tips class="mt-3">
    <div>@((MarkupString)Localizer["TablesTreeTip_title"].Value)</div>
    <ul class="ul-demo mt-3">
        <li>@((MarkupString)Localizer["TablesTreeTip_note1"].Value)</li>
        <li>@((MarkupString)Localizer["TablesTreeTip_note2"].Value)</li>
        <li>@((MarkupString)Localizer["TablesTreeTip_note3"].Value)</li>
        <li>@((MarkupString)Localizer["TablesTreeTip_note4"].Value)</li>
    </ul>
</Tips>

<p>@((MarkupString)Localizer["TablesTreeStep1"].Value)</p>
<p>@((MarkupString)Localizer["TablesTreeStep2"].Value)</p>
<p>@((MarkupString)Localizer["TablesTreeStep3"].Value)</p>
<p>@((MarkupString)Localizer["TablesTreeStep4"].Value)</p>

<DemoBlock Title="@Localizer["TablesTreeDataTitle"]"
           Introduction="@Localizer["TablesTreeDataIntro"]"
           Name="TreeData">
    <Table TItem="TreeFoo" IsBordered="true" IsStriped="true"
           Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TablesTreeLevelTitle"]"
           Introduction="@Localizer["TablesTreeLevelIntro"]"
           Name="Level">
    <section ignore>
        <Tips>
            <div>@((MarkupString)Localizer["TablesTreeLevelTips1"].Value)</div>
        </Tips>
        <p>@((MarkupString)Localizer["TablesTreeLevelTips2"].Value)</p>
    </section>
    <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" IndentSize="8"
           Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TablesTreeEditTitle"]"
           Introduction="@Localizer["TablesTreeEditIntro"]"
           Name="EditTree">
    <Table TItem="TreeFoo" IsBordered="true"
           ShowToolbar="true" ShowExtendButtons="true" ShowSkeleton="true" IsStriped="true"
           OnQueryAsync="@OnQueryAsync" OnAddAsync="@OnAddAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync"
           IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Id" />
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>

<DemoBlock Title="@Localizer["TablesTreeIconTitle"]"
           Introduction="@Localizer["TablesTreeIconIntro"]"
           Name="Icon">
    <section ignore>
        <Tips>
            <div>@((MarkupString)Localizer["TablesTreeIconTips1"].Value)</div>
        </Tips>
        <p>@((MarkupString)Localizer["TablesTreeIconTips2"].Value)</p>
    </section>
    <Table TItem="TreeFoo" IsBordered="true" IsStriped="true" TreeIcon="fa-solid fa-circle-chevron-right" TreeExpandIcon="fa-solid fa-circle-chevron-right fa-rotate-90"
           Items="@TreeItems" IsTree="true" TreeNodeConverter="@TreeNodeConverter" OnTreeExpand="@OnTreeExpand">
        <TableColumns>
            <TableColumn @bind-Field="@context.Name" Width="360" />
            <TableColumn @bind-Field="@context.DateTime" Width="180" />
            <TableColumn @bind-Field="@context.Address" />
            <TableColumn @bind-Field="@context.Count" />
        </TableColumns>
    </Table>
</DemoBlock>
