Full-width table

@inject NavigationManager Navigation

@* A table that is the whole page. In Tinted, the default, the sidebar takes the page tint and the
   table sits on white with no card around it. *@
<AppShell>
    <AppHeader>
        <SidebarToggle />
        <AppBrand Href="@To(null)" Icon="Lucide.Zap" Label="Acme" />
        <Box Grow />
        <IconButton Icon="Lucide.Search" Label="Search" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral" />
        <Avatar Name="Ada Lovelace" />
    </AppHeader>

    <AppSidebar>
        <NavMenu>
            <NavItem Href='@To("overview")' Icon="Lucide.LayoutDashboard">Overview</NavItem>
            <NavItem Href="@To(null)" Icon="Lucide.ListChecks" Badge="57">Rules</NavItem>
            <NavItem Href='@To("guide")' Icon="Lucide.BookOpen">Guide</NavItem>
            <NavDivider />
            <NavLabel>Workspace</NavLabel>
            <NavItem Href='@To("settings")' Icon="Lucide.Settings">Settings</NavItem>
        </NavMenu>
    </AppSidebar>

    <AppMain>
        <Stack Gap="5" Padding="new() { Base = 4, Md = 8 }">
            <Row Gap="3" Align="Align.Center" Wrap>
                <Stack Gap="1" Grow>
                    <Heading Level="1" Size="TextSize.Xl2">Rules</Heading>
                    <TextBlock Size="TextSize.Sm" Color="Color.Muted">Every rule in this project, most recently changed first.</TextBlock>
                </Stack>
                <Button StartIcon="Lucide.Plus">New rule</Button>
            </Row>
            <Table Items="Rules" PageSize="6" InitialSort="-updated" Caption="Rules">
                <PropertyColumn Property="r => r.Name" Sortable />
                <TemplateColumn Title="Status" SortBy="r => r.Status" SortKey="status" Sortable>
                    <Badge Status="StatusOf(context.Status)" Dot>@context.Status</Badge>
                </TemplateColumn>
                <PropertyColumn Property="r => r.Owner" Sortable />
                <PropertyColumn Property="r => r.Updated" Format="MMM d" Sortable />
                <PropertyColumn Property="r => r.Hits" Title="Hits (7 days)" Format="N0" Sortable />
            </Table>
        </Stack>
    </AppMain>
</AppShell>

@code {
    // Links within this example: ?view= in its own address, so they stay here.
    private string To(string? page) => Navigation.GetUriWithQueryParameter("view", page);
}