@php
    $examples = [
        'Navigation bar' => <<<'BLADE'
            <x-stack gap="space300" style="width: 100%;">
                <x-stack gap="space100" style="max-width: 400px;">
                    <p class="md-type-label-lg md-ink-variant">Compact: icon over label</p>
                    <x-surface level="surface" corner="lg" outlined style="display: flex; flex-direction: column; height: 224px; overflow: hidden;">
                        <p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The page</p>
                        <x-navigation-bar>
                            <x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
                            <x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
                            <x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
                            <x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate :badge="true" badge-label="Needs attention" />
                        </x-navigation-bar>
                    </x-surface>
                </x-stack>

                <x-stack gap="space100" style="max-width: 800px;">
                    <p class="md-type-label-lg md-ink-variant">From 600px wide: icon beside label, centred</p>
                    <x-surface level="surface" corner="lg" outlined style="overflow-x: auto;">
                        <div style="display: flex; flex-direction: column; height: 224px; min-width: 600px;">
                            <p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The page</p>
                            <x-navigation-bar>
                                <x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
                                <x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
                                <x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
                                <x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate />
                            </x-navigation-bar>
                        </div>
                    </x-surface>
                </x-stack>

                <x-stack gap="space100" style="max-width: 400px;">
                    <p class="md-type-label-lg md-ink-variant">Hide on scroll: scroll the page down, then up</p>
                    <x-surface level="surface" corner="lg" outlined style="display: flex; flex-direction: column; height: 224px; overflow: hidden;">
                        <p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The bar follows the window's scrolling, not this box's: scroll the showcase down and it leaves, scroll up and it springs back. It stays while a snackbar or a bottom sheet is on screen.</p>
                        <x-navigation-bar hide-on-scroll>
                            <x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
                            <x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
                            <x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
                        </x-navigation-bar>
                    </x-surface>
                </x-stack>

                <x-stack gap="space100" style="max-width: 800px;">
                    <p class="md-type-label-lg md-ink-variant">Tall (80px): icon over label whatever the width</p>
                    <x-surface level="surface" corner="lg" outlined style="overflow-x: auto;">
                        <div style="display: flex; flex-direction: column; height: 224px; min-width: 600px;">
                            <p class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; padding: var(--md-sys-measurement-space200);">The page</p>
                            <x-navigation-bar tall>
                                <x-navigation-bar-item label="Shares" icon="folder_shared" link="#navigation" no-wire-navigate active />
                                <x-navigation-bar-item label="Upload" icon="upload" link="#navigation" no-wire-navigate />
                                <x-navigation-bar-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate badge="3" />
                                <x-navigation-bar-item label="Account" icon="account_circle" link="#navigation" no-wire-navigate />
                            </x-navigation-bar>
                        </div>
                    </x-surface>
                </x-stack>
            </x-stack>
            BLADE,
        'Collapsed, narrow (centred) and expanded rails' => <<<'BLADE'
            <x-row gap="space300" wrap align="start" style="width: 100%;">
                <x-surface corner="lg" outlined style="display: flex; height: 576px; overflow: hidden;">
                    <x-navigation-rail mode="collapsed" label="Collapsed example" divider>
                        <x-slot:header>
                            <x-fab label="Compose" icon="edit" />
                        </x-slot:header>

                        <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                        <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-section label="Labels">
                            <x-navigation-rail-item label="Travel" icon="flight" link="#navigation" no-wire-navigate :badge="true" badge-label="New" />
                            <x-navigation-rail-item label="Receipts" icon="receipt_long" link="#navigation" no-wire-navigate />
                        </x-navigation-rail-section>

                        <x-slot:footer>
                            <x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
                        </x-slot:footer>
                    </x-navigation-rail>
                </x-surface>

                <x-surface corner="lg" outlined style="display: flex; height: 576px; overflow: hidden;">
                    <x-navigation-rail mode="collapsed" width="narrow" align="center" label="Narrow example" divider>
                        <x-slot:header>
                            <x-fab label="Compose" icon="edit" />
                        </x-slot:header>

                        <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                        <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />

                        <x-slot:footer>
                            <x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
                        </x-slot:footer>
                    </x-navigation-rail>
                </x-surface>

                <x-surface corner="lg" outlined style="display: flex; height: 576px; overflow: hidden;">
                    <x-navigation-rail mode="expanded" label="Expanded example">
                        <x-slot:header>
                            <x-fab label="Compose" icon="edit" />
                        </x-slot:header>

                        <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                        <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
                        <x-navigation-rail-section label="Labels">
                            <x-navigation-rail-item label="Travel" icon="flight" link="#navigation" no-wire-navigate :badge="true" badge-label="New" />
                            <x-navigation-rail-item label="Receipts" icon="receipt_long" link="#navigation" no-wire-navigate />
                        </x-navigation-rail-section>

                        <x-slot:footer>
                            <x-navigation-rail-item label="Settings" icon="settings" link="#navigation" no-wire-navigate />
                        </x-slot:footer>
                    </x-navigation-rail>
                </x-surface>
            </x-row>
            BLADE,
        'Collapsible rail' => <<<'BLADE'
            <x-surface corner="lg" outlined style="display: flex; width: 100%; height: 480px; overflow: hidden;">
                <x-navigation-rail label="Collapsible example">
                    <x-slot:brand>
                        <span class="md-type-title-lg md-truncate" style="display: block;">Mail</span>
                    </x-slot:brand>

                    <x-slot:header>
                        <x-fab label="Compose" icon="edit" />
                    </x-slot:header>

                    <x-navigation-rail-item label="Inbox" icon="inbox" link="#navigation" no-wire-navigate active badge="12" />
                    <x-navigation-rail-item label="Starred" icon="star" link="#navigation" no-wire-navigate />
                    <x-navigation-rail-item label="Sent" icon="send" link="#navigation" no-wire-navigate />
                </x-navigation-rail>

                <x-surface level="surface-container-low" padding="space300" class="md-type-body-md md-ink-variant" style="flex: 1 1 auto; min-width: 0;">
                    The menu button collapses and expands the rail, and the FAB morphs into an extended FAB with it. The choice is remembered and applied before the next page paints — every collapsible rail follows it, <code>&lt;x-scaffold&gt;</code>'s from <code>expanded</code> (840px) too.
                </x-surface>
            </x-surface>
            BLADE,
        'Rail that hides when collapsed' => <<<'BLADE'
            <x-surface corner="lg" outlined style="display: flex; width: 100%; height: 480px; overflow: hidden;">
                <x-navigation-rail label="Immersive example" hide-when-collapsed>
                    <x-slot:brand>
                        <span class="md-type-title-lg md-truncate" style="display: block;">Studio</span>
                    </x-slot:brand>

                    <x-navigation-rail-item label="Canvas" icon="brush" link="#navigation" no-wire-navigate active />
                    <x-navigation-rail-item label="Layers" icon="layers" link="#navigation" no-wire-navigate />
                    <x-navigation-rail-item label="Exports" icon="download" link="#navigation" no-wire-navigate />
                </x-navigation-rail>

                <x-surface level="surface-container-low" padding="space300" style="flex: 1 1 auto; min-width: 0;">
                    <x-stack gap="space200" class="md-type-body-md md-ink-variant">
                        <p>M3's other expanded behaviour: collapsing this rail takes it out of the layout instead of narrowing it to 96px, so an immersive page gets the whole window. The only way back is a menu button of the application's own — its own button then docks it again.</p>
                        <x-button icon="menu" label="Open navigation" x-on:click="$store.rail.show()" />
                    </x-stack>
                </x-surface>
            </x-surface>
            BLADE,
    ];
@endphp

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

    <p class="md-type-body-md md-ink-variant">
        <code>&lt;x-navigation-bar&gt;</code> and <code>&lt;x-navigation-bar-item&gt;</code>, <code>&lt;x-navigation-rail&gt;</code>, <code>&lt;x-navigation-rail-item&gt;</code> and <code>&lt;x-navigation-rail-section&gt;</code>,
        and <code>&lt;x-scaffold&gt;</code>, which puts them together on M3's window size classes: a bar below <code>medium</code> (600px), a collapsed rail that opens as a modal through <code>medium</code>, a standard rail from <code>expanded</code> (840px) and an expanded one from <code>large</code> (1200px).
        <a href="{{ route('livewire-material.shell') }}" class="md-link md-ink-primary">Open the scaffold</a> and change the window's width.
    </p>

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