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

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

<RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.P" class="rz-pb-4">
    In this demo a <code>RadzenDataList</code> displays <strong>Orders</strong> as cards with employee photos and shipping info, using a standalone <code>RadzenPager</code> with <code>ShowPagingSummary="true"</code>, custom <code>PagingSummaryFormat</code>, <code>PageNumbersCount="5"</code> visible page numbers, and <code>PageChanged</code> event to load data for the selected page.
</RadzenText>

<RadzenExample ComponentName="Pager" Example="PagerConfig">
    <PagerConfig />
</RadzenExample>

<RadzenText Anchor="pager#pager-density" TextStyle="TextStyle.H5" TagName="TagName.H2" class="rz-pt-12">
    Pager Density
</RadzenText>
<RadzenText TextStyle="TextStyle.Body1" class="rz-mb-8">
    Use the <code>Density</code> property to change the size and density of the pager - <code>Density="Density.Compact"</code>.
</RadzenText>
<RadzenExample ComponentName="Pager" Example="PagerDensity">
    <PagerDensity />
</RadzenExample>

<RadzenText Anchor="pager#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 Pager component.
</RadzenText>

<KeyboardNavigationDataGrid Data="@shortcuts" />

@code {
    public List<KeyboardShortcut> shortcuts = new()
    {
        new KeyboardShortcut { Key = "Tab", Action = "Navigate to a Pager component." },
        new KeyboardShortcut { Key = "LeftArrow", Action = "Focus previous Pager page." },
        new KeyboardShortcut { Key = "RightArrow", Action = "Focus next Pager page." },
        new KeyboardShortcut { Key = "Enter or Space", Action = "Go to the focused Pager page." }
    };
}
