@php
    $examples = [
        'A menu' => <<<'BLADE'
            <x-menu label="Share actions">
                <x-slot:trigger>
                    <x-button icon="more_vert" tooltip="More" />
                </x-slot:trigger>

                <x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
                <x-menu-item label="Download" icon="download" />
                <x-menu-item label="Rename" icon="edit" description="Change what recipients see" />
                <x-menu-separator />
                <x-menu-item label="Delete" icon="delete" />
            </x-menu>

            <x-menu label="Sort" position="bottom-end">
                <x-slot:trigger>
                    <x-button label="Sort" icon-right="arrow_drop_down" variant="outlined" />
                </x-slot:trigger>

                <x-menu-group label="Sort by">
                    <x-menu-item label="Newest" :selected="true" keep-open />
                    <x-menu-item label="Largest" :selected="false" keep-open />
                    <x-menu-item label="Expiring soon" :selected="false" keep-open />
                </x-menu-group>
                <x-menu-separator />
                <x-menu-item label="Reset" icon="restart_alt" disabled />
            </x-menu>

            <x-menu label="Vibrant" vibrant>
                <x-slot:trigger>
                    <x-button label="Vibrant" variant="tonal" color="tertiary" />
                </x-slot:trigger>

                <x-menu-item label="Upload files" icon="upload_file" />
                <x-menu-item label="Upload a folder" icon="drive_folder_upload" />
            </x-menu>
            BLADE,
        'Submenus' => <<<'BLADE'
            <x-menu label="Share actions">
                <x-slot:trigger>
                    <x-button label="Share" icon="share" variant="tonal" />
                </x-slot:trigger>

                <x-menu-item label="Copy link" icon="content_copy" shortcut="⌘C" />
                <x-menu-item label="Send to" icon="send" submenu>
                    <x-menu-item label="A person" icon="person" />
                    <x-menu-item label="A team" icon="group" />
                    <x-menu-item label="Somewhere else" icon="more_horiz" submenu>
                        <x-menu-item label="Slack" icon="chat" />
                        <x-menu-item label="Email" icon="mail" />
                    </x-menu-item>
                </x-menu-item>
                <x-menu-item label="Export as" icon="download" submenu>
                    <x-menu-item label="ZIP" icon="folder_zip" />
                    <x-menu-item label="PDF" icon="picture_as_pdf" />
                    <x-menu-item label="CSV" icon="table" disabled />
                </x-menu-item>
                <x-menu-separator />
                <x-menu-item label="Delete" icon="delete" />
            </x-menu>
            BLADE,
        'A bottom sheet on a phone, a menu from medium' => <<<'BLADE'
            <x-menu label="Photo actions" sheet-at-compact>
                <x-slot:trigger>
                    <x-button label="Photo" icon="photo" icon-right="arrow_drop_down" variant="outlined" />
                </x-slot:trigger>

                <x-menu-item label="Set as wallpaper" icon="wallpaper" description="Home and lock screen" />
                <x-menu-item label="Add to album" icon="photo_album" submenu>
                    <x-menu-item label="Holidays" icon="beach_access" />
                    <x-menu-item label="Family" icon="family_restroom" />
                    <x-menu-item label="Favourites" icon="favorite" />
                </x-menu-item>
                <x-menu-item label="Print" icon="print" shortcut="⌘P" />
                <x-menu-separator />
                <x-menu-item label="Delete" icon="delete" />
            </x-menu>
            BLADE,
        'Clusters: a gap, or a divider' => <<<'BLADE'
            <x-menu label="Grouped by a gap">
                <x-slot:trigger>
                    <x-button label="A gap" icon-right="arrow_drop_down" variant="outlined" />
                </x-slot:trigger>

                <x-menu-group gap>
                    <x-menu-item label="Cut" icon="content_cut" shortcut="⌘X" />
                    <x-menu-item label="Copy" icon="content_copy" shortcut="⌘C" />
                    <x-menu-item label="Paste" icon="content_paste" shortcut="⌘V" />
                </x-menu-group>

                <x-menu-group label="Then" gap>
                    <x-menu-item label="Rename" icon="edit" />
                    <x-menu-item label="Delete" icon="delete" />
                </x-menu-group>
            </x-menu>

            <x-menu label="Separated by a divider">
                <x-slot:trigger>
                    <x-button label="A divider" icon-right="arrow_drop_down" variant="outlined" />
                </x-slot:trigger>

                <x-menu-item label="Cut" icon="content_cut" shortcut="⌘X" />
                <x-menu-item label="Copy" icon="content_copy" shortcut="⌘C" />
                <x-menu-item label="Paste" icon="content_paste" shortcut="⌘V" />
                <x-menu-separator />
                <x-menu-item label="Rename" icon="edit" />
                <x-menu-item label="Delete" icon="delete" />
            </x-menu>
            BLADE,
        'A menu that filters as you type' => <<<'BLADE'
            <x-menu label="Assign to" filter="Find a person">
                <x-slot:trigger>
                    <x-button label="Assign to" icon="person_add" variant="tonal" />
                </x-slot:trigger>

                <x-menu-item label="Ada Lovelace" icon="person" description="Engineering" />
                <x-menu-item label="Grace Hopper" icon="person" description="Engineering" />
                <x-menu-item label="Katherine Johnson" icon="person" description="Research" />
                <x-menu-item label="Mary Jackson" icon="person" description="Research" />
                <x-menu-item label="Radia Perlman" icon="person" description="Networks" />
                <x-menu-item label="Barbara Liskov" icon="person" description="Networks" />
                <x-menu-separator />
                <x-menu-item label="Nobody, for now" icon="person_off" />
            </x-menu>
            BLADE,
        'Icons in their own colour' => <<<'BLADE'
            <x-menu label="New plan">
                <x-slot:trigger>
                    <x-button label="New plan" icon="add" variant="filled" />
                </x-slot:trigger>

                <x-menu-item label="Running" icon="directions_run" data-md-showcase-icon-color="tertiary" />
                <x-menu-item label="Cycling" icon="directions_bike" data-md-showcase-icon-color="secondary" />
                <x-menu-item label="Swimming" icon="pool" icon-class="md-ink-info" />
                <x-menu-item label="Rowing" icon="rowing" data-md-showcase-icon-color="tertiary" disabled />
            </x-menu>
            BLADE,
    ];
@endphp

<x-livewire-material::stack as="section" id="menus" gap="space300">
    <h2 class="md-visually-hidden">Menus</h2>

    <p class="md-type-body-md md-ink-variant">
        <code>&lt;x-menu&gt;</code> with <code>&lt;x-menu-item&gt;</code>, <code>&lt;x-menu-group&gt;</code> and <code>&lt;x-menu-separator&gt;</code>.
        Open one with the keyboard too: arrows, Home, End, a letter, Escape. A <code>submenu</code> item opens a second list beside it
        &mdash; Right to enter it, Left to come back. A <code>sheet-at-compact</code> menu opens the same items in a bottom sheet
        below 600px, where a submenu opens in place: narrow the window to see it.
    </p>

    @foreach ($examples as $title => $code)
        <x-showcase::example :$title :$code />
    @endforeach
</x-livewire-material::stack>