@php
    $examples = [
        'Multi-browse' => <<<'BLADE'
            <x-carousel label="Shapes" item-width="220">
                @foreach ([
                    ['Cookie', 'cookie-9', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
                    ['Clover', 'clover-4', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
                    ['Burst', 'soft-burst', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
                    ['Flower', 'flower', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
                    ['Gem', 'gem', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
                    ['Puffy', 'puffy', 'background-color: var(--md-sys-color-tertiary); color: var(--md-sys-color-on-tertiary);'],
                    ['Sunny', 'sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
                    ['Heart', 'heart', 'background-color: var(--md-sys-color-inverse-surface); color: var(--md-sys-color-inverse-primary);'],
                ] as [$name, $shape, $colours])
                    <x-carousel-item :label="$name">
                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
                            <x-shape :name="$shape" size="144" />
                        </div>
                    </x-carousel-item>
                @endforeach
            </x-carousel>
            BLADE,
        'Hero, centred' => <<<'BLADE'
            <x-carousel layout="hero" centered label="Featured" height="280">
                @foreach ([
                    ['Arch', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
                    ['Pentagon', 'pentagon', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
                    ['Boom', 'soft-boom', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
                    ['Bun', 'bun', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-secondary);'],
                    ['Ghost', 'ghostish', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
                ] as [$name, $shape, $colours])
                    <x-carousel-item :label="$name">
                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
                            <x-shape :name="$shape" size="192" />
                        </div>
                    </x-carousel-item>
                @endforeach
            </x-carousel>
            BLADE,
        'Uncontained' => <<<'BLADE'
            <x-carousel layout="uncontained" label="Albums" item-width="180" height="180">
                @foreach ([
                    ['cookie-6', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
                    ['diamond', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
                    ['clover-8', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
                    ['pixel-circle', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-tertiary);'],
                    ['burst', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
                    ['oval', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
                ] as [$shape, $colours])
                    <x-carousel-item>
                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
                            <x-shape :name="$shape" size="96" />
                        </div>
                    </x-carousel-item>
                @endforeach
            </x-carousel>
            BLADE,
        'Uncontained, multi-aspect ratio: every item keeps its own shape' => <<<'BLADE'
            <x-carousel layout="multi-aspect" label="Clips" height="200">
                @foreach ([
                    ['16/9', 'pill', 'background-color: var(--md-sys-color-primary-container); color: var(--md-sys-color-on-primary-container);'],
                    ['1/1', 'cookie-12', 'background-color: var(--md-sys-color-tertiary-container); color: var(--md-sys-color-on-tertiary-container);'],
                    ['9/16', 'arch', 'background-color: var(--md-sys-color-secondary-container); color: var(--md-sys-color-on-secondary-container);'],
                    ['4/3', 'slanted', 'background-color: var(--md-sys-color-surface-container-highest); color: var(--md-sys-color-primary);'],
                    ['3/4', 'bun', 'background-color: var(--md-sys-color-primary); color: var(--md-sys-color-on-primary);'],
                    ['16/9', 'very-sunny', 'background-color: var(--md-sys-color-secondary); color: var(--md-sys-color-on-secondary);'],
                ] as [$aspect, $shape, $colours])
                    <x-carousel-item :aspect="$aspect" :label="$aspect">
                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
                            <x-shape :name="$shape" size="80" />
                        </div>
                    </x-carousel-item>
                @endforeach
            </x-carousel>
            BLADE,
        'Full-screen: one item at a time, scrolled down' => <<<'BLADE'
            <x-carousel layout="full-screen" label="Wallpapers" height="320" :controls="true">
                @foreach ([
                    ['Morning', 'very-sunny', 'background: linear-gradient(to bottom right, var(--md-sys-color-primary-container), var(--md-sys-color-tertiary-container)); color: var(--md-sys-color-on-primary-container);'],
                    ['Noon', 'clam-shell', 'background: linear-gradient(to bottom right, var(--md-sys-color-secondary-container), var(--md-sys-color-primary-container)); color: var(--md-sys-color-on-secondary-container);'],
                    ['Night', 'puffy-diamond', 'background: linear-gradient(to bottom right, var(--md-sys-color-inverse-surface), var(--md-sys-color-primary)); color: var(--md-sys-color-inverse-primary);'],
                ] as [$name, $shape, $colours])
                    <x-carousel-item :label="$name">
                        <div data-md-showcase-carousel-swatch style="{{ $colours }}">
                            <x-shape :name="$shape" size="160" />
                        </div>
                    </x-carousel-item>
                @endforeach
            </x-carousel>
            BLADE,
    ];
@endphp

<x-livewire-material::stack as="section" id="carousel" gap="space300">
    <h2 class="md-type-headline-md">Carousel</h2>

    <p class="md-type-body-md md-ink-variant">
        <code>&lt;x-carousel&gt;</code> and <code>&lt;x-carousel-item&gt;</code>: items that change size between M3's keylines as they scroll.
        Swipe, scroll with Shift and the wheel, or tab to an item and use the arrow keys.
    </p>

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