@php
    $examples = [
        'Data table' => <<<'BLADE'
            <div data-md-showcase-table-scroll>
                <x-table>
                    <thead>
                        <tr>
                            <x-sort-header column="name" :sort-by="['column' => 'name', 'direction' => 'asc']">Name</x-sort-header>
                            <x-sort-header column="size" :sort-by="['column' => 'name', 'direction' => 'asc']" class="md-text-end">Size</x-sort-header>
                            <th>Expires</th>
                            <th><span class="md-visually-hidden">Actions</span></th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr data-md-list-row>
                            <td><a href="#data" data-md-list-open>contract.pdf</a></td>
                            <td class="md-text-end md-tabular">1.2 MB</td>
                            <td>in 1 hour</td>
                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                        </tr>
                        <tr data-md-list-row aria-selected="true">
                            <td><a href="#data" data-md-list-open>design-review.mp4</a></td>
                            <td class="md-text-end md-tabular">3.4 GB</td>
                            <td>in 7 days</td>
                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                        </tr>
                        <tr data-md-list-row>
                            <td><a href="#data" data-md-list-open>holiday-photos.zip</a></td>
                            <td class="md-text-end md-tabular">248 MB</td>
                            <td>in 3 days</td>
                            <td class="md-text-end"><x-button icon="more_vert" tooltip="More" /></td>
                        </tr>
                    </tbody>
                </x-table>
            </div>
            BLADE,
        'Pagination' => <<<'BLADE'
            <x-stack gap="space300">
                {{ (new \Illuminate\Pagination\LengthAwarePaginator(range(1, 10), 95, 10, 3, ['path' => '#data']))->links() }}
                {{ (new \Illuminate\Pagination\Paginator(range(1, 11), 10, 2, ['path' => '#data']))->links() }}
            </x-stack>
            BLADE,
    ];
@endphp

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

    <p class="md-type-body-md md-ink-variant">
        <code>&lt;x-table&gt;</code>, <code>&lt;x-sort-header&gt;</code>, and Laravel's and Livewire's paginators.
    </p>

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