Asides

@inject NavigationManager Navigation

@* A list with the chosen row's details beside it. The page writes its own AppAside, which takes the
   shell's aside column; the rule and the panel's tab are in the address (?rule=, ?tab=), so every
   link works with JavaScript off. Below 768px the panel goes under the list (SmallScreen Below). *@
<AppShell>
    <AppHeader>
        <AppBrand Href="@To(null, null)" Icon="Lucide.ListChecks" Label="Acme Rules" />
        <Box Grow />
        <Avatar Name="Grace Hopper" />
    </AppHeader>

    <AppMain>
        <Stack Gap="4" Padding="new() { Base = 4, Md = 6 }">
            <Heading Level="1" Size="TextSize.Xl2">Rules</Heading>
            <Table Items="Rules" Caption="Rules" RowHref="r => To(r == Rules[0] ? null : r.Id, null)" RowLabel="r => r.Name" RowCurrent="r => r == Shown">
                <PropertyColumn Property="r => r.Name" />
                <TemplateColumn Title="Status">
                    <Badge Status="StatusOf(context.Status)" Dot>@context.Status</Badge>
                </TemplateColumn>
            </Table>
        </Stack>

        <AppAside Width="Length.Rem(20)" Breakpoint="Breakpoint.Md" SmallScreen="AsideSmallScreen.Below" Label="Rule" Padding="new() { Base = 4, Md = 5 }">
            <Stack Gap="4">
                <Stack Gap="1">
                    <Heading Level="2" Size="TextSize.Lg">@Shown.Name</Heading>
                    <Badge Status="StatusOf(Shown.Status)" Dot>@Shown.Status</Badge>
                </Stack>
                <Tabs Label="Rule" Size="ControlSize.Sm">
                    <TabLink Href="@To(ShownKey, null)" Label="Details" />
                    <TabLink Href='@To(ShownKey, "activity")' Label="Activity" />
                </Tabs>
                @if (Tab == "activity")
                {
                    <Stack Gap="3">
                        @foreach (var (when, what) in Activity)
                        {
                            <Stack Gap="0">
                                <TextBlock Size="TextSize.Sm">@what</TextBlock>
                                <TextBlock Size="TextSize.Xs" Color="Color.Muted">@when</TextBlock>
                            </Stack>
                        }
                    </Stack>
                }
                else
                {
                    <DescriptionList>
                        <DescriptionItem Term="Owner">@Shown.Owner</DescriptionItem>
                        <DescriptionItem Term="Hits (7 days)">@Shown.Hits.ToString("N0")</DescriptionItem>
                        <DescriptionItem Term="When">@Shown.When</DescriptionItem>
                    </DescriptionList>
                }
            </Stack>
        </AppAside>
    </AppMain>
</AppShell>

@code {
    [SupplyParameterFromQuery(Name = "rule")] private string? RuleKey { get; set; }
    [SupplyParameterFromQuery(Name = "tab")] private string? Tab { get; set; }

    private Rule Shown => Rules.FirstOrDefault(r => r.Id == RuleKey) ?? Rules[0];

    // The first rule is shown when none is chosen, and its links leave ?rule= out.
    private string? ShownKey => Shown == Rules[0] ? null : Shown.Id;

    // Links within this example: ?rule= and ?tab= in its own address, so they stay here.
    private string To(string? rule, string? tab) => Navigation.GetUriWithQueryParameters(new Dictionary<string, object?>
    {
        ["rule"] = rule,
        ["tab"] = tab,
    });
}

@inject NavigationManager Navigation

@* A panel people open when they want it. From 768px it's a column beside the page; below, it's a
   drawer from the end side, opened by the AsideToggle in the header (shown only then) and closed by
   its close button, a tap beside it or Escape. *@
<AppShell>
    <AppHeader>
        <AppBrand Href="@Navigation.GetUriWithQueryParameter("view", (string?)null)" Icon="Lucide.FileText" Label="Acme Docs" />
        <Box Grow />
        <AsideToggle Label="Show comments" />
    </AppHeader>

    <AppMain>
        <Stack Gap="4" Padding="new() { Base = 4, Md = 8 }">
            <Heading Level="1" Size="TextSize.Xl2">Refund policy</Heading>
            <TextBlock>Refunds over $500 are held for review by the payments team, who approve or decline them within one working day.</TextBlock>
            <TextBlock>A customer can ask for a refund up to 60 days after the order. After that, the order's owner decides.</TextBlock>
            <TextBlock>Gift cards aren't refunded; their balance stays on the card.</TextBlock>
        </Stack>
    </AppMain>

    <AppAside Width="Length.Rem(20)" Breakpoint="Breakpoint.Md" SmallScreen="AsideSmallScreen.Drawer" Label="Comments">
        <Stack Gap="4">
            <Heading Level="2" Size="TextSize.Md">Comments</Heading>
            @foreach (var (who, what) in Comments)
            {
                <Row Gap="3" Align="Align.Start">
                    <Avatar Name="@who" Size="AvatarSize.Sm" />
                    <Stack Gap="0">
                        <TextBlock Size="TextSize.Sm" Weight="FontWeight.Semibold">@who</TextBlock>
                        <TextBlock Size="TextSize.Sm" Color="Color.Muted">@what</TextBlock>
                    </Stack>
                </Row>
            }
        </Stack>
    </AppAside>
</AppShell>