{{-- M3's window size classes, live: the one this window is in, what each one changes, and the
     variants that key on them. The five cards light up through the variants themselves, so the
     page proves the compiled breakpoints rather than describing them.

     Then the layout components, and an example of each canonical layout — list-detail, supporting
     pane, feed — written as an application writes them, with the layout components and the md-*
     text classes and no Tailwind. Resize the window to watch each one change at its breakpoints. --}}

@php
    $examples = [
        'List-detail' => <<<'BLADE'
            <x-surface level="surface" corner="lg" outlined x-data="{ message: null }" style="overflow: clip">
                <x-list-detail x-model="message">
                    <x-slot:list>
                        <x-pane title="Inbox" heading="h3" :sticky="false">
                            <x-list label="Messages">
                                <x-list-item title="Anna Müller" description="The photos from Saturday" avatar="AM" link="#example-list-detail" no-wire-navigate x-on:click.prevent="selected = 1" x-bind:aria-current="selected === 1 ? 'true' : null" />
                                <x-list-item title="Ben Keller" description="Contract, second draft" avatar="BK" link="#example-list-detail" no-wire-navigate x-on:click.prevent="selected = 2" x-bind:aria-current="selected === 2 ? 'true' : null" />
                                <x-list-item title="Chiara Rossi" description="Train times for Friday" avatar="CR" link="#example-list-detail" no-wire-navigate x-on:click.prevent="selected = 3" x-bind:aria-current="selected === 3 ? 'true' : null" />
                            </x-list>
                        </x-pane>
                    </x-slot:list>

                    <x-slot:detail>
                        <x-pane heading="h3" back :sticky="false">
                            <x-stack gap="space200">
                                <p class="md-type-body-lg md-ink-variant" x-show="! selected">Select a message to read it.</p>
                                <p class="md-type-headline-sm" x-show="selected" x-text="{ 1: 'The photos from Saturday', 2: 'Contract, second draft', 3: 'Train times for Friday' }[selected]"></p>
                                <p class="md-type-body-lg" x-show="selected">Below 840px the list gives way to this message, with a back button that returns you — and your focus — to the list. From 840px both panes show, the list 360px wide and 412px from 1200px.</p>
                            </x-stack>
                        </x-pane>
                    </x-slot:detail>
                </x-list-detail>
            </x-surface>
            BLADE,
        'Supporting pane' => <<<'BLADE'
            <x-supporting-pane label="Comments" compact="sheet">
                <x-slot:main>
                    <x-surface level="surface" corner="lg" style="overflow: clip">
                        <x-pane title="Trip proposal" subtitle="Draft · edited today" heading="h3" :sticky="false">
                            <x-stack gap="space200" style="padding-block-end: var(--md-sys-measurement-space300)">
                                <p class="md-type-body-lg">Three days by the lake in June: the train on Friday morning, two nights at the harbour, and a walk round the old town on Sunday before the train home.</p>
                                <p class="md-type-body-lg">From 840px the comments sit beside the proposal, 360px wide (412px from 1200px). Below it they are a bottom sheet docked to the window: press its handle to read them.</p>
                            </x-stack>
                        </x-pane>
                    </x-surface>
                </x-slot:main>

                <x-slot:supporting>
                    <x-surface level="surface-container-low" corner="lg" padding="space200">
                        <x-list label="Comments">
                            <x-list-item title="Anna Müller" description="Friday works for me." avatar="AM" />
                            <x-list-item title="Ben Keller" description="Can we stay a third night?" avatar="BK" />
                        </x-list>
                    </x-surface>
                </x-slot:supporting>
            </x-supporting-pane>
            BLADE,
        'Feed' => <<<'BLADE'
            <x-feed min-item="220px">
                <x-card title="Harbour at dawn" subtitle="12 photos" variant="outlined">The boats before the ferry.</x-card>
                <x-card title="Old town" subtitle="31 photos" variant="outlined">Every lane, twice.</x-card>
                <x-card title="Lake swim" subtitle="4 videos" variant="outlined">Colder than it looks.</x-card>
                <x-card title="Market" subtitle="18 photos" variant="outlined">Cheese, mostly.</x-card>
                <x-card title="The long walk" subtitle="9 photos" variant="outlined">Up to the ridge and back.</x-card>
                <x-card title="Train home" subtitle="3 photos" variant="outlined">Asleep by the second stop.</x-card>
            </x-feed>
            BLADE,
        'Surfaces, stacks, rows and grids' => <<<'BLADE'
            <x-stack gap="space300">
                <x-grid :columns="['compact' => 1, 'medium' => 2, 'expanded' => 4]" gap="space200">
                    <x-surface level="surface-container-lowest" padding="space200" corner="md" outlined><p class="md-type-label-lg">lowest, outlined</p></x-surface>
                    <x-surface level="surface-container-low" padding="space200" corner="md"><p class="md-type-label-lg">low</p></x-surface>
                    <x-surface level="surface-container-high" padding="space200" corner="md"><p class="md-type-label-lg">high</p></x-surface>
                    <x-surface level="surface-container-highest" padding="space200" corner="md"><p class="md-type-label-lg">highest</p></x-surface>
                </x-grid>

                <x-row gap="space200" justify="between" stack-below="medium">
                    <x-stack gap="space50">
                        <p class="md-type-title-md">A row that stacks below 600px</p>
                        <p class="md-type-body-md md-ink-variant">Its middle item is hidden from 840px.</p>
                    </x-stack>
                    <x-stack hide-from="expanded"><p class="md-type-body-sm md-ink-variant">Widen the window past 840px and this goes.</p></x-stack>
                    <x-button label="Save" variant="filled" />
                </x-row>
            </x-stack>
            BLADE,
    ];
@endphp

<section id="layout" class="scroll-mt-24 space-y-6">
    <h2 class="type-headline-md">Layout</h2>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        Widths are M3's window size classes and nothing else: compact below 600px, then <code>medium:</code> 600,
        <code>expanded:</code> 840, <code>large:</code> 1200 and <code>extra-large:</code> 1600, with
        <code>max-medium:</code> and friends for "below". Tailwind's <code>sm:</code>…<code>2xl:</code> compile to
        nothing. Scripts read the same numbers from <code>resources/js/breakpoints.js</code>.
    </p>

    <div
        x-data="{ width: window.innerWidth }"
        x-on:resize.window="width = window.innerWidth"
        class="flex flex-wrap items-baseline gap-x-4 gap-y-1 rounded-corner-lg bg-surface-container-low p-6"
        data-test="window-class"
    >
        <span class="type-label-lg text-on-surface-variant">This window</span>
        <span class="type-emphasized-headline-sm tabular-nums" x-text="width + 'px'"></span>
        <span class="type-title-md" x-text="width < 600 ? 'compact' : width < 840 ? 'medium' : width < 1200 ? 'expanded' : width < 1600 ? 'large' : 'extra-large'"></span>
    </div>

    <div class="grid gap-3 medium:grid-cols-5">
        <div class="rounded-corner-md bg-surface-container p-4 max-medium:bg-primary-container max-medium:text-on-primary-container">
            <p class="type-title-sm">Compact</p>
            <p class="type-body-sm">below 600px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 medium:max-expanded:bg-primary-container medium:max-expanded:text-on-primary-container">
            <p class="type-title-sm">Medium</p>
            <p class="type-body-sm">600–839px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 expanded:max-large:bg-primary-container expanded:max-large:text-on-primary-container">
            <p class="type-title-sm">Expanded</p>
            <p class="type-body-sm">840–1199px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 large:max-extra-large:bg-primary-container large:max-extra-large:text-on-primary-container">
            <p class="type-title-sm">Large</p>
            <p class="type-body-sm">1200–1599px</p>
        </div>
        <div class="rounded-corner-md bg-surface-container p-4 extra-large:bg-primary-container extra-large:text-on-primary-container">
            <p class="type-title-sm">Extra-large</p>
            <p class="type-body-sm">from 1600px</p>
        </div>
    </div>

    <div class="overflow-x-auto rounded-corner-lg border border-structure">
        <table class="w-full type-body-md" data-md-table>
            <thead>
                <tr>
                    <th class="text-start">Class</th>
                    <th class="text-start">Navigation</th>
                    <th class="text-start">Panes</th>
                    <th class="text-start">Dialogs and sheets</th>
                    <th class="text-start">Margin</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Compact</td>
                    <td>Navigation bar; the rail opens as a modal</td>
                    <td>One</td>
                    <td>Full-screen dialogs, bottom sheets for choices, date pickers as dialogs</td>
                    <td>16px</td>
                </tr>
                <tr>
                    <td>Medium</td>
                    <td>Collapsed navigation rail</td>
                    <td>One</td>
                    <td>Basic dialogs, docked search and pickers</td>
                    <td>24px</td>
                </tr>
                <tr>
                    <td>Expanded</td>
                    <td>Navigation rail, collapsible; starts collapsed</td>
                    <td>Two: <code>&lt;x-list-detail&gt;</code>, or <code>&lt;x-supporting-pane&gt;</code> at 360px</td>
                    <td>Basic dialogs, side sheets</td>
                    <td>24px</td>
                </tr>
                <tr>
                    <td>Large</td>
                    <td>Navigation rail, expanded by default</td>
                    <td>Two; a fixed pane is 412px</td>
                    <td>Basic dialogs, side sheets</td>
                    <td>24px</td>
                </tr>
                <tr>
                    <td>Extra-large</td>
                    <td>Navigation rail, expanded</td>
                    <td>Two, a third as a side sheet</td>
                    <td>Basic dialogs, side sheets</td>
                    <td>24px</td>
                </tr>
            </tbody>
        </table>
    </div>

    <p class="max-w-3xl type-body-md text-on-surface-variant">
        <code>&lt;x-scaffold&gt;</code> does all of this: resize this showcase and watch the bar, the rail and the
        content margin (<code>--material-margin</code>) change at 600, 840 and 1200px. A visitor who has chosen a rail
        width keeps it; until then the rail follows the class.
    </p>

    <x-livewire-material::stack gap="space200" data-test="layout-components">
        <h3 class="md-type-title-lg">The layout components</h3>

        <p class="md-type-body-md md-ink-variant">
            M3 describes a layout as a scaffold of bars and rails around panes, and names three canonical layouts. These are
            those words as components, each taking <code>as</code>, <code>hide-below</code> and <code>hide-from</code>, and
            only the spacing tokens for a gap or padding:
        </p>

        <x-livewire-material::stack as="ul" gap="space100" class="md-type-body-md">
            <li><code>&lt;x-scaffold&gt;</code> — the bars, the rail and the FAB around the page (this showcase is one).</li>
            <li><code>&lt;x-pane&gt;</code> — a content region with M3's margins and its own app bar.</li>
            <li><code>&lt;x-list-detail&gt;</code> — a list and the detail of its selection: one pane below 840px, two from it.</li>
            <li><code>&lt;x-supporting-pane&gt;</code> — a focus pane and a pane beside it from 840px, below it or a bottom sheet before.</li>
            <li><code>&lt;x-feed&gt;</code> — cards in columns that multiply as the room grows, one column below 600px.</li>
            <li><code>&lt;x-surface&gt;</code> — a tonal region: a surface role, padding, a corner and an outline.</li>
            <li><code>&lt;x-stack&gt;</code>, <code>&lt;x-row&gt;</code> and <code>&lt;x-grid&gt;</code> — arrangement inside a pane.</li>
        </x-livewire-material::stack>
    </x-livewire-material::stack>

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