@page "/tree"
@page "/docs/guides/components/tree.html"

<RadzenText TextStyle="TextStyle.H2" TagName="TagName.H1" class="rz-pt-8">
    Tree
</RadzenText>
<RadzenText TextStyle="TextStyle.Subtitle1" TagName="TagName.P" class="rz-pb-4">
    Demonstration and configuration of the Radzen Blazor <strong>Tree</strong> component.
</RadzenText>

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo an inline-defined tree shows car brands (<strong>BMW</strong>, <strong>Audi</strong>, <strong>Mercedes</strong>) with their models (M3/M5, RS4/RS6, C63/S63 AMG), using custom <code>Template</code> to display brand logos and bold text, with <code>Expand</code>, <code>Collapse</code>, and <code>Change</code> events logged to console.
</RadzenText>

<RadzenExample ComponentName="Tree" Example="TreeConfig">
    <TreeConfig />
</RadzenExample>

<RadzenText Anchor="tree#keyboard-navigation" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Keyboard Navigation
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor Tree component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Tree component." },
        new KeyboardShortcut { Key = "UpArrow", Action = "Select previous hierarchical Tree item." },
        new KeyboardShortcut { Key = "DownArrow", Action = "Select next hierarchical Tree item." },
        new KeyboardShortcut { Key = "RightArrow", Action = "Expands selected Tree item." },
        new KeyboardShortcut { Key = "LeftArrow", Action = "Collapse selected Tree item." },
        new KeyboardShortcut { Key = "Enter or Space", Action = "Check/uncheck selected Tree item if CheckBox is available." }
    };
}