@page "/components/context-menu"

<PageTitle>Context Menu — Lumeo</PageTitle>

<PageHeader Title="Context Menu" Description="Displays a menu triggered by right-clicking an element." />

<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>Right-click actions on elements like files, cards, or table rows</li>
        <li>Custom context menus replacing the browser default for specific areas</li>
        <li>Element-specific operations such as copy, edit, delete, or move</li>
    </ul>
</div>

<Stack Gap="8" Class="mt-8">
    <ComponentDemo Title="Default" Code="@_defaultCode">
        <ContextMenu>
            <ContextMenuTrigger>
                <Flex Class="h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
                    Right click here
                </Flex>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuItem>Back</ContextMenuItem>
                <ContextMenuItem>Forward</ContextMenuItem>
                <ContextMenuItem>Reload</ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem>Save As...</ContextMenuItem>
                <ContextMenuItem>Print</ContextMenuItem>
            </ContextMenuContent>
        </ContextMenu>
    </ComponentDemo>

    <ComponentDemo Title="With Labels and Groups" Code="@_groupCode">
        <ContextMenu>
            <ContextMenuTrigger>
                <Flex Class="h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm text-muted-foreground">
                    Right click here
                </Flex>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuLabel>Edit</ContextMenuLabel>
                <ContextMenuGroup>
                    <ContextMenuItem>Cut</ContextMenuItem>
                    <ContextMenuItem>Copy</ContextMenuItem>
                    <ContextMenuItem>Paste</ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuLabel>View</ContextMenuLabel>
                <ContextMenuGroup>
                    <ContextMenuItem>Zoom In</ContextMenuItem>
                    <ContextMenuItem>Zoom Out</ContextMenuItem>
                    <ContextMenuItem>Reset Zoom</ContextMenuItem>
                </ContextMenuGroup>
                <ContextMenuSeparator />
                <ContextMenuItem Disabled="true">Delete</ContextMenuItem>
            </ContextMenuContent>
        </ContextMenu>
    </ComponentDemo>

    <ComponentDemo Title="File Actions" Code="@_fileCode">
        <ContextMenu>
            <ContextMenuTrigger>
                <Flex Align="center" Justify="center" Class="h-[150px] w-[300px] rounded-md border border-dashed">
                    <Stack Gap="0" Class="text-center">
                        <Lumeo.Text Size="sm" Weight="medium">document.pdf</Lumeo.Text>
                        <Lumeo.Text Size="xs" Color="muted" Class="mt-1">Right click for options</Lumeo.Text>
                    </Stack>
                </Flex>
            </ContextMenuTrigger>
            <ContextMenuContent>
                <ContextMenuItem>
                    <DynamicIcon Name="Eye" Class="mr-2 h-4 w-4" />
                    Open
                </ContextMenuItem>
                <ContextMenuItem>
                    <DynamicIcon Name="Copy" Class="mr-2 h-4 w-4" />
                    Duplicate
                </ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem>
                    <DynamicIcon Name="ArrowRight" Class="mr-2 h-4 w-4" />
                    Move to...
                </ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem>
                    <DynamicIcon Name="Star" Class="mr-2 h-4 w-4" />
                    Add to Favorites
                </ContextMenuItem>
                <ContextMenuSeparator />
                <ContextMenuItem>
                    <DynamicIcon Name="Trash" Class="mr-2 h-4 w-4" />
                    Delete
                </ContextMenuItem>
            </ContextMenuContent>
        </ContextMenu>
    </ComponentDemo>
</Stack>

<Alert Variant="Alert.AlertVariant.Info" ShowIcon="true" Class="mt-6">
    <strong>Mobile (rc.49).</strong> Context menus now open on a long-press (500 ms by default) on touch devices; use <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">LongPressMs</code> to adjust the delay and <code class="rounded bg-muted px-1.5 py-0.5 text-xs font-mono">MoveTolerancePx</code> (default 10) to set how far a finger may drift before the press is cancelled.
</Alert>

<div class="mt-16">
    <Heading Id="api-reference" Level="2" Class="scroll-mt-20">API Reference</Heading>

    <Heading Id="contextmenu" Level="3" Class="mt-8 scroll-mt-20">ContextMenu</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Trigger and content elements.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Open</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Controls whether the context menu is visible. Use with @@bind-Open.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the open state changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">LongPressMs</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">500</TableCell><TableCell>Duration in milliseconds a touch must be held before the menu opens (rc.49).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">MoveTolerancePx</TableCell><TableCell Class="font-mono text-xs">int</TableCell><TableCell Class="font-mono text-xs">10</TableCell><TableCell>How many CSS pixels a finger may drift during a long-press before it is cancelled (rc.49).</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsOpen</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Obsolete alias for Open; forwards to and from it.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">IsOpenChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Obsolete alias for OpenChanged; forwards to and from it.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenutrigger" Level="3" Class="mt-8 scroll-mt-20">ContextMenuTrigger</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>The right-clickable area content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenucontent" Level="3" Class="mt-8 scroll-mt-20">ContextMenuContent</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Menu items, labels, and separators.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenuitem" Level="3" Class="mt-8 scroll-mt-20">ContextMenuItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Item label content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">OnClick</TableCell><TableCell Class="font-mono text-xs">EventCallback</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when clicked. Closes the menu after execution.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Disabled</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Disables the menu item.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenucheckboxitem" Level="3" Class="mt-8 scroll-mt-20">ContextMenuCheckboxItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Checkbox item label content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Checked</TableCell><TableCell Class="font-mono text-xs">bool</TableCell><TableCell Class="font-mono text-xs">false</TableCell><TableCell>Whether the item is checked. Use with @@bind-Checked.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">CheckedChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;bool&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the checked state changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenuradiogroup" Level="3" Class="mt-8 scroll-mt-20">ContextMenuRadioGroup</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Radio items.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Currently selected value. Use with @@bind-Value.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">ValueChanged</TableCell><TableCell Class="font-mono text-xs">EventCallback&lt;string&gt;</TableCell><TableCell Class="font-mono text-xs">—</TableCell><TableCell>Callback invoked when the selected value changes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenuradioitem" Level="3" Class="mt-8 scroll-mt-20">ContextMenuRadioItem</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Radio item label content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Value</TableCell><TableCell Class="font-mono text-xs">string</TableCell><TableCell Class="font-mono text-xs">""</TableCell><TableCell>The value this radio item represents. Required.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenulabel" Level="3" Class="mt-8 scroll-mt-20">ContextMenuLabel</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Label text content.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenuseparator" Level="3" Class="mt-8 scroll-mt-20">ContextMenuSeparator</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>

    <Heading Id="contextmenugroup" Level="3" Class="mt-8 scroll-mt-20">ContextMenuGroup</Heading>
    <div class="overflow-x-auto mt-4">
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHead Class="w-[180px]">Prop</TableHead>
                    <TableHead Class="w-[180px]">Type</TableHead>
                    <TableHead Class="w-[120px]">Default</TableHead>
                    <TableHead>Description</TableHead>
                </TableRow>
            </TableHeader>
            <TableBody>
                <TableRow><TableCell Class="font-mono text-xs">ChildContent</TableCell><TableCell Class="font-mono text-xs">RenderFragment?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Group items.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">Class</TableCell><TableCell Class="font-mono text-xs">string?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional CSS classes.</TableCell></TableRow>
                <TableRow><TableCell Class="font-mono text-xs">AdditionalAttributes</TableCell><TableCell Class="font-mono text-xs">Dictionary&lt;string, object&gt;?</TableCell><TableCell Class="font-mono text-xs">null</TableCell><TableCell>Additional HTML attributes.</TableCell></TableRow>
            </TableBody>
        </Table>
    </div>
</div>

<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/dropdown-menu" class="text-primary hover:underline">DropdownMenu</a> — For action menus triggered by a click on a button or icon</li>
        <li><a href="/components/menubar" class="text-primary hover:underline">Menubar</a> — For persistent application menu bars with multiple dropdown menus</li>
        <li><a href="/components/popover" class="text-primary hover:underline">Popover</a> — For displaying arbitrary content in a floating panel on click</li>
    </ul>
</div>

@code {
    private string _defaultCode = @"<ContextMenu>
    <ContextMenuTrigger>
        <div class=""flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"">
            Right click here
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem>Back</ContextMenuItem>
        <ContextMenuItem>Forward</ContextMenuItem>
        <ContextMenuItem>Reload</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Save As...</ContextMenuItem>
        <ContextMenuItem>Print</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>";

    private string _groupCode = @"<ContextMenu>
    <ContextMenuTrigger>
        <div>Right click here</div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuLabel>Edit</ContextMenuLabel>
        <ContextMenuGroup>
            <ContextMenuItem>Cut</ContextMenuItem>
            <ContextMenuItem>Copy</ContextMenuItem>
            <ContextMenuItem>Paste</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuLabel>View</ContextMenuLabel>
        <ContextMenuGroup>
            <ContextMenuItem>Zoom In</ContextMenuItem>
            <ContextMenuItem>Zoom Out</ContextMenuItem>
        </ContextMenuGroup>
        <ContextMenuSeparator />
        <ContextMenuItem Disabled=""true"">Delete</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>";

    private string _fileCode = @"<ContextMenu>
    <ContextMenuTrigger>
        <div class=""flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed"">
            <div class=""text-center"">
                <div class=""text-sm font-medium"">document.pdf</div>
                <div class=""text-xs text-muted-foreground mt-1"">Right click for options</div>
            </div>
        </div>
    </ContextMenuTrigger>
    <ContextMenuContent>
        <ContextMenuItem>Open</ContextMenuItem>
        <ContextMenuItem>Duplicate</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Move to...</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Add to Favorites</ContextMenuItem>
        <ContextMenuSeparator />
        <ContextMenuItem>Delete</ContextMenuItem>
    </ContextMenuContent>
</ContextMenu>";
}
