{{-- M3's breakpoints, live: the one this window is in, what each one changes, and the cards that
     light up through real media queries, so the page proves the breakpoints rather than only
     describing them.

     Then the layout components, and the way on to the three canonical layouts — list-detail,
     supporting pane, feed — each on a page of its own (plan step 38), reached through the
     section navigation below. --}}

@php
    $examples = [
        '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

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

    <p class="md-type-body-md md-ink-variant">
        Widths are M3's breakpoints and nothing else: compact below 600px, then medium 600, expanded 840, large 1200
        and extra-large 1600. Scripts read the same numbers from <code>resources/js/breakpoints.js</code>.
    </p>

    <x-showcase::breakpoint-readout />

    <x-livewire-material::grid :columns="['compact' => 1, 'medium' => 5]" gap="space200">
        <div data-md-showcase-breakpoint-card="compact">
            <p class="md-type-title-sm">Compact</p>
            <p class="md-type-body-sm">below 600px</p>
        </div>
        <div data-md-showcase-breakpoint-card="medium">
            <p class="md-type-title-sm">Medium</p>
            <p class="md-type-body-sm">600–839px</p>
        </div>
        <div data-md-showcase-breakpoint-card="expanded">
            <p class="md-type-title-sm">Expanded</p>
            <p class="md-type-body-sm">840–1199px</p>
        </div>
        <div data-md-showcase-breakpoint-card="large">
            <p class="md-type-title-sm">Large</p>
            <p class="md-type-body-sm">1200–1599px</p>
        </div>
        <div data-md-showcase-breakpoint-card="extra-large">
            <p class="md-type-title-sm">Extra-large</p>
            <p class="md-type-body-sm">from 1600px</p>
        </div>
    </x-livewire-material::grid>

    <x-livewire-material::surface corner="lg" outlined style="overflow-x: auto">
        <x-livewire-material::table>
            <thead>
                <tr>
                    <th>Class</th>
                    <th>Navigation</th>
                    <th>Panes</th>
                    <th>Dialogs and sheets</th>
                    <th>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>
        </x-livewire-material::table>
    </x-livewire-material::surface>

    <p class="md-type-body-md md-ink-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>

    <x-livewire-material::stack gap="space200">
        <h3 class="md-type-title-lg">Each canonical layout, on a page of its own</h3>

        <x-livewire-material::section-nav :items="array_values(\NoNameWeb\LivewireMaterial\Showcase\Sections::layoutPages())" label="Layout pages" />
    </x-livewire-material::stack>

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