@page "/components/toolbar"

<PageTitle>Toolbar — Lumeo</PageTitle>

<PageHeader Title="Toolbar" Description="A horizontal container for toolbar items — buttons, separators, spacers, and groups — with full accessibility." />

<div class="mt-10 space-y-3">
    <Heading Id="when-to-use" Level="2" Class="scroll-mt-20">When to Use</Heading>
    <ul class="list-disc list-inside space-y-1 text-muted-foreground text-sm">
        <li>Group related actions (bold, italic, underline) in a text editor or data grid.</li>
        <li>Provide contextual actions at the top of a panel or card.</li>
        <li>Build app-level toolbars with spatially separated groups of controls.</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Basic Toolbar" Code="@_basicCode">
        <Toolbar>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Bold" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Italic" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Underline" class="h-4 w-4" />
            </Button>
            <ToolbarSeparator />
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.AlignStartHorizontal" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.AlignCenterHorizontal" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.AlignEndHorizontal" class="h-4 w-4" />
            </Button>
        </Toolbar>
    </ComponentDemo>

    <ComponentDemo Title="With Spacer and Groups" Code="@_spacerCode">
        <Toolbar>
            <ToolbarGroup>
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                    <Blazicon Svg="Lucide.ChevronLeft" class="h-4 w-4" />
                </Button>
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                    <Blazicon Svg="Lucide.ChevronRight" class="h-4 w-4" />
                </Button>
            </ToolbarGroup>
            <ToolbarSeparator />
            <ToolbarGroup>
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                    <Blazicon Svg="Lucide.Bold" class="h-4 w-4" />
                </Button>
                <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                    <Blazicon Svg="Lucide.Italic" class="h-4 w-4" />
                </Button>
            </ToolbarGroup>
            <ToolbarSpacer />
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Settings" class="h-4 w-4" />
            </Button>
        </Toolbar>
    </ComponentDemo>

    <ComponentDemo Title="Overflow Menu" Code="@_overflowCode">
        <Toolbar Overflow="true" VisibleCount="3">
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Bold" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Italic" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Underline" class="h-4 w-4" />
            </Button>
            <ToolbarSeparator />
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.AlignStartHorizontal" class="h-4 w-4" />
            </Button>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.AlignCenterHorizontal" class="h-4 w-4" />
            </Button>
        </Toolbar>
    </ComponentDemo>

    <ComponentDemo Title="With Input" Code="@_inputCode">
        <Toolbar>
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.Search" class="h-4 w-4" />
            </Button>
            <Input Placeholder="Search..." Class="h-7 text-sm w-48" />
            <ToolbarSeparator />
            <Button Variant="Button.ButtonVariant.Ghost" Size="Button.ButtonSize.Sm">
                <Blazicon Svg="Lucide.ListFilter" class="h-4 w-4" />
            </Button>
            <ToolbarSpacer />
            <Button Size="Button.ButtonSize.Sm">Export</Button>
        </Toolbar>
    </ComponentDemo>
</Stack>

<!-- API Reference -->
<Stack Gap="6" Class="mt-12">
    <Heading Level="2">API Reference</Heading>

    <Stack Gap="8" Class="mt-8">
        <Stack>
            <Heading Level="3" Class="mb-3">Toolbar</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr><td class="p-3 font-mono text-xs text-primary">ChildContent</td><td class="p-3 font-mono text-xs text-muted-foreground">RenderFragment?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">The toolbar items (buttons, separators, spacers, groups, inputs).</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Overflow</td><td class="p-3 font-mono text-xs text-muted-foreground">bool</td><td class="p-3 font-mono text-xs text-muted-foreground">false</td><td class="p-3 text-muted-foreground">When true, enables overflow mode. Use VisibleCount to specify how many items stay inline.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">VisibleCount</td><td class="p-3 font-mono text-xs text-muted-foreground">int</td><td class="p-3 font-mono text-xs text-muted-foreground">-1</td><td class="p-3 text-muted-foreground">Number of leading items to show inline (Overflow=true). -1 shows all items.</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">OverflowLabel</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">aria-label for the "⋯" overflow button. Defaults to "More".</td></tr>
                        <tr><td class="p-3 font-mono text-xs text-primary">Class</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">Additional CSS classes appended to the toolbar container.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToolbarSeparator</Heading>
            <Stack Class="rounded-lg border border-border/40 overflow-x-auto">
                <table class="w-full min-w-[600px] text-sm">
                    <thead>
                        <tr class="border-b border-border/40 bg-muted/40">
                            <th class="text-left p-3 font-medium text-foreground">Property</th>
                            <th class="text-left p-3 font-medium text-foreground">Type</th>
                            <th class="text-left p-3 font-medium text-foreground">Default</th>
                            <th class="text-left p-3 font-medium text-foreground">Description</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-border/40">
                        <tr><td class="p-3 font-mono text-xs text-primary">Class</td><td class="p-3 font-mono text-xs text-muted-foreground">string?</td><td class="p-3 font-mono text-xs text-muted-foreground">null</td><td class="p-3 text-muted-foreground">A 1px vertical dividing rule between toolbar sections.</td></tr>
                    </tbody>
                </table>
            </Stack>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToolbarSpacer</Heading>
            <p class="text-sm text-muted-foreground">A <code>flex-1</code> spacer that pushes subsequent toolbar items to the far right. No additional props.</p>
        </Stack>

        <Stack>
            <Heading Level="3" Class="mb-3">ToolbarGroup</Heading>
            <p class="text-sm text-muted-foreground">Groups children with a tighter gap. Accepts <code>ChildContent</code> and <code>Class</code>. No additional props.</p>
        </Stack>
    </Stack>
</Stack>

<div class="mt-12">
    <Heading Id="related" Level="2" Class="scroll-mt-20">Related Components</Heading>
    <ul class="mt-4 space-y-2 text-sm">
        <li><a href="/components/app-bar" class="text-primary hover:underline">AppBar</a> — Full-width top application bar with start/center/end zones.</li>
        <li><a href="/components/button" class="text-primary hover:underline">Button</a> — The primary action component used within toolbars.</li>
        <li><a href="/components/toggle-group" class="text-primary hover:underline">ToggleGroup</a> — Use when toolbar buttons represent exclusive choices (alignment, etc.).</li>
    </ul>
</div>

@code {
    private string _basicCode = @"<Toolbar>
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">
        <Blazicon Svg=""Lucide.Bold"" class=""h-4 w-4"" />
    </Button>
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">
        <Blazicon Svg=""Lucide.Italic"" class=""h-4 w-4"" />
    </Button>
    <ToolbarSeparator />
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">
        <Blazicon Svg=""Lucide.AlignLeft"" class=""h-4 w-4"" />
    </Button>
</Toolbar>";

    private string _spacerCode = @"<Toolbar>
    <ToolbarGroup>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Undo</Button>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Redo</Button>
    </ToolbarGroup>
    <ToolbarSeparator />
    <ToolbarGroup>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Bold</Button>
        <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Italic</Button>
    </ToolbarGroup>
    <ToolbarSpacer />
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Settings</Button>
</Toolbar>";

    private string _inputCode = @"<Toolbar>
    <Input Placeholder=""Search..."" Class=""h-7 text-sm w-48"" />
    <ToolbarSeparator />
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Filter</Button>
    <ToolbarSpacer />
    <Button Size=""Button.ButtonSize.Sm"">Export</Button>
</Toolbar>";

    private string _overflowCode = @"<!-- VisibleCount=3: first 3 items inline, rest collapse into ⋯ menu -->
<Toolbar Overflow=""true"" VisibleCount=""3"">
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Bold</Button>
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Italic</Button>
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Underline</Button>
    <ToolbarSeparator />
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Left</Button>
    <Button Variant=""Button.ButtonVariant.Ghost"" Size=""Button.ButtonSize.Sm"">Center</Button>
</Toolbar>";
}
