Accordion

<Stack Gap="6" Grow>
    @foreach (var variant in Enum.GetValues<AccordionVariant>())
    {
        <Stack Gap="2">
            <TextBlock Size="TextSize.Sm" Color="Color.Muted">@variant</TextBlock>
            <Accordion Variant="variant">
                <AccordionItem Title="How do refunds work?" Icon="Lucide.CreditCard">
                    Refunds go back to the original card within 5 business days.
                </AccordionItem>
                <AccordionItem Title="Can I change my plan later?">
                    Yes. Changes apply from your next billing date.
                </AccordionItem>
            </Accordion>
        </Stack>
    }
</Stack>

<Accordion Exclusive Variant="AccordionVariant.Bordered" Grow>
    <AccordionItem Title="Shipping" Open>Orders ship within two business days.</AccordionItem>
    <AccordionItem Title="Returns">Return anything within 30 days, in its original box.</AccordionItem>
    <AccordionItem Title="Warranty">Two years on all hardware, parts and labor.</AccordionItem>
    <AccordionItem Title="Gift cards" Disabled>Coming soon.</AccordionItem>
</Accordion>

<Accordion Variant="AccordionVariant.Bordered" Grow>
    <AccordionItem Open>
        <AccordionHeader>Getting started <Badge Status="Status.Info" Pill>2 steps left</Badge></AccordionHeader>
        <TextBlock>Create a project, then invite your team.</TextBlock>
        <TextBlock Size="TextSize.Sm" Color="Color.Muted">You can change these settings later.</TextBlock>
        <Row Gap="2">
            <Button Size="ControlSize.Sm">Create project</Button>
            <Button Size="ControlSize.Sm" Variant="ButtonVariant.Ghost" Accent="Accent.Neutral">Read the guide</Button>
        </Row>
    </AccordionItem>
    <AccordionItem Title="Usage this month">
        <DescriptionList Divided>
            <DescriptionItem Term="Builds">132 of 500</DescriptionItem>
            <DescriptionItem Term="Storage">4.1 GB of 10 GB</DescriptionItem>
        </DescriptionList>
    </AccordionItem>
</Accordion>

<Grid Columns="new() { Base = 1, Md = 2 }" Gap="6" Align="Align.Start" Grow>
    <Accordion Size="ControlSize.Sm" Variant="AccordionVariant.Bordered">
        <AccordionItem Title="Billing" Icon="Lucide.CreditCard" Open>Invoices go out on the 1st of the month.</AccordionItem>
        <AccordionItem Title="Security" Icon="Lucide.Shield">Two-factor sign-in is on.</AccordionItem>
    </Accordion>
    <Accordion Size="ControlSize.Lg" Variant="AccordionVariant.Bordered">
        <AccordionItem Title="Billing" Icon="Lucide.CreditCard" Open>Invoices go out on the 1st of the month.</AccordionItem>
        <AccordionItem Title="Security" Icon="Lucide.Shield">Two-factor sign-in is on.</AccordionItem>
    </Accordion>
</Grid>

@using System.ComponentModel.DataAnnotations

@* Each section's form posts on its own. A static page renders the accordion again with every
   post, so the section that posted, saved or not, is opened from the server with Open. *@
<Accordion Variant="AccordionVariant.Bordered" Grow MaxWidth="32.Rem">
    <AccordionItem Title="Profile" Open="_posted.Contains(Section.Profile)">
        <Form Model="Profile" FormName="accordion-profile" OnValidSubmit="() => Saved(Section.Profile)" OnInvalidSubmit="() => _posted.Add(Section.Profile)">
            <TextField @bind-Value="Profile!.DisplayName" />
            <FormActions><Button Submit Size="ControlSize.Sm">Save profile</Button></FormActions>
        </Form>
    </AccordionItem>
    <AccordionItem Title="Notifications" Open="_posted.Contains(Section.Notifications)">
        <Form Model="Notifications" FormName="accordion-notifications" OnValidSubmit="() => Saved(Section.Notifications)" OnInvalidSubmit="() => _posted.Add(Section.Notifications)">
            <Switch @bind-Value="Notifications!.WeeklySummary" />
            <FormActions><Button Submit Size="ControlSize.Sm">Save notifications</Button></FormActions>
        </Form>
    </AccordionItem>
</Accordion>
@if (_saved is not null)
{
    <TextBlock Size="TextSize.Sm" Color="Color.Muted" MarginTop="3">@_saved</TextBlock>
}

@code {
    [SupplyParameterFromForm(FormName = "accordion-profile")]
    private ProfileSettings? Profile { get; set; }

    [SupplyParameterFromForm(FormName = "accordion-notifications")]
    private NotificationSettings? Notifications { get; set; }

    // Sections that have posted. Only ever added to, so on an interactive page Open never turns
    // false and closes a section the reader left open.
    private readonly HashSet<Section> _posted = [];
    private string? _saved;

    protected override void OnInitialized()
    {
        Profile ??= new();
        Notifications ??= new();
    }

    private void Saved(Section section)
    {
        _posted.Add(section);
        _saved = section == Section.Profile
            ? $"Saved your name as {Profile!.DisplayName}."
            : $"Saved: {(Notifications!.WeeklySummary ? "with" : "without")} the weekly summary.";
    }
}

@* The item opens and closes in every mode; on an interactive page C# follows it. *@
<Stack Gap="3" Grow>
    <Accordion>
        <AccordionItem Title="Release notes" @bind-Open="_notesOpen">
            Version 2.4 adds dark mode to the dashboard and speeds up search.
        </AccordionItem>
    </Accordion>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted">C# has it <Code>@(_notesOpen ? "open" : "closed")</Code></TextBlock>
</Stack>

@code {
    private bool _notesOpen;
}