{{-- The supporting-pane canonical layout on a page of its own (plan step 38): the same working
     demo the Layout section's Overview linked from its own navigation, built on the real
     <x-supporting-pane>, with the live breakpoint readout the Overview page has. --}}

@extends('livewire-material::showcase.layout')

@php
    $code = <<<'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;
@endphp

@section('content')
    <x-livewire-material::pane width="wide" data-md-showcase-page>
        <x-livewire-material::stack gap="space300">
            <x-livewire-material::stack as="header" gap="space50">
                <p class="md-type-label-lg md-ink-variant">Foundations</p>
                <h1 class="md-type-headline-lg">Layout</h1>
            </x-livewire-material::stack>

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

            <x-showcase::breakpoint-readout />

            <p class="md-type-body-md md-ink-variant">
                M3's supporting pane: a focus pane, and beside it what only means something in relation to it — the
                comments on a document, the details of a video. Below 840px it moves under the focus pane or into a
                bottom sheet; from 840px it sits beside it, a fixed 360px (412px from 1200px).
            </p>

            <x-showcase::example title="Supporting pane" :code="$code" stack />
        </x-livewire-material::stack>
    </x-livewire-material::pane>
@endsection