@php
    $examples = [
        'Data table' => <<<'BLADE'
            <div class="w-full overflow-x-auto">
                <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="text-end">Size</x-sort-header>
                            <th>Expires</th>
                            <th><span class="sr-only">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="text-end tabular-nums">1.2 MB</td>
                            <td>in 1 hour</td>
                            <td class="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="text-end tabular-nums">3.4 GB</td>
                            <td>in 7 days</td>
                            <td class="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="text-end tabular-nums">248 MB</td>
                            <td>in 3 days</td>
                            <td class="text-end"><x-button icon="more_vert" tooltip="More" /></td>
                        </tr>
                    </tbody>
                </x-table>
            </div>
            BLADE,
        'Pagination' => <<<'BLADE'
            <div class="grid w-full gap-6">
                {{ (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() }}
            </div>
            BLADE,
    ];
@endphp

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

    <p class="max-w-3xl type-body-md text-on-surface-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
</section>